OLD | NEW |
(Empty) | |
| 1 <!-- |
| 2 // Copyright 2015 The Chromium Authors. All rights reserved. |
| 3 // Use of this source code is governed by a BSD-style license that can be |
| 4 // found in the LICENSE file. |
| 5 --> |
| 6 <import src="sky-element.sky" /> |
| 7 |
| 8 <sky-element> |
| 9 <template> |
| 10 <style> |
| 11 :host { |
| 12 position: absolute; |
| 13 pointer-events: none; |
| 14 overflow: hidden; |
| 15 top: 0; |
| 16 left: 0; |
| 17 bottom: 0; |
| 18 right: 0; |
| 19 } |
| 20 |
| 21 #splash { |
| 22 position: absolute; |
| 23 background-color: rgba(0, 0, 0, 0.4); |
| 24 border-radius: 0; |
| 25 top: 0; |
| 26 left: 0; |
| 27 height: 0; |
| 28 width: 0; |
| 29 } |
| 30 </style> |
| 31 <div id="splash" /> |
| 32 </template> |
| 33 <script> |
| 34 import "animation/controller.dart"; |
| 35 import "animation/curves.dart"; |
| 36 import "animation/timer.dart"; |
| 37 import "dart:math" as math; |
| 38 import "dart:sky"; |
| 39 |
| 40 const double _kSplashSize = 400.0; |
| 41 const double _kSplashDuration = 500.0; |
| 42 |
| 43 @Tagname('sky-ink-splash') |
| 44 class SkyInkSplash extends SkyElement implements AnimationDelegate { |
| 45 AnimationController _animation; |
| 46 Element _splash; |
| 47 double _offsetX; |
| 48 double _offsetY; |
| 49 |
| 50 SkyInkSplash() { |
| 51 _animation = new AnimationController(this); |
| 52 } |
| 53 |
| 54 void shadowRootReady() { |
| 55 _splash = shadowRoot.getElementById('splash'); |
| 56 } |
| 57 |
| 58 void start(double x, double y, ClientRect rect) { |
| 59 _offsetX = x - rect.left; |
| 60 _offsetY = y - rect.top; |
| 61 _animation.start( |
| 62 begin: 0.0, |
| 63 end: _kSplashSize, |
| 64 duration: _kSplashDuration, |
| 65 curve: easeOut); |
| 66 } |
| 67 |
| 68 void updateAnimation(double p) { |
| 69 if (p == _kSplashSize) { |
| 70 remove(); |
| 71 return; |
| 72 } |
| 73 _splash.style['top'] = '${_offsetY - p/2}px'; |
| 74 _splash.style['left'] = '${_offsetX - p/2}px'; |
| 75 _splash.style['width'] = '${p}px'; |
| 76 _splash.style['height'] = '${p}px'; |
| 77 _splash.style['border-radius'] = '${p}px'; |
| 78 _splash.style['opacity'] = '${1.0 - (p / _kSplashSize)}'; |
| 79 } |
| 80 } |
| 81 |
| 82 _init(script) => register(script, SkyInkSplash); |
| 83 </script> |
| 84 </sky-element> |
OLD | NEW |