Implement quantum ink splashes

sky/framework/sky-ink-splash.sky

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>