[Effen] Add AnimatedComponent base class

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 'animated_component.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';
 
@@ skipping 52 matching lines @@
       return;
 
     double targetPosition = direction < 0.0 ? -_kWidth : 0.0;
     double distance = (targetPosition - position.value).abs();
     double duration = distance / velocityX;
 
     position.animateTo(targetPosition, duration, curve: linear);
   }
 }
 
-class Drawer extends Component {
+class Drawer extends AnimatedComponent {
   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;
@@ skipping 12 matching lines @@
     width: ${_kWidth}px;
     top: 0;
     left: 0;
     bottom: 0;'''
   );
 
   List<Node> children;
   int level;
   DrawerController controller;
 
-  AnimatedValueListener _position;
+  double _position;
 
   Drawer({
     Object key,
     this.controller,
     this.children,
     this.level: 0
   }) : super(key: key) {
-    _position = new AnimatedValueListener(this, controller.position);
-  }
-
-  void didUnmount() {
-    _position.stopListening();
+    animateField(controller.position, #_position);
   }
 
   Node build() {
-    _position.ensureListening();
-
-    bool isClosed = _position.value <= -_kWidth;
+    bool isClosed = _position <= -_kWidth;
     String inlineStyle = 'display: ${isClosed ? 'none' : ''}';
-    String maskInlineStyle = 'opacity: ${(_position.value / _kWidth + 1) * 0.5}';
-    String contentInlineStyle = 'transform: translateX(${_position.value}px)';
+    String maskInlineStyle = 'opacity: ${(_position / _kWidth + 1) * 0.5}';
+    String contentInlineStyle = 'transform: translateX(${_position}px)';
 
     var mask = new EventTarget(
       new Container(
         key: 'Mask',
         style: _maskStyle,
         inlineStyle: maskInlineStyle
       ),
       onGestureTap: controller.handleMaskTap,
       onGestureFlingStart: controller.handleFlingStart
     );
@@ skipping 12 matching lines @@
         inlineStyle: inlineStyle,
         children: [ mask, content ]
       ),
       onPointerDown: controller.handlePointerDown,
       onPointerMove: controller.handlePointerMove,
       onPointerUp: controller.handlePointerUp,
       onPointerCancel: controller.handlePointerCancel
     );
   }
 }