Port Toggleable to the new animation system

R=mpcomplete@chromium.org, mpcomplete@google.com

Review URL: https://codereview.chromium.org/1226143010 .

sdk/lib/widgets/checkbox.dart

@@ -48,7 +48,7 @@ class Checkbox extends Toggleable {
                                      ..color = uncheckedColor;
 
     // The rrect contracts slightly during the animation
-    double inset = 2.0 - (toggleAnimation.value - _kMidpoint).abs() * 2.0;
+    double inset = 2.0 - (position.value - _kMidpoint).abs() * 2.0;
     sky.Rect rect = new sky.Rect.fromLTRB(inset, inset, _kEdgeSize - inset, _kEdgeSize - inset);
     sky.RRect rrect = new sky.RRect()..setRectXY(rect, _kEdgeRadius, _kEdgeRadius);
 
@@ -57,20 +57,20 @@ class Checkbox extends Toggleable {
     canvas.drawRRect(rrect, paint);
 
     // Radial gradient that changes size
-    if (toggleAnimation.value > 0) {
+    if (position.value > 0) {
       paint.setStyle(sky.PaintingStyle.fill);
       paint.setShader(
         new sky.Gradient.radial(
           new Point(_kEdgeSize / 2.0, _kEdgeSize / 2.0),
-          _kEdgeSize * (_kMidpoint - toggleAnimation.value) * 8.0,
+          _kEdgeSize * (_kMidpoint - position.value) * 8.0,
           [const sky.Color(0x00000000), uncheckedColor]
         )
       );
       canvas.drawRRect(rrect, paint);
     }
 
-    if (toggleAnimation.value > _kMidpoint) {
-      double t = (toggleAnimation.value - _kMidpoint) / (1.0 - _kMidpoint);
+    if (position.value > _kMidpoint) {
+      double t = (position.value - _kMidpoint) / (1.0 - _kMidpoint);
 
       // Solid filled rrect
       paint.setStyle(sky.PaintingStyle.strokeAndFill);

sdk/lib/widgets/switch.dart

@@ -61,9 +61,9 @@ class Switch extends Toggleable {
     paint.setDrawLooper(builder.build());
 
     // The thumb contracts slightly during the animation
-    double inset = 2.0 - (toggleAnimation.value - 0.5).abs() * 2.0;
+    double inset = 2.0 - (position.value - 0.5).abs() * 2.0;
     Point thumbPos = new Point(
-      _kTrackRadius + toggleAnimation.value * (_kTrackWidth - _kTrackRadius * 2),
+      _kTrackRadius + position.value * (_kTrackWidth - _kTrackRadius * 2),
       _kSwitchHeight / 2.0
     );
     canvas.drawCircle(thumbPos, _kThumbRadius - inset, paint);

sdk/lib/widgets/toggleable.dart

@@ -4,14 +4,14 @@
 
 import 'dart:sky' as sky;
 
-import '../animation/animated_value.dart';
+import '../animation/animation_performance.dart';
 import '../animation/curves.dart';
 import 'animated_component.dart';
 import 'basic.dart';
 
 typedef void ValueChanged(value);
 
-const double _kCheckDuration = 200.0;
+const Duration _kCheckDuration = const Duration(milliseconds: 200);
 
 abstract class Toggleable extends AnimatedComponent {
 
@@ -20,25 +20,32 @@ abstract class Toggleable extends AnimatedComponent {
     this.value,
     this.onChanged
   }) : super(key: key) {
-    toggleAnimation = new AnimatedValue(value ? 1.0 : 0.0);
-    watch(toggleAnimation);
+    position = new AnimatedType<double>(0.0, end: 1.0);
+    performance = new AnimationPerformance()
+      ..variable = position
+      ..duration = _kCheckDuration
+      ..progress = value ? 1.0 : 0.0;
+    watchPerformance(performance);
   }
 
   bool value;
-  AnimatedValue toggleAnimation;
   ValueChanged onChanged;
 
+  AnimatedType<double> position;
+  AnimationPerformance performance;
+
   void syncFields(Toggleable source) {
     onChanged = source.onChanged;
     if (value != source.value) {
       value = source.value;
-      double targetValue = value ? 1.0 : 0.0;
-      double difference = (toggleAnimation.value - targetValue).abs();
-      if (difference > 0) {
-        toggleAnimation.stop();
-        double t = difference * duration;
-        Curve curve = targetValue > toggleAnimation.value ? curveUp : curveDown;
-        toggleAnimation.animateTo(targetValue, t, curve: curve);
+      // TODO(abarth): Setting the curve on the position means there's a
+      // discontinuity when we reverse the timeline.
+      if (value) {
+        position.curve = curveUp;
+        performance.play();
+      } else {
+        position.curve = curveDown;
+        performance.reverse();
       }
     }
     super.syncFields(source);
@@ -65,7 +72,7 @@ abstract class Toggleable extends AnimatedComponent {
         width: size.width,
         height: size.height,
         child: new CustomPaint(
-          token: toggleAnimation.value,
+          token: position.value,
           callback: customPaintCallback
         )
       ),