Make SnackBar animate itself

sky/sdk/BUILD.gn

@@ -51,7 +51,6 @@ dart_pkg("sky") {
     "lib/theme/view_configuration.dart",
     "lib/widgets/animated_component.dart",
     "lib/widgets/animated_container.dart",
-    "lib/widgets/animation_builder.dart",
     "lib/widgets/basic.dart",
     "lib/widgets/block_viewport.dart",
     "lib/widgets/button_base.dart",

sky/sdk/example/stocks/lib/stock_home.dart

@@ -3,9 +3,6 @@
 // found in the LICENSE file.
 
 import 'package:sky/editing/input.dart';
-import 'package:sky/animation/animation_performance.dart';
-import 'package:sky/widgets/animated_component.dart';
-import 'package:sky/widgets/animation_builder.dart';
 import 'package:sky/theme/colors.dart' as colors;
 import 'package:sky/widgets/basic.dart';
 import 'package:sky/widgets/drawer.dart';
@@ -35,7 +32,7 @@ typedef void ModeUpdater(StockMode mode);
 
 const Duration _kSnackbarSlideDuration = const Duration(milliseconds: 200);
 
-class StockHome extends AnimatedComponent {
+class StockHome extends StatefulComponent {
 
   StockHome(this.navigator, this.stocks, this.stockMode, this.modeUpdater);
 
@@ -54,7 +51,8 @@ class StockHome extends AnimatedComponent {
   bool _isSearching = false;
   String _searchQuery;
 
-  AnimationBuilder _snackbarTransform;
+  bool _isSnackBarLive = false; // Is it on screen at all (maybe dismissing)?
+  bool _isSnackBarShowing = false; // Should it be showing?
 
   void _handleSearchBegin() {
     navigator.pushState(this, (_) {
@@ -139,6 +137,7 @@ class StockHome extends AnimatedComponent {
   Drawer buildDrawer() {
     if (_drawerStatus == DrawerStatus.inactive)
       return null;
+    assert(_drawerShowing); // TODO(mpcomplete): this is always true
     return new Drawer(
       level: 3,
       showing: _drawerShowing,
@@ -263,40 +262,34 @@ class StockHome extends AnimatedComponent {
 
   void _handleUndo() {
     setState(() {
-      _snackbarTransform = null;
+      _isSnackBarShowing = false;
     });
   }
 
   Widget buildSnackBar() {
-    if (_snackbarTransform == null)
+    if (!_isSnackBarLive)
       return null;
-    return _snackbarTransform.build(
-      new SnackBar(
-        content: new Text("Stock purchased!"),
-        actions: [new SnackBarAction(label: "UNDO", onPressed: _handleUndo)]
-      ));
+    return new SnackBar(
+      showing: _isSnackBarShowing,
+      content: new Text("Stock purchased!"),
+      actions: [new SnackBarAction(label: "UNDO", onPressed: _handleUndo)],
+      onHidden: () { setState(() { _isSnackBarLive = false; }); }
+    );
   }
 
   void _handleStockPurchased() {
     setState(() {
-      _snackbarTransform = new AnimationBuilder()
-        ..position = new AnimatedType<Point>(const Point(0.0, 45.0), end: Point.origin);
-      var performance = _snackbarTransform.createPerformance(
-          [_snackbarTransform.position], duration: _kSnackbarSlideDuration);
-      watch(performance);
-      performance.play();
+      _isSnackBarShowing = true;
+      _isSnackBarLive = true;
     });
   }
 
   Widget buildFloatingActionButton() {
-    var widget = new FloatingActionButton(
+    return new FloatingActionButton(
       child: new Icon(type: 'content/add', size: 24),
       backgroundColor: colors.RedAccent[200],
       onPressed: _handleStockPurchased
     );
-    if (_snackbarTransform != null)
-      widget = _snackbarTransform.build(widget);
-    return widget;
   }
 
   void addMenuToOverlays(List<Widget> overlays) {

sky/sdk/lib/widgets/drawer.dart

@@ -5,10 +5,11 @@
 import 'dart:sky' as sky;
 
 import 'package:sky/animation/animation_performance.dart';
+import 'package:sky/animation/curves.dart';
+import 'package:sky/base/lerp.dart';
 import 'package:sky/theme/shadows.dart';
 import 'package:sky/theme/colors.dart' as colors;
 import 'package:sky/widgets/animated_component.dart';
-import 'package:sky/widgets/animation_builder.dart';
 import 'package:sky/widgets/basic.dart';
 import 'package:sky/widgets/navigator.dart';
 import 'package:sky/widgets/scrollable_viewport.dart';
@@ -44,6 +45,16 @@ enum DrawerStatus {
 
 typedef void DrawerStatusChangedCallback(DrawerStatus status);
 
+// TODO(mpcomplete): find a better place for this.
+class AnimatedColor extends AnimatedType<Color> {
+  AnimatedColor(Color begin, { Color end, Curve curve: linear })
+    : super(begin, end: end, curve: curve);
+
+  void setFraction(double t) {
+    value = lerpColor(begin, end, t);
+  }
+}
+
 class Drawer extends AnimatedComponent {
   Drawer({
     String key,

sky/sdk/lib/widgets/snack_bar.dart

@@ -2,13 +2,19 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import 'package:sky/animation/animation_performance.dart';
 import 'package:sky/painting/text_style.dart';
 import 'package:sky/theme/typography.dart' as typography;
+import 'package:sky/widgets/animated_component.dart';
 import 'package:sky/widgets/basic.dart';
 import 'package:sky/widgets/default_text_style.dart';
 import 'package:sky/widgets/material.dart';
 import 'package:sky/widgets/theme.dart';
 
+import 'package:vector_math/vector_math.dart';
+
+const Duration _kSlideInDuration = const Duration(milliseconds: 200);
+
 class SnackBarAction extends Component {
   SnackBarAction({String key, this.label, this.onPressed }) : super(key: key) {
     assert(label != null);
@@ -29,18 +35,58 @@ class SnackBarAction extends Component {
   }
 }
 
-class SnackBar extends Component {
+class SnackBar extends AnimatedComponent {
 
   SnackBar({
     String key,
     this.content,
-    this.actions
+    this.actions,
+    this.showing,
+    this.onHidden
   }) : super(key: key) {
     assert(content != null);
   }
 
-  final Widget content;
-  final List<SnackBarAction> actions;
+  Widget content;
+  List<SnackBarAction> actions;
+  bool showing;
+  Function onHidden;
+
+  void syncFields(SnackBar source) {
+    content = source.content;
+    actions = source.actions;
+    onHidden = source.onHidden;
+    if (showing != source.showing) {
+      showing = source.showing;
+      showing ? _show() : _hide();
+    }
+  }
+
+  AnimatedType<Point> _position;
+  AnimationPerformance _performance;
+
+  void initState() {
+    _position = new AnimatedType<Point>(new Point(0.0, 50.0), end: Point.origin);
+    _performance = new AnimationPerformance()
+      ..duration = _kSlideInDuration
+      ..variable = _position
+      ..addListener(_checkCompleted);
+    watch(_performance);
+    if (showing)
+      _show();
+  }
+
+  void _show() {
+    _performance.play();
+  }
+  void _hide() {
+    _performance.reverse();
+  }
+  void _checkCompleted() {
+    if (!_performance.isAnimating && _performance.isDismissed && onHidden != null) {
+      onHidden();
+    }
+  }
 
   Widget build() {
     List<Widget> children = [
@@ -54,15 +100,21 @@ class SnackBar extends Component {
         )
       )
     ]..addAll(actions);
-    return new Material(
-      level: 2,
-      color: const Color(0xFF323232),
-      type: MaterialType.canvas,
-      child: new Container(
-        margin: const EdgeDims.symmetric(horizontal: 24.0),
-        child: new DefaultTextStyle(
-          style: new TextStyle(color: Theme.of(this).accentColor),
-          child: new Flex(children)
+
+    Matrix4 transform = new Matrix4.identity();
+    transform.translate(_position.value.x, _position.value.y);
+    return new Transform(
+       transform: transform,
+       child: new Material(
+        level: 2,
+        color: const Color(0xFF323232),
+        type: MaterialType.canvas,
+        child: new Container(
+          margin: const EdgeDims.symmetric(horizontal: 24.0),
+          child: new DefaultTextStyle(
+            style: new TextStyle(color: Theme.of(this).accentColor),
+            child: new Flex(children)
+          )
         )
       )
     );