Convert Dismissable over to using animated subcomponents

sky/sdk/lib/widgets/dismissable.dart

Index: sky/sdk/lib/widgets/dismissable.dart
diff --git a/sky/sdk/lib/widgets/dismissable.dart b/sky/sdk/lib/widgets/dismissable.dart
index d093d964ea571414b82960c758c9aa745e4ea8e5..829b7e3e978dd62a733a559efaba94fd29c00d6f 100644
--- a/sky/sdk/lib/widgets/dismissable.dart
+++ b/sky/sdk/lib/widgets/dismissable.dart
@@ -4,14 +4,13 @@
 
 import 'dart:sky' as sky;
 
-import 'package:vector_math/vector_math.dart';
 import 'package:sky/animation/animation_performance.dart';
-import 'package:sky/widgets/animation_builder.dart';
 import 'package:sky/widgets/animated_component.dart';
 import 'package:sky/widgets/basic.dart';
 import 'package:sky/widgets/widget.dart';
+import 'package:vector_math/vector_math.dart';
 
-const int _kCardDismissFadeoutMS = 300;
+const Duration _kCardDismissFadeout = const Duration(milliseconds: 300);
 const double _kMinFlingVelocity = 700.0;
 const double _kMinFlingVelocityDelta = 400.0;
 const double _kDismissCardThreshold = 0.6;
@@ -30,21 +29,21 @@ class Dismissable extends AnimatedComponent {
   Widget child;
   DismissedCallback onDismissed;
 
-  AnimationBuilder _transform;
+  AnimatedType<Point> _position;
+  AnimatedType<double> _opacity;
   AnimationPerformance _performance;
+
   double _width;
   double _dragX = 0.0;
   bool _dragUnderway = false;
 
   void initState() {
-    _transform = new AnimationBuilder()
-      ..position = new AnimatedType<Point>(Point.origin)
-      ..opacity = new AnimatedType<double>(1.0, end: 0.0);
-
-    _performance = _transform.createPerformance(
-        [_transform.position, _transform.opacity],
-        duration: new Duration(milliseconds: _kCardDismissFadeoutMS));
-    _performance.addListener(_handleAnimationProgressChanged);
+    _position = new AnimatedType<Point>(Point.origin);
+    _opacity = new AnimatedType<double>(1.0, end: 0.0);
+    _performance = new AnimationPerformance()
+      ..duration = _kCardDismissFadeout
+      ..variable = new AnimatedList([_position, _opacity])
+      ..addListener(_handleAnimationProgressChanged);
     watch(_performance);
   }
 
@@ -77,7 +76,7 @@ class Dismissable extends AnimatedComponent {
 
   void _handleSizeChanged(Size newSize) {
     _width = newSize.width;
-    _transform.position.end = _activeCardDragEndPoint;
+    _position.end = _activeCardDragEndPoint;
   }
 
   void _handlePointerDown(sky.PointerEvent event) {
@@ -97,7 +96,7 @@ class Dismissable extends AnimatedComponent {
     setState(() {
       if (!_performance.isAnimating) {
         if (oldDragX.sign != _dragX.sign)
-          _transform.position.end = _activeCardDragEndPoint;
+          _position.end = _activeCardDragEndPoint;
         _performance.progress = _dragX.abs() / (_width * _kDismissCardThreshold);
       }
     });
@@ -130,7 +129,7 @@ class Dismissable extends AnimatedComponent {
       _dragUnderway = false;
       double distance = 1.0 - _performance.progress;
       if (distance > 0.0) {
-        double duration = _kCardDismissFadeoutMS * 1000.0 * distance / event.velocityX.abs();
+        double duration = _kCardDismissFadeout.inSeconds * distance / event.velocityX.abs();
         _dragX = event.velocityX.sign;
         _performance.timeline.animateTo(1.0, duration: duration);
       }
@@ -138,18 +137,8 @@ class Dismissable extends AnimatedComponent {
   }
 
   Widget build() {
-    // TODO(hansmuller) The code below changes the widget tree when
-    // the user starts dragging. Currently this causes Sky to drop the
-    // rest of the pointer gesture, see https://github.com/domokit/mojo/issues/312.
-    // As a workaround, always create the Transform and Opacity nodes.
-    Widget transformedChild = child;
-    if (_isActive) {
-      transformedChild = _transform.build(transformedChild);
-    } else {
-      transformedChild = new Transform(child: transformedChild, transform: new Matrix4.identity());
-      transformedChild = new Opacity(child: transformedChild, opacity: 1.0);
-    }
-
+    Matrix4 transform = new Matrix4.identity();
+    transform.translate(_position.value.x, _position.value.y);
     return new Listener(
       onPointerDown: _handlePointerDown,
       onPointerMove: _handlePointerMove,
@@ -157,8 +146,14 @@ class Dismissable extends AnimatedComponent {
       onPointerCancel: _handlePointerUpOrCancel,
       onGestureFlingStart: _handleFlingStart,
       child: new SizeObserver(
-        child: transformedChild,
-        callback: _handleSizeChanged
+        callback: _handleSizeChanged,
+        child: new Opacity(
+          opacity: _opacity.value,
+          child: new Transform(
+            transform: transform,
+            child: child
+          )
+        )
       )
     );
   }