[Effen] Reduce splashes when scrolling.

sky/framework/components/ink_splash.dart

Index: sky/framework/components/ink_splash.dart
diff --git a/sky/framework/components/ink_splash.dart b/sky/framework/components/ink_splash.dart
index 335d49d22befc43877274fa6e62a48aa14ec3317..6b897680d6ebb7d979404f105f42a3876cec7882 100644
--- a/sky/framework/components/ink_splash.dart
+++ b/sky/framework/components/ink_splash.dart
@@ -13,6 +13,8 @@ import 'dart:sky' as sky;
 
 const double _kSplashConfirmedDuration = 350.0;
 const double _kSplashUnconfirmedDuration = config.kDefaultLongPressTimeout;
+const double _kSplashAbortDuration = 100.0;
+const double _kSplashInitialDelay = 0.0; // we could delay initially in case the user scrolls
 
 double _getSplashTargetSize(sky.ClientRect rect, double x, double y) {
   return 2.0 * math.max(math.max(x - rect.left, rect.right - x),
@@ -26,11 +28,13 @@ class SplashController {
   final AnimatedValue _size = new AnimatedValue(0.0);
   double _offsetX;
   double _offsetY;
+  double _lastSize = 0.0;
+  bool _growing = true;
   double _targetSize;
   Stream<String> _styleStream;
 
   void start() {
-    _size.animateTo(_targetSize, _kSplashUnconfirmedDuration, curve: easeOut);
+    _size.animateTo(_targetSize, _kSplashUnconfirmedDuration, curve: easeOut, initialDelay: _kSplashInitialDelay);
   }
 
   void confirm() {
@@ -41,6 +45,14 @@ class SplashController {
     _size.animateTo(_targetSize, duration, curve: easeOut);
   }
 
+  void abort() {
+    _growing = false;
+    double durationRemaining = _size.remainingTime;
+    if (durationRemaining <= _kSplashAbortDuration)
+      return;
+    _size.animateTo(_targetSize, _kSplashAbortDuration, curve: easeOut);
+  }
+
   void cancel() {
     _size.stop();
   }
@@ -55,12 +67,19 @@ class SplashController {
       if (p == _targetSize) {
         onDone();
       }
+      double size;
+      if (_growing) {
+        sise = p;
+        _lastSize = p;
+      } else {
+        size = _lastSize;
+      }
       return '''
-        top: ${_offsetY - p/2}px;
-        left: ${_offsetX - p/2}px;
-        width: ${p}px;
-        height: ${p}px;
-        border-radius: ${p}px;
+        top: ${_offsetY - size/2}px;
+        left: ${_offsetX - size/2}px;
+        width: ${size}px;
+        height: ${size}px;
+        border-radius: ${size}px;
         opacity: ${1.0 - (p / _targetSize)};''';
     });