Index: sky/framework/sky-ink-splash.sky |
diff --git a/sky/framework/sky-ink-splash.sky b/sky/framework/sky-ink-splash.sky |
new file mode 100644 |
index 0000000000000000000000000000000000000000..9f920e9271163d5ecc757daf1a64d2a276de4e18 |
--- /dev/null |
+++ b/sky/framework/sky-ink-splash.sky |
@@ -0,0 +1,84 @@ |
+<!-- |
+// Copyright 2015 The Chromium Authors. All rights reserved. |
+// Use of this source code is governed by a BSD-style license that can be |
+// found in the LICENSE file. |
+--> |
+<import src="sky-element.sky" /> |
+ |
+<sky-element> |
+<template> |
+ <style> |
+ :host { |
+ position: absolute; |
+ pointer-events: none; |
+ overflow: hidden; |
+ top: 0; |
+ left: 0; |
+ bottom: 0; |
+ right: 0; |
+ } |
+ |
+ #splash { |
+ position: absolute; |
+ background-color: rgba(0, 0, 0, 0.4); |
+ border-radius: 0; |
+ top: 0; |
+ left: 0; |
+ height: 0; |
+ width: 0; |
+ } |
+ </style> |
+ <div id="splash" /> |
+</template> |
+<script> |
+import "animation/controller.dart"; |
+import "animation/curves.dart"; |
+import "animation/timer.dart"; |
+import "dart:math" as math; |
+import "dart:sky"; |
+ |
+const double _kSplashSize = 400.0; |
+const double _kSplashDuration = 500.0; |
+ |
+@Tagname('sky-ink-splash') |
+class SkyInkSplash extends SkyElement implements AnimationDelegate { |
+ AnimationController _animation; |
+ Element _splash; |
+ double _offsetX; |
+ double _offsetY; |
+ |
+ SkyInkSplash() { |
+ _animation = new AnimationController(this); |
+ } |
+ |
+ void shadowRootReady() { |
+ _splash = shadowRoot.getElementById('splash'); |
+ } |
+ |
+ void start(double x, double y, ClientRect rect) { |
+ _offsetX = x - rect.left; |
+ _offsetY = y - rect.top; |
+ _animation.start( |
+ begin: 0.0, |
+ end: _kSplashSize, |
+ duration: _kSplashDuration, |
+ curve: easeOut); |
+ } |
+ |
+ void updateAnimation(double p) { |
+ if (p == _kSplashSize) { |
+ remove(); |
+ return; |
+ } |
+ _splash.style['top'] = '${_offsetY - p/2}px'; |
+ _splash.style['left'] = '${_offsetX - p/2}px'; |
+ _splash.style['width'] = '${p}px'; |
+ _splash.style['height'] = '${p}px'; |
+ _splash.style['border-radius'] = '${p}px'; |
+ _splash.style['opacity'] = '${1.0 - (p / _kSplashSize)}'; |
+ } |
+} |
+ |
+_init(script) => register(script, SkyInkSplash); |
+</script> |
+</sky-element> |