Make splash animations abort on scroll.

sky/framework/sky-ink-splash.sky

 <!--
 // 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>
@@ skipping 18 matching lines @@
     }
   </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";
+import "dart:async";
 
 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;
+  Completer<SkyInkSplash> _completer = new Completer();
 
   SkyInkSplash() {
     _animation = new AnimationController(this);
   }
 
   void shadowRootReady() {
     _splash = shadowRoot.getElementById('splash');
   }
 
-  void start(double x, double y, ClientRect rect) {
+  Future 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);
+    return _completer.future;
+  }
+
+  void _done() {
+    remove();
+    _completer.complete(this);
+  }
+
+  void cancel() {
+    // TODO(eseidel): Should fade away instead of stopping immediately.
+    _animation.stop();
+    _done();
   }
 
   void updateAnimation(double p) {
     if (p == _kSplashSize) {
-      remove();
+      _done();
       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>