Use AnimatedContainer for card_collection.dart.

sky/sdk/example/widgets/card_collection.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:sky' as sky;
 
 import 'package:vector_math/vector_math.dart';
 import 'package:sky/animation/animation_performance.dart';
 import 'package:sky/base/lerp.dart';
 import 'package:sky/painting/text_style.dart';
 import 'package:sky/theme/colors.dart';
+import 'package:sky/widgets/animated_container.dart';
 import 'package:sky/widgets/basic.dart';
 import 'package:sky/widgets/card.dart';
 import 'package:sky/widgets/scaffold.dart';
 import 'package:sky/widgets/theme.dart';
 import 'package:sky/widgets/tool_bar.dart';
 import 'package:sky/widgets/widget.dart';
 
 
 const int _kCardDismissFadeoutMS = 300;
 const double _kMinCardFlingVelocity = 0.4;
 const double _kDismissCardThreshold = 0.70;
 
 class CardCollectionApp extends App {
 
   final TextStyle cardLabelStyle =
     new TextStyle(color: White, fontSize: 18.0, fontWeight: bold);
 
   CardCollectionApp() {
-    _activeCardAnimation = new AnimationPerformance()
-      ..variable = new AnimatedType(0.0, 1.0)
-      ..duration = new Duration(milliseconds: _kCardDismissFadeoutMS)
-      ..addListener(_handleAnimationProgressChanged);
+    _activeCardTransform = new AnimatedContainer()
+      ..position = new AnimatedType<Point>(Point.origin)
+      ..opacity = new AnimatedType<double>(1.0, end: 0.0);
+    _activeCardAnimation = _activeCardTransform.createPerformance(
+        [_activeCardTransform.position, _activeCardTransform.opacity],
+        duration: new Duration(milliseconds: _kCardDismissFadeoutMS));
+    _activeCardAnimation.addListener(_handleAnimationProgressChanged);
   }
 
   int _activeCardIndex = -1;
+  AnimatedContainer _activeCardTransform;
   AnimationPerformance _activeCardAnimation;
   double _activeCardWidth;
   double _activeCardDragX = 0.0;
   bool _activeCardDragUnderway = false;
   Set<int> _dismissedCardIndices = new Set<int>();
 
-  double get _activeCardOpacity => 1.0 - _activeCardAnimation.progress;
-
-  double get _activeCardOffset {
-    return _activeCardAnimation.progress * _activeCardDragX.sign * _activeCardWidth * _kDismissCardThreshold;
+  Point get _activeCardDragEndPoint {
+    return new Point(_activeCardDragX.sign * _activeCardWidth * _kDismissCardThreshold, 0.0);
   }
 
   void _handleAnimationProgressChanged() {
     setState(() {
       if (_activeCardAnimation.isCompleted && !_activeCardDragUnderway)
         _dismissedCardIndices.add(_activeCardIndex);
     });
   }
 
   void _handleSizeChanged(Size newSize) {
     _activeCardWidth = newSize.width;
+    _activeCardTransform.position.end = _activeCardDragEndPoint;
   }
 
   void _handlePointerDown(sky.PointerEvent event, int cardIndex) {
     setState(() {
       _activeCardIndex = cardIndex;
       _activeCardDragUnderway = true;
       _activeCardDragX = 0.0;
       _activeCardAnimation.progress = 0.0;
     });
   }
 
   void _handlePointerMove(sky.PointerEvent event) {
     if (_activeCardWidth == null || _activeCardIndex < 0)
       return;
 
+    double oldDragX = _activeCardDragX;
     _activeCardDragX += event.dx;
     setState(() {
-      if (!_activeCardAnimation.isAnimating)
+      if (!_activeCardAnimation.isAnimating) {
+        if (oldDragX.sign != _activeCardDragX.sign)
+          _activeCardTransform.position.end = _activeCardDragEndPoint;
         _activeCardAnimation.progress = _activeCardDragX.abs() / (_activeCardWidth * _kDismissCardThreshold);
+      }
     });
   }
 
   void _handlePointerUpOrCancel(_) {
     if (_activeCardWidth == null || _activeCardIndex < 0)
       return;
 
     setState(() {
       _activeCardDragUnderway = false;
       if (_activeCardAnimation.isCompleted)
@@ skipping 23 matching lines @@
     Widget label = new Center(child: new Text("Item ${index}", style: cardLabelStyle));
     Widget card = new Card(
       child: new Padding(child: label, padding: const EdgeDims.all(8.0)),
       color: color
     );
 
     // TODO(hansmuller) The code below changes the card's widget tree when
     // the user starts dragging it. Currently this causes Sky to drop the
     // rest of the pointer gesture, see https://github.com/domokit/mojo/issues/312.
     // As a workaround, always create the Transform and Opacity nodes.
-    /*
     if (index == _activeCardIndex) {
-      Matrix4 transform = new Matrix4.identity();
-      transform.translate(_activeCardOffset, 0.0);
-      card = new Transform(child: card, transform: transform);
-      if (_activeCardAnimation != null)
-        card = new Opacity(child: card, opacity: _activeCardOpacity);
+      card = _activeCardTransform.build(card);
+    } else {
+      card = new Transform(child: card, transform: new Matrix4.identity());
+      card = new Opacity(child: card, opacity: 1.0);

[abarth-chromium, 2015/07/09 23:20:13]

It's lame that we need to do this by hand.  Maybe _activeCardTransform should
have a buildInitial() that builds the widget structure but with the |begin|
values of all the variables?

[Matt Perry, 2015/07/09 23:25:50]

This is just a hacky workaround until https://github.com/domokit/mojo/issues/312
is fixed. I'm not sure we need a buildInitial for anything else yet.

     }
-    */
-    Matrix4 transform = new Matrix4.identity();
-    double opacity = 1.0;
-    if (index == _activeCardIndex) {
-      transform.translate(_activeCardOffset, 0.0);
-      opacity = _activeCardOpacity;
-    }
-    card = new Transform(
-      child: new Opacity(child: card, opacity: opacity),
-      transform: transform);
 
     return new Listener(
       child: card,
       onPointerDown: (event) { _handlePointerDown(event, index); },
       onPointerMove: _handlePointerMove,
       onPointerUp: _handlePointerUpOrCancel,
       onPointerCancel: _handlePointerUpOrCancel,
       onGestureFlingStart: _handleFlingStart
     );
   }
@@ skipping 23 matching lines @@
       body: _buildCardCollection(
           [48.0, 64.0, 82.0, 46.0, 60.0, 55.0, 84.0, 96.0, 50.0,
            48.0, 64.0, 82.0, 46.0, 60.0, 55.0, 84.0, 96.0, 50.0])
     );
   }
 }
 
 void main() {
   runApp(new CardCollectionApp());
 }