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

sky/sdk/lib/widgets/material.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/animated_value.dart';
 import '../painting/box_painter.dart';
 import '../theme/colors.dart' as colors;
 import '../theme/edges.dart';
 import '../theme/shadows.dart';
+import 'animated_component.dart';
 import 'basic.dart';
 import 'default_text_style.dart';
 import 'theme.dart';
 
-class Material extends Component {
+// Ugly code to linearly interpolate 2 BoxShadows.

[Hixie, 2015/06/25 21:00:59]

This logic should go in ../painting/ somewhere.

+double lerpDouble(double p1, double p2, double t) => p1 * (1.0 - t) + p2 * t;
+
+Color lerpColor(Color p1, Color p2, double t) =>
+    new Color.fromARGB((p1.alpha * (1.0 - t) + p2.alpha * t).toInt(),
+                       (p1.red * (1.0 - t) + p2.red * t).toInt(),
+                       (p1.green * (1.0 - t) + p2.green * t).toInt(),
+                       (p1.blue * (1.0 - t) + p2.blue * t).toInt());
+
+Size lerpSize(Size p1, Size p2, double t) =>
+    new Size(p1.width * (1.0 - t) + p2.width * t,
+             p1.height * (1.0 - t) + p2.height * t);
+
+BoxShadow lerpShadow(BoxShadow p1, BoxShadow p2, double t) {
+  return new BoxShadow(
+      color: lerpColor(p1.color, p2.color, t),
+      offset: lerpSize(p1.offset, p2.offset, t),
+      blur: lerpDouble(p1.blur, p2.blur, t));
+}
+
+List<BoxShadow> getShadow(double t) {

[Hixie, 2015/06/25 21:00:59]

computeShadow(), maybe? getShadow() sounds cheaper than this is.

[Matt Perry, 2015/06/25 22:31:46]

Done.

+  int level1 = t.floor();
+  int level2 = t.ceil();
+  t -= level1.toDouble();
+  if (level1 == 0)
+    return shadows[level2];

[Hixie, 2015/06/25 21:00:59]

this line confuses me

[Matt Perry, 2015/06/25 22:31:46]

clarified and added a comment.

+  List<BoxShadow> shadow = new List<BoxShadow>();
+  for (int i = 0; i < shadows[level1].length; ++i)
+    shadow.add(lerpShadow(shadows[level1][i], shadows[level2][i], t));
+  return shadow;
+}
+
+class Material extends AnimatedComponent {
 
   Material({
     String key,
     this.child,
     this.edge: MaterialEdge.card,
-    this.level: 0,
+    int level: 0,
     this.color
-  }) : super(key: key);
+  }) : super(key: key) {
+    this.level = new AnimatedValue(level.toDouble());

[Hixie, 2015/06/25 21:00:59]

Doing this every time Material() is constructed (multiple times per frame) seems
expensive, especially since you only actually need the AnimatedValue in the
instance that keeps surviving.

[Matt Perry, 2015/06/25 22:31:46]

I'm doing this here because animate() requires that the Component is not yet
mounted. I guess I could change that requirement, but I don't know what
implications that might have.

+    animate(this.level, (_) {});
+  }
 
-  final Widget child;
-  final int level;
-  final MaterialEdge edge;
-  final Color color;
+  AnimatedValue level;
+
+  Widget child;

[Hixie, 2015/06/25 21:00:58]

maintain the same order here as in the constructor and syncFields

[Matt Perry, 2015/06/25 22:31:46]

Done.

+  MaterialEdge edge;
+  Color color;
 
   Color get backgroundColor {
     if (color != null)
       return color;
     switch (Theme.of(this).brightness) {
       case ThemeBrightness.light:
         return colors.Grey[50];
       case ThemeBrightness.dark:
         return colors.Grey[850];
     }
   }
 
+  void syncFields(Material source) {
+    if (level.value != source.level.value) {

[Hixie, 2015/06/25 21:00:59]

(no {} around one-line blocks)

[Matt Perry, 2015/06/25 22:31:46]

Done.

+      level.animateTo(source.level.value.toDouble(), 200.0);

[Hixie, 2015/06/25 21:00:59]

the 200.0 should use a constant from theme/ or something. On Android in
particular we will eventually want to get this from system animation speed
settings.

+    }
+    child = source.child;
+    edge = source.edge;
+    color = source.color;
+    super.syncFields(source);
+  }
+
   // TODO(ianh): we should make this animate level changes and color changes

[Hixie, 2015/06/25 21:00:59]

remove the TODO if you're doing it :-D

[Matt Perry, 2015/06/25 22:31:46]

Done.

 
   Widget build() {
     return new Container(
       decoration: new BoxDecoration(
-        boxShadow: shadows[level],
+        boxShadow: getShadow(level.value),
         borderRadius: edges[edge],
         backgroundColor: backgroundColor,
         shape: edge == MaterialEdge.circle ? Shape.circle : Shape.rectangle
       ),
       child: new DefaultTextStyle(style: Theme.of(this).text.body1, child: child)
     );
   }
 
 }