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

sky/sdk/lib/animation/animation_performance.dart

Index: sky/sdk/lib/animation/animation_performance.dart
diff --git a/sky/sdk/lib/animation/animation_performance.dart b/sky/sdk/lib/animation/animation_performance.dart
new file mode 100644
index 0000000000000000000000000000000000000000..6ebbb141aabf3af219243a76939863149b70cfca
--- /dev/null
+++ b/sky/sdk/lib/animation/animation_performance.dart
@@ -0,0 +1,94 @@
+// 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_value.dart';
+import 'curves.dart';
+
+// TODO(mpcomplete): merge this stuff with AnimatedValue somehow. We shouldn't
+// have 2 different ways to animate values.
+abstract class AnimatedVariable {
+  void setPercentage(double t);

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

Does t go from 0 to 100 or from 0 to 1?  If its the latter, "percentage"
probably isn't the best term.  Maybe "fraction"?

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

Done.

+}
+
+class AnimatedType<T> extends AnimatedVariable {
+  T value;
+  T begin, end;

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

final?

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

Done.

+  Curve curve;

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

final?

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

Done.

+
+  AnimatedType(this.begin, this.end, {this.curve: linear}) {
+    value = begin;
+  }
+
+  void setPercentage(double t) {
+    // TODO(mpcomplete): Reverse the timeline and curve.
+    value = begin + (end - begin) * curve.transform(t);
+  }
+}
+
+// This class manages a "performance" - a collection of values that change
+// based on a timeline. For example, a performance may handle an animation
+// of a menu opening by sliding and fading in (changing Y value and opacity)
+// over .5 seconds. The performance can move forwards (present) or backwards
+// (dismiss). A consumer may also take direct control of the timeline by
+// manipulating |percentage|, or |fling| the timeline causing a physics-based
+// simulation to take over the progression.
+class AnimationPerformance {
+  // TODO(mpcomplete): make this a list, or composable somehow.
+  AnimatedVariable variable;
+  // Advances from 0 to 1. On each tick, we'll update our variable's values.
+  AnimatedValue timeline = new AnimatedValue(0.0);
+  // TODO(mpcomplete): duration should be on a director.
+  // TODO(mpcomplete): maybe this should be in seconds?
+  double durationMS;

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

Maybe this should be of type Duration?

https://api.dartlang.org/apidocs/channels/stable/dartdoc-viewer/dart:core.Dur...

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

Done.

+
+  AnimationPerformance() {
+    timeline.onValueChanged.listen((double t) {
+      variable.setPercentage(t);
+    });
+  }
+
+  double get percentage => timeline.value;
+  void set percentage(double t) {
+    stop();
+    timeline.value = t.clamp(0.0, 1.0);
+  }
+
+  bool get isDismissed => timeline.value == 0;
+  bool get isPresented => timeline.value == 1;

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

0.0 and 1.0

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

Done.

+  bool get isAnimating => timeline.isAnimating;
+
+  void present() {
+    _animateTo(1.0);
+  }
+  void dismiss() {
+    _animateTo(0.0);
+  }
+
+  void stop() {
+    timeline.stop();
+  }
+
+  // Resume animating in a direction, with the given velocity.
+  // TODO(mpcomplete): this should be a force with friction so it slows over
+  // time.

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

Have you looked at ParticleInBoxWithFriction from mechanics.dart?

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

Yeah, that looks promising. I'd have to hook it up to timeline.

+  void fling({double velocity: 1.0}) {
+    double target = velocity.sign < 0.0 ? 0.0 : 1.0;
+    double distance = (target - timeline.value).abs();
+    double duration = distance / velocity.abs();
+
+    if (distance > 0)

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

0.0

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

Done.

+      timeline.animateTo(target, duration, curve: linear);
+  }
+
+  // TODO(mpcomplete): fix animateTo to better handle resuming an animation,
+  // with timelines. Also need to support forces.
+  void _animateTo(double target) {
+    double remainingDistance = (target - timeline.value).abs();
+    timeline.stop();
+    if (remainingDistance != 0)

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

0.0

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

Done.

+      timeline.animateTo(target, remainingDistance * durationMS);
+  }
+}
+
+