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

sky/sdk/lib/widgets/animated_component.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 'dart:async';
 
+import 'package:vector_math/vector_math.dart';
+
 import '../animation/animated_value.dart';
+import '../animation/animation_performance.dart';
+import '../animation/curves.dart';
 import 'basic.dart';
 
 class _AnimationEntry {
   _AnimationEntry(this.value);
   final AnimatedValue value;
   StreamSubscription<double> subscription;
 }
 
 abstract class AnimatedComponent extends Component {
 
@@ skipping 25 matching lines @@
   void didUnmount() {
     for (_AnimationEntry entry in _animatedFields) {
       assert(entry.subscription != null);
       entry.subscription.cancel();
       entry.subscription = null;
     }
     super.didUnmount();
   }
 
 }
+
+// Types of things that can be animated in a component. Use build() to
+// construct the final Widget based on the animation state.
+// TODO(mpcomplete): the idea here is to eventually have an AnimatedCollection
+// which assembles a container based on a list of animated things. e.g. if you
+// want to animate position, opacity, and shadow, you add those animators to an
+// AnimatedCollection and just call collection.build() to construct your
+// widget.
+
+class AnimatedPosition extends AnimatedType<Point> {
+  AnimatedPosition(Point begin, Point end, {Curve curve: linear})
+      : super(begin, end, curve: curve);
+
+  Widget build({Widget child}) {
+    Matrix4 transform = new Matrix4.identity();
+    transform.translate(value.x, value.y);
+    return new Transform(transform: transform, child: child);
+  }
+}

[abarth-chromium, 2015/06/30 22:26:09]

Why not make an AnimatedTransform that inherits from Component that does this
work?

[Matt Perry, 2015/07/01 18:17:43]

My goal is to make it so the user doesn't have to worry about what hierarchy the
animation system creates. So I envision something like this:

performance.variable = new AnimatedCollection([
  new AnimatedPosition(startPos, endPos)..duringTimeline(0.0, 0.75),
  new AnimatedFade(0.0, 1.0),
  new AnimatedScale(0.8, 1.0)]);

which would mean "move from startPos to endPos during the first 75% of the
timeline, fade-in from 0 to 100%, and scale from 80% to 100%". Then later, you
just call:

performance.variable.build(...)

and it constructs whatever hierarchy it needs.

Does that make sense?