Begin work on the PopupMenu entrance animation

sky/framework/components/drawer.dart

 // 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 '../animation/animation.dart';
+import '../animation/animated_value.dart';
 import '../animation/curves.dart';
 import '../fn.dart';
 import '../theme/colors.dart';
 import '../theme/shadows.dart';
 import 'dart:async';
 import 'dart:math' as math;
 import 'dart:sky' as sky;
 import 'material.dart';
 
 const double _kWidth = 304.0;
 const double _kMinFlingVelocity = 0.4;
 const double _kBaseSettleDurationMS = 246.0;
 const double _kMaxSettleDurationMS = 600.0;
 const Curve _kAnimationCurve = parabolicRise;
 
-class DrawerAnimation extends Animation {
-  Stream<double> get onPositionChanged => onValueChanged;
+class DrawerController {
+  final AnimatedValue position = new AnimatedValue(-_kWidth);
 
-  bool get _isMostlyClosed => value <= -_kWidth / 2;
-
-  DrawerAnimation() {
-    value = -_kWidth;
-  }
+  bool get _isMostlyClosed => position.value <= -_kWidth / 2;
 
   void toggle(_) => _isMostlyClosed ? _open() : _close();
 
   void handleMaskTap(_) => _close();
 
-  void handlePointerDown(_) => stop();
+  void handlePointerDown(_) => position.stop();
 
   void handlePointerMove(sky.PointerEvent event) {
-    if (isAnimating)
+    if (position.isAnimating)
       return;
-    value = math.min(0.0, math.max(value + event.dx, -_kWidth));
+    position.value = math.min(0.0, math.max(position.value + event.dx, -_kWidth));
   }
 
   void handlePointerUp(_) {
-    if (!isAnimating)
+    if (!position.isAnimating)
       _settle();
   }
 
   void handlePointerCancel(_) {
-    if (!isAnimating)
+    if (!position.isAnimating)
       _settle();
   }
 
   void _open() => _animateToPosition(0.0);
 
   void _close() => _animateToPosition(-_kWidth);
 
   void _settle() => _isMostlyClosed ? _close() : _open();
 
   void _animateToPosition(double targetPosition) {
-    double distance = (targetPosition - value).abs();
+    double distance = (targetPosition - position.value).abs();
     if (distance != 0) {
       double targetDuration = distance / _kWidth * _kBaseSettleDurationMS;
       double duration = math.min(targetDuration, _kMaxSettleDurationMS);
-      animateTo(targetPosition, duration, curve: _kAnimationCurve);
+      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 - value).abs();
+    double distance = (targetPosition - position.value).abs();
     double duration = distance / velocityX;
 
-    animateTo(targetPosition, duration, curve: linear);
+    position.animateTo(targetPosition, duration, curve: linear);
   }
 }
 
 class Drawer extends Component {
   static final Style _style = new Style('''
     position: absolute;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;'''
   );
 
   static final Style _maskStyle = new Style('''
     background-color: black;
     will-change: opacity;
     position: absolute;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;'''
   );
 
   static final Style _contentStyle = new Style('''
     background-color: ${Grey[50]};
     will-change: transform;
     position: absolute;
-    width: 304px;
+    width: ${_kWidth}px;
     top: 0;
     left: 0;
     bottom: 0;'''
   );
 
-  DrawerAnimation animation;
   List<Node> children;
   int level;
+  DrawerController controller;
+
+  AnimatedValueListener _position;
 
   Drawer({
     Object key,
-    this.animation,
+    this.controller,
     this.children,
     this.level: 0
   }) : super(key: key) {
-    events.listen('pointerdown', animation.handlePointerDown);
-    events.listen('pointermove', animation.handlePointerMove);
-    events.listen('pointerup', animation.handlePointerUp);
-    events.listen('pointercancel', animation.handlePointerCancel);
+    events.listen('pointerdown', controller.handlePointerDown);
+    events.listen('pointermove', controller.handlePointerMove);
+    events.listen('pointerup', controller.handlePointerUp);
+    events.listen('pointercancel', controller.handlePointerCancel);
+    _position = new AnimatedValueListener(this, controller.position);
   }
 
-  double _position = -_kWidth;
-
-  bool _listening = false;
-
-  void _ensureListening() {
-    if (_listening)
-      return;
-
-    _listening = true;
-    animation.onPositionChanged.listen((position) {
-      setState(() {
-        _position = position;
-      });
-    });
+  void didUnmount() {
+    _position.stopListening();
   }
 
   Node build() {
-    _ensureListening();
+    _position.ensureListening();
 
-    bool isClosed = _position <= -_kWidth;
+    bool isClosed = _position.value <= -_kWidth;
     String inlineStyle = 'display: ${isClosed ? 'none' : ''}';
-    String maskInlineStyle = 'opacity: ${(_position / _kWidth + 1) * 0.5}';
-    String contentInlineStyle = 'transform: translateX(${_position}px)';
+    String maskInlineStyle = 'opacity: ${(_position.value / _kWidth + 1) * 0.5}';
+    String contentInlineStyle = 'transform: translateX(${_position.value}px)';
 
     Container mask = new Container(
       key: 'Mask',
       style: _maskStyle,
       inlineStyle: maskInlineStyle
-    )..events.listen('gesturetap', animation.handleMaskTap)
-     ..events.listen('gestureflingstart', animation.handleFlingStart);
+    )..events.listen('gesturetap', controller.handleMaskTap)
+     ..events.listen('gestureflingstart', controller.handleFlingStart);
 
     Material content = new Material(
       key: 'Content',
       style: _contentStyle,
       inlineStyle: contentInlineStyle,
       children: children,
       level: level
     );
 
     return new Container(
       style: _style,
       inlineStyle: inlineStyle,
       children: [ mask, content ]
     );
   }
 }