Baby steps towards an odeon-like animation system. First victim: Drawer.

sky/sdk/lib/widgets/drawer.dart

Index: sky/sdk/lib/widgets/drawer.dart
diff --git a/sky/sdk/lib/widgets/drawer.dart b/sky/sdk/lib/widgets/drawer.dart
index ac84a95b04a4f92fec8fb9ce953c75dd2e355ea0..145fb14586c3ef6c14d80da74b2fc2e75333c0fb 100644
--- a/sky/sdk/lib/widgets/drawer.dart
+++ b/sky/sdk/lib/widgets/drawer.dart
@@ -8,6 +8,7 @@ import 'dart:sky' as sky;
 import 'package:vector_math/vector_math.dart';
 
 import '../animation/animated_value.dart';
+import '../animation/animation_performance.dart';
 import '../animation/curves.dart';
 import '../theme/colors.dart';
 import '../theme/shadows.dart';
@@ -36,15 +37,22 @@ const Curve _kAnimationCurve = parabolicRise;
 typedef void DrawerStatusChangeHandler (bool showing);
 
 class DrawerController {
-
   DrawerController(this.onStatusChange) {
-    position = new AnimatedValue(-_kWidth, onChange: _checkValue);
+    performance = new AnimationPerformance()
+      ..durationMS = _kBaseSettleDurationMS
+      ..variable = _position;
+    performance.timeline.onValueChanged.listen(_checkValue);
   }
   final DrawerStatusChangeHandler onStatusChange;
-  AnimatedValue position;
+
+  AnimationPerformance performance;
+  final AnimationVariable _position = new AnimationVariable(
+      -_kWidth, 0.0, curve: _kAnimationCurve);
+
+  double get position => _position.value;
 
   bool _oldClosedState = true;
-  void _checkValue() {
+  void _checkValue(_) {
     var newClosedState = isClosed;
     if (onStatusChange != null && _oldClosedState != newClosedState) {
       onStatusChange(!newClosedState);
@@ -52,71 +60,53 @@ class DrawerController {
     }
   }
 
-  bool get isClosed => position.value == -_kWidth;
-  bool get _isMostlyClosed => position.value <= -_kWidth / 2;
-  void toggle() => _isMostlyClosed ? open() : close();
+  bool get isClosed => performance.isDismissed;
+  bool get _isMostlyClosed => position <= -_kWidth/2;
+
+  void open() => performance.present();
+
+  void close() => performance.dismiss();
+
+  void _settle() => _isMostlyClosed ? close() : open();
 
   void handleMaskTap(_) => close();
-  void handlePointerDown(_) => position.stop();
+
+  // TODO(mpcomplete): Figure out how to generalize these handlers on a
+  // "PannableThingy" interface.
+  void handlePointerDown(_) => performance.stop();
 
   void handlePointerMove(sky.PointerEvent event) {
-    if (position.isAnimating)
+    if (performance.isAnimating)
       return;
-    position.value = math.min(0.0, math.max(position.value + event.dx, -_kWidth));
+    performance.percentage += event.dx / _kWidth;
   }
 
   void handlePointerUp(_) {
-    if (!position.isAnimating)
+    if (!performance.isAnimating)
       _settle();
   }
 
   void handlePointerCancel(_) {
-    if (!position.isAnimating)
+    if (!performance.isAnimating)
       _settle();
   }
 
-  void open() => _animateToPosition(0.0);
-
-  void close() => _animateToPosition(-_kWidth);
-
-  void _settle() => _isMostlyClosed ? close() : open();
-
-  void _animateToPosition(double targetPosition) {
-    double distance = (targetPosition - position.value).abs();
-    if (distance != 0) {
-      double targetDuration = distance / _kWidth * _kBaseSettleDurationMS;
-      double duration = math.min(targetDuration, _kMaxSettleDurationMS);
-      position.animateTo(targetPosition, duration, curve: _kAnimationCurve);
-    }
-  }
-
   void handleFlingStart(event) {
-    double direction = event.velocityX.sign;
-    double velocityX = event.velocityX.abs() / 1000;
-    if (velocityX < _kMinFlingVelocity)
-      return;
-
-    double targetPosition = direction < 0.0 ? -_kWidth : 0.0;
-    double distance = (targetPosition - position.value).abs();
-    double duration = distance / velocityX;
-
-    if (distance > 0)
-      position.animateTo(targetPosition, duration, curve: linear);
+    double velocityX = event.velocityX / 1000;
+    if (velocityX.abs() >= _kMinFlingVelocity)
+      performance.fling(velocity: velocityX / _kWidth);
   }
-
 }
 
 class Drawer extends AnimatedComponent {
-
   Drawer({
     String key,
     this.controller,
     this.children,
     this.level: 0
   }) : super(key: key) {
-    animate(controller.position, (double value) {
-      _position = value;
-    });
+    // TODO(mpcomplete): is |setter| ever needed?
+    animate(controller.performance.timeline, (_) {});
   }
 
   List<Widget> children;
@@ -130,8 +120,11 @@ class Drawer extends AnimatedComponent {
     super.syncFields(source);
   }
 
-  double _position;
+  double get _position { return controller.position; }
 
+  // TODO(mpcomplete): the animation system should handle building, maybe? Or
+  // at least setting the transform. Figure out how this could work for things
+  // like fades, slides, rotates, pinch, etc.
   Widget build() {
     Matrix4 transform = new Matrix4.identity();
     transform.translate(_position);
@@ -141,8 +134,7 @@ class Drawer extends AnimatedComponent {
 
     var mask = new Listener(
       child: new Container(decoration: new BoxDecoration(backgroundColor: maskColor)),
-      onGestureTap: controller.handleMaskTap,
-      onGestureFlingStart: controller.handleFlingStart
+      onGestureTap: controller.handleMaskTap
     );
 
     Container content = new Container(
@@ -159,7 +151,8 @@ class Drawer extends AnimatedComponent {
       onPointerDown: controller.handlePointerDown,
       onPointerMove: controller.handlePointerMove,
       onPointerUp: controller.handlePointerUp,
-      onPointerCancel: controller.handlePointerCancel
+      onPointerCancel: controller.handlePointerCancel,
+      onGestureFlingStart: controller.handleFlingStart
     );
   }