From 9d649acb89f8f91b9a38f02c9f3c5fb5eb4a2944 Mon Sep 17 00:00:00 2001 From: Matt Perry Date: Thu, 16 Jul 2015 17:23:29 -0700 Subject: [PATCH 01/12] no.Builder --- sky/sdk/example/stocks/lib/stock_home.dart | 41 ++++++++++++++++------ 1 file changed, 30 insertions(+), 11 deletions(-) diff --git a/sky/sdk/example/stocks/lib/stock_home.dart b/sky/sdk/example/stocks/lib/stock_home.dart index b7a314c160ac9..2e9ef6cdbb10d 100644 --- a/sky/sdk/example/stocks/lib/stock_home.dart +++ b/sky/sdk/example/stocks/lib/stock_home.dart @@ -25,6 +25,8 @@ import 'package:sky/widgets/tabs.dart'; import 'package:sky/widgets/theme.dart'; import 'package:sky/widgets/tool_bar.dart'; import 'package:sky/widgets/widget.dart'; +import 'package:vector_math/vector_math.dart'; +import 'package:sky/animation/curves.dart'; import 'stock_data.dart'; import 'stock_list.dart'; @@ -35,6 +37,19 @@ typedef void ModeUpdater(StockMode mode); const Duration _kSnackbarSlideDuration = const Duration(milliseconds: 200); +class AnimatedMatrix4 extends AnimatedType { + AnimatedMatrix4(Matrix4 begin, { Matrix4 end, Curve curve: linear }) + : super(begin, end: end, curve: curve); + + void setFraction(double t) { + if (t == 1.0) { + value = end; + return; + } + Vector3 trans = begin.getTranslation()*(1.0 - t) + end.getTranslation() * t; + value = new Matrix4.identity()..translate(trans); + } +} class StockHome extends AnimatedComponent { StockHome(this.navigator, this.stocks, this.stockMode, this.modeUpdater); @@ -54,7 +69,7 @@ class StockHome extends AnimatedComponent { bool _isSearching = false; String _searchQuery; - AnimationBuilder _snackbarTransform; + AnimatedType _snackbarPosition; void _handleSearchBegin() { navigator.pushState(this, (_) { @@ -263,15 +278,16 @@ class StockHome extends AnimatedComponent { void _handleUndo() { setState(() { - _snackbarTransform = null; + _snackbarPosition = null; }); } Widget buildSnackBar() { - if (_snackbarTransform == null) + if (_snackbarPosition == null) return null; - return _snackbarTransform.build( - new SnackBar( + return new Transform( + transform: _snackbarPosition.value, + child: new SnackBar( content: new Text("Stock purchased!"), actions: [new SnackBarAction(label: "UNDO", onPressed: _handleUndo)] )); @@ -279,10 +295,13 @@ class StockHome extends AnimatedComponent { void _handleStockPurchased() { setState(() { - _snackbarTransform = new AnimationBuilder() - ..position = new AnimatedType(const Point(0.0, 45.0), end: Point.origin); - var performance = _snackbarTransform.createPerformance( - [_snackbarTransform.position], duration: _kSnackbarSlideDuration); + Matrix4 offScreen = new Matrix4.identity(); + offScreen.translate(0.0, 45.0); + Matrix4 onScreen = new Matrix4.identity(); + _snackbarPosition = new AnimatedMatrix4(offScreen, end: onScreen); + var performance = new AnimationPerformance() + ..duration = _kSnackbarSlideDuration + ..variable = _snackbarPosition; watch(performance); performance.play(); }); @@ -294,8 +313,8 @@ class StockHome extends AnimatedComponent { backgroundColor: colors.RedAccent[200], onPressed: _handleStockPurchased ); - if (_snackbarTransform != null) - widget = _snackbarTransform.build(widget); + if (_snackbarPosition != null) + widget = new Transform(transform: _snackbarPosition.value, child: widget); return widget; } From 2e818b3d83b2ecdddc62300f90a3d6e6fc0dd0d7 Mon Sep 17 00:00:00 2001 From: Matt Perry Date: Fri, 17 Jul 2015 13:22:54 -0700 Subject: [PATCH 02/12] unwatch --- sky/sdk/example/stocks/lib/stock_home.dart | 2 +- sky/sdk/lib/widgets/animated_component.dart | 6 ++++++ 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/sky/sdk/example/stocks/lib/stock_home.dart b/sky/sdk/example/stocks/lib/stock_home.dart index 2e9ef6cdbb10d..45a21712fee39 100644 --- a/sky/sdk/example/stocks/lib/stock_home.dart +++ b/sky/sdk/example/stocks/lib/stock_home.dart @@ -303,7 +303,7 @@ class StockHome extends AnimatedComponent { ..duration = _kSnackbarSlideDuration ..variable = _snackbarPosition; watch(performance); - performance.play(); + performance.play().then((_) { unwatch(performance); }); }); } diff --git a/sky/sdk/lib/widgets/animated_component.dart b/sky/sdk/lib/widgets/animated_component.dart index 37e077f41f201..1ef4457611b3c 100644 --- a/sky/sdk/lib/widgets/animated_component.dart +++ b/sky/sdk/lib/widgets/animated_component.dart @@ -20,6 +20,12 @@ abstract class AnimatedComponent extends StatefulComponent { performance.addListener(scheduleBuild); } + void unwatch(AnimationPerformance performance) { + assert(_watchedPerformances.contains(performance)); + _watchedPerformances.remove(performance); + performance.removeListener(scheduleBuild); + } + void didMount() { for (AnimationPerformance performance in _watchedPerformances) performance.addListener(scheduleBuild); From 526bb3eaf038ad769e92fc9f5a1f21c7ac0a12d1 Mon Sep 17 00:00:00 2001 From: Matt Perry Date: Fri, 17 Jul 2015 13:27:12 -0700 Subject: [PATCH 03/12] shorten --- sky/sdk/example/stocks/lib/stock_home.dart | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/sky/sdk/example/stocks/lib/stock_home.dart b/sky/sdk/example/stocks/lib/stock_home.dart index 45a21712fee39..ebd5c760f3dca 100644 --- a/sky/sdk/example/stocks/lib/stock_home.dart +++ b/sky/sdk/example/stocks/lib/stock_home.dart @@ -295,8 +295,7 @@ class StockHome extends AnimatedComponent { void _handleStockPurchased() { setState(() { - Matrix4 offScreen = new Matrix4.identity(); - offScreen.translate(0.0, 45.0); + Matrix4 offScreen = new Matrix4.identity()..translate(0.0, 45.0); Matrix4 onScreen = new Matrix4.identity(); _snackbarPosition = new AnimatedMatrix4(offScreen, end: onScreen); var performance = new AnimationPerformance() From 72ee6180e3269a84c9ab4195097d09548db0c7ce Mon Sep 17 00:00:00 2001 From: Matt Perry Date: Fri, 17 Jul 2015 13:37:20 -0700 Subject: [PATCH 04/12] keep.performance --- sky/sdk/example/stocks/lib/stock_home.dart | 37 ++++++++++++++-------- 1 file changed, 23 insertions(+), 14 deletions(-) diff --git a/sky/sdk/example/stocks/lib/stock_home.dart b/sky/sdk/example/stocks/lib/stock_home.dart index ebd5c760f3dca..d4c77fa429830 100644 --- a/sky/sdk/example/stocks/lib/stock_home.dart +++ b/sky/sdk/example/stocks/lib/stock_home.dart @@ -59,6 +59,16 @@ class StockHome extends AnimatedComponent { StockMode stockMode; ModeUpdater modeUpdater; + void initState() { + Matrix4 offScreen = new Matrix4.identity()..translate(0.0, 45.0); + Matrix4 onScreen = new Matrix4.identity(); + _snackBarPosition = new AnimatedMatrix4(offScreen, end: onScreen); + _snackBarAnimation = new AnimationPerformance() + ..duration = _kSnackbarSlideDuration + ..variable = _snackBarPosition; + watch(_snackBarAnimation); + } + void syncFields(StockHome source) { navigator = source.navigator; stocks = source.stocks; @@ -69,7 +79,9 @@ class StockHome extends AnimatedComponent { bool _isSearching = false; String _searchQuery; - AnimatedType _snackbarPosition; + bool _isShowingSnackBar = false; + AnimatedMatrix4 _snackBarPosition; + AnimationPerformance _snackBarAnimation; void _handleSearchBegin() { navigator.pushState(this, (_) { @@ -278,15 +290,17 @@ class StockHome extends AnimatedComponent { void _handleUndo() { setState(() { - _snackbarPosition = null; + _snackBarAnimation.reverse().then((_) { + _isShowingSnackBar = false; +}); }); } Widget buildSnackBar() { - if (_snackbarPosition == null) + if (!_isShowingSnackBar) return null; return new Transform( - transform: _snackbarPosition.value, + transform: _snackBarPosition.value, child: new SnackBar( content: new Text("Stock purchased!"), actions: [new SnackBarAction(label: "UNDO", onPressed: _handleUndo)] @@ -295,14 +309,9 @@ class StockHome extends AnimatedComponent { void _handleStockPurchased() { setState(() { - Matrix4 offScreen = new Matrix4.identity()..translate(0.0, 45.0); - Matrix4 onScreen = new Matrix4.identity(); - _snackbarPosition = new AnimatedMatrix4(offScreen, end: onScreen); - var performance = new AnimationPerformance() - ..duration = _kSnackbarSlideDuration - ..variable = _snackbarPosition; - watch(performance); - performance.play().then((_) { unwatch(performance); }); + _isShowingSnackBar = true; + _snackBarAnimation.progress = 0.0; + _snackBarAnimation.play(); }); } @@ -312,8 +321,8 @@ class StockHome extends AnimatedComponent { backgroundColor: colors.RedAccent[200], onPressed: _handleStockPurchased ); - if (_snackbarPosition != null) - widget = new Transform(transform: _snackbarPosition.value, child: widget); + if (_isShowingSnackBar) + widget = new Transform(transform: _snackBarPosition.value, child: widget); return widget; } From 3994f51bd3048c0d98355e57a188afbfcaf01201 Mon Sep 17 00:00:00 2001 From: Matt Perry Date: Fri, 17 Jul 2015 15:55:11 -0700 Subject: [PATCH 05/12] snackbar.animates.self --- sky/sdk/example/stocks/lib/stock_home.dart | 52 +++------------------ sky/sdk/lib/widgets/snack_bar.dart | 53 +++++++++++++++++----- 2 files changed, 48 insertions(+), 57 deletions(-) diff --git a/sky/sdk/example/stocks/lib/stock_home.dart b/sky/sdk/example/stocks/lib/stock_home.dart index d4c77fa429830..b28064d38c292 100644 --- a/sky/sdk/example/stocks/lib/stock_home.dart +++ b/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'; @@ -25,8 +22,6 @@ import 'package:sky/widgets/tabs.dart'; import 'package:sky/widgets/theme.dart'; import 'package:sky/widgets/tool_bar.dart'; import 'package:sky/widgets/widget.dart'; -import 'package:vector_math/vector_math.dart'; -import 'package:sky/animation/curves.dart'; import 'stock_data.dart'; import 'stock_list.dart'; @@ -37,20 +32,7 @@ typedef void ModeUpdater(StockMode mode); const Duration _kSnackbarSlideDuration = const Duration(milliseconds: 200); -class AnimatedMatrix4 extends AnimatedType { - AnimatedMatrix4(Matrix4 begin, { Matrix4 end, Curve curve: linear }) - : super(begin, end: end, curve: curve); - - void setFraction(double t) { - if (t == 1.0) { - value = end; - return; - } - Vector3 trans = begin.getTranslation()*(1.0 - t) + end.getTranslation() * t; - value = new Matrix4.identity()..translate(trans); - } -} -class StockHome extends AnimatedComponent { +class StockHome extends StatefulComponent { StockHome(this.navigator, this.stocks, this.stockMode, this.modeUpdater); @@ -59,16 +41,6 @@ class StockHome extends AnimatedComponent { StockMode stockMode; ModeUpdater modeUpdater; - void initState() { - Matrix4 offScreen = new Matrix4.identity()..translate(0.0, 45.0); - Matrix4 onScreen = new Matrix4.identity(); - _snackBarPosition = new AnimatedMatrix4(offScreen, end: onScreen); - _snackBarAnimation = new AnimationPerformance() - ..duration = _kSnackbarSlideDuration - ..variable = _snackBarPosition; - watch(_snackBarAnimation); - } - void syncFields(StockHome source) { navigator = source.navigator; stocks = source.stocks; @@ -80,8 +52,6 @@ class StockHome extends AnimatedComponent { String _searchQuery; bool _isShowingSnackBar = false; - AnimatedMatrix4 _snackBarPosition; - AnimationPerformance _snackBarAnimation; void _handleSearchBegin() { navigator.pushState(this, (_) { @@ -166,6 +136,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, @@ -290,40 +261,31 @@ class StockHome extends AnimatedComponent { void _handleUndo() { setState(() { - _snackBarAnimation.reverse().then((_) { _isShowingSnackBar = false; -}); }); } Widget buildSnackBar() { if (!_isShowingSnackBar) return null; - return new Transform( - transform: _snackBarPosition.value, - child: new SnackBar( - content: new Text("Stock purchased!"), - actions: [new SnackBarAction(label: "UNDO", onPressed: _handleUndo)] - )); + return new SnackBar( + content: new Text("Stock purchased!"), + actions: [new SnackBarAction(label: "UNDO", onPressed: _handleUndo)] + ); } void _handleStockPurchased() { setState(() { _isShowingSnackBar = true; - _snackBarAnimation.progress = 0.0; - _snackBarAnimation.play(); }); } Widget buildFloatingActionButton() { - var widget = new FloatingActionButton( + return new FloatingActionButton( child: new Icon(type: 'content/add', size: 24), backgroundColor: colors.RedAccent[200], onPressed: _handleStockPurchased ); - if (_isShowingSnackBar) - widget = new Transform(transform: _snackBarPosition.value, child: widget); - return widget; } void addMenuToOverlays(List overlays) { diff --git a/sky/sdk/lib/widgets/snack_bar.dart b/sky/sdk/lib/widgets/snack_bar.dart index 074816db908d1..960429c97e9d4 100644 --- a/sky/sdk/lib/widgets/snack_bar.dart +++ b/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,7 +35,7 @@ class SnackBarAction extends Component { } } -class SnackBar extends Component { +class SnackBar extends AnimatedComponent { SnackBar({ String key, @@ -39,8 +45,25 @@ class SnackBar extends Component { assert(content != null); } - final Widget content; - final List actions; + Widget content; + List actions; + + void syncFields(SnackBar source) { + content = source.content; + actions = source.actions; + } + + AnimatedType _position; + AnimationPerformance _performance; + + void initState() { + _position = new AnimatedType(new Point(0.0, 48.0), end: Point.origin); + _performance = new AnimationPerformance() + ..duration = _kSlideInDuration + ..variable = _position; + watch(_performance); + _performance.play(); + } Widget build() { List children = [ @@ -54,15 +77,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) + ) ) ) ); From f5af66e4d52fe400c193e530f05e233364590511 Mon Sep 17 00:00:00 2001 From: Matt Perry Date: Fri, 17 Jul 2015 15:56:20 -0700 Subject: [PATCH 06/12] revert.unwatch --- sky/sdk/lib/widgets/animated_component.dart | 6 ------ 1 file changed, 6 deletions(-) diff --git a/sky/sdk/lib/widgets/animated_component.dart b/sky/sdk/lib/widgets/animated_component.dart index 1ef4457611b3c..37e077f41f201 100644 --- a/sky/sdk/lib/widgets/animated_component.dart +++ b/sky/sdk/lib/widgets/animated_component.dart @@ -20,12 +20,6 @@ abstract class AnimatedComponent extends StatefulComponent { performance.addListener(scheduleBuild); } - void unwatch(AnimationPerformance performance) { - assert(_watchedPerformances.contains(performance)); - _watchedPerformances.remove(performance); - performance.removeListener(scheduleBuild); - } - void didMount() { for (AnimationPerformance performance in _watchedPerformances) performance.addListener(scheduleBuild); From 04010c19a85a196fc6884986aa1f99cfb2a11247 Mon Sep 17 00:00:00 2001 From: Matt Perry Date: Fri, 17 Jul 2015 16:19:36 -0700 Subject: [PATCH 07/12] animates.on.hide --- sky/sdk/example/stocks/lib/stock_home.dart | 14 +++++++---- sky/sdk/lib/widgets/snack_bar.dart | 29 +++++++++++++++++++--- 2 files changed, 35 insertions(+), 8 deletions(-) diff --git a/sky/sdk/example/stocks/lib/stock_home.dart b/sky/sdk/example/stocks/lib/stock_home.dart index b28064d38c292..8a50995eca196 100644 --- a/sky/sdk/example/stocks/lib/stock_home.dart +++ b/sky/sdk/example/stocks/lib/stock_home.dart @@ -51,7 +51,8 @@ class StockHome extends StatefulComponent { bool _isSearching = false; String _searchQuery; - bool _isShowingSnackBar = false; + bool _isSnackBarLive = false; // Is it on screen at all (maybe dismissing)? + bool _isSnackBarShowing = false; // Should it be showing? void _handleSearchBegin() { navigator.pushState(this, (_) { @@ -261,22 +262,25 @@ class StockHome extends StatefulComponent { void _handleUndo() { setState(() { - _isShowingSnackBar = false; + _isSnackBarShowing = false; }); } Widget buildSnackBar() { - if (!_isShowingSnackBar) + if (!_isSnackBarLive) return null; return new SnackBar( + showing: _isSnackBarShowing, content: new Text("Stock purchased!"), - actions: [new SnackBarAction(label: "UNDO", onPressed: _handleUndo)] + actions: [new SnackBarAction(label: "UNDO", onPressed: _handleUndo)], + onHidden: () { setState(() { _isSnackBarLive = false; }); } ); } void _handleStockPurchased() { setState(() { - _isShowingSnackBar = true; + _isSnackBarShowing = true; + _isSnackBarLive = true; }); } diff --git a/sky/sdk/lib/widgets/snack_bar.dart b/sky/sdk/lib/widgets/snack_bar.dart index 960429c97e9d4..4ca676c53d3f7 100644 --- a/sky/sdk/lib/widgets/snack_bar.dart +++ b/sky/sdk/lib/widgets/snack_bar.dart @@ -40,30 +40,53 @@ class SnackBar extends AnimatedComponent { SnackBar({ String key, this.content, - this.actions + this.actions, + this.showing, + this.onHidden }) : super(key: key) { assert(content != null); } Widget content; List 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 _position; AnimationPerformance _performance; void initState() { - _position = new AnimatedType(new Point(0.0, 48.0), end: Point.origin); + _position = new AnimatedType(new Point(0.0, 50.0), end: Point.origin); _performance = new AnimationPerformance() ..duration = _kSlideInDuration - ..variable = _position; + ..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 children = [ From 327f19791f5d1c2dd8e77e2a3a57c920b865c06e Mon Sep 17 00:00:00 2001 From: Matt Perry Date: Fri, 17 Jul 2015 16:43:43 -0700 Subject: [PATCH 08/12] ANimatedContainer.doesnt.work --- sky/sdk/lib/widgets/animated_container.dart | 21 ++++++++- sky/sdk/lib/widgets/snack_bar.dart | 51 +++++---------------- 2 files changed, 31 insertions(+), 41 deletions(-) diff --git a/sky/sdk/lib/widgets/animated_container.dart b/sky/sdk/lib/widgets/animated_container.dart index 1898664e4622f..a95b491941b2c 100644 --- a/sky/sdk/lib/widgets/animated_container.dart +++ b/sky/sdk/lib/widgets/animated_container.dart @@ -34,6 +34,22 @@ class AnimatedBoxDecorationValue extends AnimatedType { } } + +class AnimatedMatrix4 extends AnimatedType { + AnimatedMatrix4(Matrix4 begin, { Matrix4 end, Curve curve: linear }) + : super(begin, end: end, curve: curve); + + void setFraction(double t) { + if (t == 1.0) { + value = end; + return; + } + // TODO(mpcomplete): lerp the whole matrix (can we just lerp each cell?). + Vector3 trans = begin.getTranslation()*(1.0 - t) + end.getTranslation() * t; + value = new Matrix4.identity()..translate(trans); + } +} + class AnimatedEdgeDimsValue extends AnimatedType { AnimatedEdgeDimsValue(EdgeDims begin, { EdgeDims end, Curve curve: linear }) : super(begin, end: end, curve: curve); @@ -116,6 +132,7 @@ class AnimatedContainer extends AnimatedComponent { decoration = source.decoration; margin = source.margin; padding = source.padding; + transform = source.transform; width = source.width; height = source.height; _updateFields(); @@ -167,8 +184,10 @@ class AnimatedContainer extends AnimatedComponent { } void _updateTransform() { + if (transform != null) + print("AC transform: $transform vs $_transform"); _updateField(transform, _transform, () { - _transform = new ImplicitlyAnimatedValue(new AnimatedType(transform), duration); + _transform = new ImplicitlyAnimatedValue(new AnimatedMatrix4(transform), duration); watch(_transform.performance); }); } diff --git a/sky/sdk/lib/widgets/snack_bar.dart b/sky/sdk/lib/widgets/snack_bar.dart index 4ca676c53d3f7..f4132284520e6 100644 --- a/sky/sdk/lib/widgets/snack_bar.dart +++ b/sky/sdk/lib/widgets/snack_bar.dart @@ -6,6 +6,7 @@ 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/animated_container.dart'; import 'package:sky/widgets/basic.dart'; import 'package:sky/widgets/default_text_style.dart'; import 'package:sky/widgets/material.dart'; @@ -35,7 +36,7 @@ class SnackBarAction extends Component { } } -class SnackBar extends AnimatedComponent { +class SnackBar extends Component { SnackBar({ String key, @@ -52,41 +53,8 @@ class SnackBar extends AnimatedComponent { 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 _position; - AnimationPerformance _performance; - - void initState() { - _position = new AnimatedType(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(); - } - } + Point get _position => + showing ? Point.origin : new Point(0.0, 50.0); Widget build() { List children = [ @@ -102,10 +70,13 @@ class SnackBar extends AnimatedComponent { ]..addAll(actions); Matrix4 transform = new Matrix4.identity(); - transform.translate(_position.value.x, _position.value.y); - return new Transform( - transform: transform, - child: new Material( + transform.translate(_position.x, _position.y); + print("transform: $_position"); + return new AnimatedContainer( + director: director, + transform: transform, + duration: _kSlideInDuration, + child: new Material( level: 2, color: const Color(0xFF323232), type: MaterialType.canvas, From 52ce955d8e9f68c1323f33de145100d5ecc8b92f Mon Sep 17 00:00:00 2001 From: Matt Perry Date: Fri, 17 Jul 2015 16:43:46 -0700 Subject: [PATCH 09/12] Revert "ANimatedContainer.doesnt.work" This reverts commit 327f19791f5d1c2dd8e77e2a3a57c920b865c06e. --- sky/sdk/lib/widgets/animated_container.dart | 21 +-------- sky/sdk/lib/widgets/snack_bar.dart | 51 ++++++++++++++++----- 2 files changed, 41 insertions(+), 31 deletions(-) diff --git a/sky/sdk/lib/widgets/animated_container.dart b/sky/sdk/lib/widgets/animated_container.dart index a95b491941b2c..1898664e4622f 100644 --- a/sky/sdk/lib/widgets/animated_container.dart +++ b/sky/sdk/lib/widgets/animated_container.dart @@ -34,22 +34,6 @@ class AnimatedBoxDecorationValue extends AnimatedType { } } - -class AnimatedMatrix4 extends AnimatedType { - AnimatedMatrix4(Matrix4 begin, { Matrix4 end, Curve curve: linear }) - : super(begin, end: end, curve: curve); - - void setFraction(double t) { - if (t == 1.0) { - value = end; - return; - } - // TODO(mpcomplete): lerp the whole matrix (can we just lerp each cell?). - Vector3 trans = begin.getTranslation()*(1.0 - t) + end.getTranslation() * t; - value = new Matrix4.identity()..translate(trans); - } -} - class AnimatedEdgeDimsValue extends AnimatedType { AnimatedEdgeDimsValue(EdgeDims begin, { EdgeDims end, Curve curve: linear }) : super(begin, end: end, curve: curve); @@ -132,7 +116,6 @@ class AnimatedContainer extends AnimatedComponent { decoration = source.decoration; margin = source.margin; padding = source.padding; - transform = source.transform; width = source.width; height = source.height; _updateFields(); @@ -184,10 +167,8 @@ class AnimatedContainer extends AnimatedComponent { } void _updateTransform() { - if (transform != null) - print("AC transform: $transform vs $_transform"); _updateField(transform, _transform, () { - _transform = new ImplicitlyAnimatedValue(new AnimatedMatrix4(transform), duration); + _transform = new ImplicitlyAnimatedValue(new AnimatedType(transform), duration); watch(_transform.performance); }); } diff --git a/sky/sdk/lib/widgets/snack_bar.dart b/sky/sdk/lib/widgets/snack_bar.dart index f4132284520e6..4ca676c53d3f7 100644 --- a/sky/sdk/lib/widgets/snack_bar.dart +++ b/sky/sdk/lib/widgets/snack_bar.dart @@ -6,7 +6,6 @@ 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/animated_container.dart'; import 'package:sky/widgets/basic.dart'; import 'package:sky/widgets/default_text_style.dart'; import 'package:sky/widgets/material.dart'; @@ -36,7 +35,7 @@ class SnackBarAction extends Component { } } -class SnackBar extends Component { +class SnackBar extends AnimatedComponent { SnackBar({ String key, @@ -53,8 +52,41 @@ class SnackBar extends Component { bool showing; Function onHidden; - Point get _position => - showing ? Point.origin : new Point(0.0, 50.0); + void syncFields(SnackBar source) { + content = source.content; + actions = source.actions; + onHidden = source.onHidden; + if (showing != source.showing) { + showing = source.showing; + showing ? _show() : _hide(); + } + } + + AnimatedType _position; + AnimationPerformance _performance; + + void initState() { + _position = new AnimatedType(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 children = [ @@ -70,13 +102,10 @@ class SnackBar extends Component { ]..addAll(actions); Matrix4 transform = new Matrix4.identity(); - transform.translate(_position.x, _position.y); - print("transform: $_position"); - return new AnimatedContainer( - director: director, - transform: transform, - duration: _kSlideInDuration, - child: new Material( + 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, From 8c35346a5d072e8faed941d1de2d2713d7d6df94 Mon Sep 17 00:00:00 2001 From: Matt Perry Date: Fri, 17 Jul 2015 16:47:08 -0700 Subject: [PATCH 10/12] rm.animation_builder --- sky/sdk/BUILD.gn | 1 - sky/sdk/lib/widgets/animation_builder.dart | 125 --------------------- sky/sdk/lib/widgets/drawer.dart | 1 - 3 files changed, 127 deletions(-) delete mode 100644 sky/sdk/lib/widgets/animation_builder.dart diff --git a/sky/sdk/BUILD.gn b/sky/sdk/BUILD.gn index 2577abfcc1bd5..ea77307a144b5 100644 --- a/sky/sdk/BUILD.gn +++ b/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", diff --git a/sky/sdk/lib/widgets/animation_builder.dart b/sky/sdk/lib/widgets/animation_builder.dart deleted file mode 100644 index 15cff58ad11b4..0000000000000 --- a/sky/sdk/lib/widgets/animation_builder.dart +++ /dev/null @@ -1,125 +0,0 @@ -// 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 'package:vector_math/vector_math.dart'; - -import 'package:sky/animation/animation_performance.dart'; -import 'package:sky/animation/curves.dart'; -import 'package:sky/base/lerp.dart'; -import 'package:sky/painting/box_painter.dart'; -import 'package:sky/theme/shadows.dart'; -import 'package:sky/widgets/basic.dart'; - -// This class builds a Container object from a collection of optionally- -// animated properties. Use syncFields to update the Container's properties, -// which will optionally animate them using an AnimationPerformance. -class AnimationBuilder { - - AnimationBuilder(); - - AnimatedType opacity; - AnimatedType position; - AnimatedType shadow; - AnimatedColor backgroundColor; - - // These don't animate, but are used to build the AnimationBuilder anyway. - double borderRadius; - Shape shape; - - Map _variableToPerformance = - new Map(); - - AnimationPerformance createPerformance(List variables, - { Duration duration }) { - AnimationPerformance performance = new AnimationPerformance() - ..duration = duration - ..variable = new AnimatedList(variables); - for (AnimatedVariable variable in variables) - _variableToPerformance[variable] = performance; - return performance; - } - - Widget build(Widget child) { - Widget current = child; - if (shadow != null || backgroundColor != null || - borderRadius != null || shape != null) { - current = new DecoratedBox( - decoration: new BoxDecoration( - borderRadius: borderRadius, - shape: shape, - boxShadow: shadow != null ? _computeShadow(shadow.value) : null, - backgroundColor: backgroundColor != null ? backgroundColor.value : null), - child: current); - } - - if (position != null) { - Matrix4 transform = new Matrix4.identity(); - transform.translate(position.value.x, position.value.y); - current = new Transform(transform: transform, child: current); - } - - if (opacity != null) { - current = new Opacity(opacity: opacity.value, child: current); - } - - return current; - } - - void updateFields({ - AnimatedType shadow, - AnimatedColor backgroundColor, - double borderRadius, - Shape shape - }) { - _updateField(this.shadow, shadow); - _updateField(this.backgroundColor, backgroundColor); - this.borderRadius = borderRadius; - this.shape = shape; - } - - void _updateField(AnimatedType variable, AnimatedType sourceVariable) { - if (variable == null) - return; // TODO(mpcomplete): Should we handle transition from null? - - AnimationPerformance performance = _variableToPerformance[variable]; - if (performance == null) { - // If there's no performance, no need to animate. - if (sourceVariable != null) - variable.value = sourceVariable.value; - return; - } - - if (variable.value != sourceVariable.value) { - variable - ..begin = variable.value - ..end = sourceVariable.value; - performance - ..progress = 0.0 - ..play(); - } - } -} - -class AnimatedColor extends AnimatedType { - AnimatedColor(Color begin, { Color end, Curve curve: linear }) - : super(begin, end: end, curve: curve); - - void setFraction(double t) { - value = lerpColor(begin, end, t); - } -} - -List _computeShadow(double level) { - if (level < 1.0) // shadows[1] is the first shadow - return null; - - int level1 = level.floor(); - int level2 = level.ceil(); - double t = level - level1.toDouble(); - - List shadow = new List(); - for (int i = 0; i < shadows[level1].length; ++i) - shadow.add(lerpBoxShadow(shadows[level1][i], shadows[level2][i], t)); - return shadow; -} diff --git a/sky/sdk/lib/widgets/drawer.dart b/sky/sdk/lib/widgets/drawer.dart index 60f3682e8263a..d33389e6dfe82 100644 --- a/sky/sdk/lib/widgets/drawer.dart +++ b/sky/sdk/lib/widgets/drawer.dart @@ -8,7 +8,6 @@ import 'package:sky/animation/animation_performance.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'; From f6db9de048c2ea37621405495adb813df63dc042 Mon Sep 17 00:00:00 2001 From: Matt Perry Date: Fri, 17 Jul 2015 16:52:58 -0700 Subject: [PATCH 11/12] fix compile --- sky/sdk/lib/widgets/drawer.dart | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/sky/sdk/lib/widgets/drawer.dart b/sky/sdk/lib/widgets/drawer.dart index d33389e6dfe82..d5370a3e89cee 100644 --- a/sky/sdk/lib/widgets/drawer.dart +++ b/sky/sdk/lib/widgets/drawer.dart @@ -5,6 +5,8 @@ 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'; @@ -43,6 +45,16 @@ enum DrawerStatus { typedef void DrawerStatusChangedCallback(DrawerStatus status); +// TODO(mpcomplete): find a better place for this. +class AnimatedColor extends AnimatedType { + 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, From 70181b26f47e02e4285396b541d4ae311b4508b1 Mon Sep 17 00:00:00 2001 From: Matt Perry Date: Fri, 17 Jul 2015 18:47:31 -0700 Subject: [PATCH 12/12] SnackBarStatus --- sky/sdk/example/stocks/lib/stock_home.dart | 8 +++--- sky/sdk/lib/widgets/snack_bar.dart | 29 ++++++++++++++++------ 2 files changed, 25 insertions(+), 12 deletions(-) diff --git a/sky/sdk/example/stocks/lib/stock_home.dart b/sky/sdk/example/stocks/lib/stock_home.dart index 8a50995eca196..a6a857e97da76 100644 --- a/sky/sdk/example/stocks/lib/stock_home.dart +++ b/sky/sdk/example/stocks/lib/stock_home.dart @@ -51,7 +51,7 @@ class StockHome extends StatefulComponent { bool _isSearching = false; String _searchQuery; - bool _isSnackBarLive = false; // Is it on screen at all (maybe dismissing)? + SnackBarStatus _snackBarStatus; bool _isSnackBarShowing = false; // Should it be showing? void _handleSearchBegin() { @@ -267,20 +267,20 @@ class StockHome extends StatefulComponent { } Widget buildSnackBar() { - if (!_isSnackBarLive) + if (_snackBarStatus == SnackBarStatus.inactive) return null; return new SnackBar( showing: _isSnackBarShowing, content: new Text("Stock purchased!"), actions: [new SnackBarAction(label: "UNDO", onPressed: _handleUndo)], - onHidden: () { setState(() { _isSnackBarLive = false; }); } + onStatusChanged: (status) { setState(() { _snackBarStatus = status; }); } ); } void _handleStockPurchased() { setState(() { _isSnackBarShowing = true; - _isSnackBarLive = true; + _snackBarStatus = SnackBarStatus.active; }); } diff --git a/sky/sdk/lib/widgets/snack_bar.dart b/sky/sdk/lib/widgets/snack_bar.dart index 4ca676c53d3f7..ada76ebca2248 100644 --- a/sky/sdk/lib/widgets/snack_bar.dart +++ b/sky/sdk/lib/widgets/snack_bar.dart @@ -13,6 +13,13 @@ import 'package:sky/widgets/theme.dart'; import 'package:vector_math/vector_math.dart'; +enum SnackBarStatus { + active, + inactive, +} + +typedef void SnackBarStatusChangedCallback(SnackBarStatus status); + const Duration _kSlideInDuration = const Duration(milliseconds: 200); class SnackBarAction extends Component { @@ -42,7 +49,7 @@ class SnackBar extends AnimatedComponent { this.content, this.actions, this.showing, - this.onHidden + this.onStatusChanged }) : super(key: key) { assert(content != null); } @@ -50,12 +57,12 @@ class SnackBar extends AnimatedComponent { Widget content; List actions; bool showing; - Function onHidden; + SnackBarStatusChangedCallback onStatusChanged; void syncFields(SnackBar source) { content = source.content; actions = source.actions; - onHidden = source.onHidden; + onStatusChanged = source.onStatusChanged; if (showing != source.showing) { showing = source.showing; showing ? _show() : _hide(); @@ -70,7 +77,7 @@ class SnackBar extends AnimatedComponent { _performance = new AnimationPerformance() ..duration = _kSlideInDuration ..variable = _position - ..addListener(_checkCompleted); + ..addListener(_checkStatusChanged); watch(_performance); if (showing) _show(); @@ -79,15 +86,21 @@ class SnackBar extends AnimatedComponent { void _show() { _performance.play(); } + void _hide() { _performance.reverse(); } - void _checkCompleted() { - if (!_performance.isAnimating && _performance.isDismissed && onHidden != null) { - onHidden(); - } + + SnackBarStatus _lastStatus; + void _checkStatusChanged() { + SnackBarStatus status = _status; + if (_lastStatus != null && status != _lastStatus && onStatusChanged != null) + onStatusChanged(status); + _lastStatus = status; } + SnackBarStatus get _status => _performance.isDismissed ? SnackBarStatus.inactive : SnackBarStatus.active; + Widget build() { List children = [ new Flexible(