github/flutter
7
0
Fork 0
mirror of https://github.com/flutter/flutter.git synced 2025-06-03 00:51:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

Port examples to the new animation API

Browse Source 
These now use Animation and AnimationController instead of PerformanceView and
Performance.
This commit is contained in:
Adam Barth 2016-01-19 15:41:15 -08:00
parent 477530f309
commit fc978c1aa8
6 changed files with 95 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
examples/material_gallery/lib/demo/page_selector_demo.dart
View File

@ -12,21 +12,21 @@ final List<String> _iconNames = <String>["event", "home", "android", "alarm", "f
class TabViewDemo extends StatelessComponent { class TabViewDemo extends StatelessComponent {
Widget _buildTabIndicator(BuildContext context, String iconName) { Widget _buildTabIndicator(BuildContext context, String iconName) {
final Color color = Theme.of(context).primaryColor; final Color color = Theme.of(context).primaryColor;
final AnimatedColorValue _selectedColor = new AnimatedColorValue(Colors.transparent, end: color, curve: Curves.ease); final ColorTween _selectedColor = new ColorTween(begin: Colors.transparent, end: color);
final AnimatedColorValue _previousColor = new AnimatedColorValue(color, end: Colors.transparent, curve: Curves.ease); final ColorTween _previousColor = new ColorTween(begin: color, end: Colors.transparent);
final TabBarSelectionState selection = TabBarSelection.of(context); final TabBarSelectionState selection = TabBarSelection.of(context);
return new BuilderTransition( Animation animation = new CurvedAnimation(parent: selection.animation, curve: Curves.ease);
performance: selection.performance, return new AnimationWatchingBuilder(
variables: <AnimatedColorValue>[_selectedColor, _previousColor], watchable: animation,
builder: (BuildContext context) { builder: (BuildContext context) {
Color background = selection.value == iconName ? _selectedColor.end : _selectedColor.begin; Color background = selection.value == iconName ? _selectedColor.end : _selectedColor.begin;
if (selection.valueIsChanging) { if (selection.valueIsChanging) {
// Then the selection's performance is animating from previousValue to value. // Then the selection's performance is animating from previousValue to value.
if (selection.value == iconName) if (selection.value == iconName)
background = _selectedColor.value; background = _selectedColor.evaluate(animation);
else if (selection.previousValue == iconName) else if (selection.previousValue == iconName)
background = _previousColor.value; background = _previousColor.evaluate(animation);
} }
return new Container( return new Container(
width: 12.0, width: 12.0,

2
examples/widgets/progress_indicator.dart
View File

@ -16,7 +16,7 @@ class _ProgressIndicatorAppState extends State<ProgressIndicatorApp> {
duration: const Duration(milliseconds: 1500) duration: const Duration(milliseconds: 1500)
)..play(AnimationDirection.forward); )..play(AnimationDirection.forward);
animation = new ACurve( animation = new CurvedAnimation(
parent: controller, parent: controller,
curve: new Interval(0.0, 0.9, curve: Curves.ease), curve: new Interval(0.0, 0.9, curve: Curves.ease),
reverseCurve: Curves.ease reverseCurve: Curves.ease

43
examples/widgets/smooth_resize.dart
View File

@ -26,29 +26,28 @@ class SmoothBlock extends StatefulComponent {
class CardTransition extends StatelessComponent { class CardTransition extends StatelessComponent {
CardTransition({ CardTransition({
this.child, this.child,
this.performance, this.animation,
this.x, this.x,
this.opacity, this.opacity,
this.scale this.scale
}); });
final Widget child; final Widget child;
final Performance performance; final Animation animation;
final AnimatedValue<double> x; final Evaluatable<double> x;
final AnimatedValue<double> opacity; final Evaluatable<double> opacity;
final AnimatedValue<double> scale; final Evaluatable<double> scale;
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new AnimationWatchingBuilder(
return new BuilderTransition( watchable: animation,
performance: performance,
variables: <AnimatedValue<double>>[x, opacity, scale],
builder: (BuildContext context) { builder: (BuildContext context) {
double currentScale = scale.evaluate(animation);
Matrix4 transform = new Matrix4.identity() Matrix4 transform = new Matrix4.identity()
..translate(x.value) ..translate(x.evaluate(animation))
..scale(scale.value, scale.value); ..scale(currentScale, currentScale);
return new Opacity( return new Opacity(
opacity: opacity.value, opacity: opacity.evaluate(animation),
child: new Transform( child: new Transform(
transform: transform, transform: transform,
child: child child: child
@ -63,22 +62,22 @@ class SmoothBlockState extends State<SmoothBlock> {
double _height = 100.0; double _height = 100.0;
Widget _handleEnter(PerformanceView performance, Widget child) { Widget _handleEnter(Animation animation, Widget child) {
return new CardTransition( return new CardTransition(
x: new AnimatedValue<double>(-200.0, end: 0.0, curve: Curves.ease), x: new Tween<double>(begin: -200.0, end: 0.0),
opacity: new AnimatedValue<double>(0.0, end: 1.0, curve: Curves.ease), opacity: new Tween<double>(begin: 0.0, end: 1.0),
scale: new AnimatedValue<double>(0.8, end: 1.0, curve: Curves.ease), scale: new Tween<double>(begin: 0.8, end: 1.0),
performance: performance, animation: new CurvedAnimation(parent: animation, curve: Curves.ease),
child: child child: child
); );
} }
Widget _handleExit(PerformanceView performance, Widget child) { Widget _handleExit(Animation animation, Widget child) {
return new CardTransition( return new CardTransition(
x: new AnimatedValue<double>(0.0, end: 200.0, curve: Curves.ease), x: new Tween<double>(begin: 0.0, end: 200.0),
opacity: new AnimatedValue<double>(1.0, end: 0.0, curve: Curves.ease), opacity: new Tween<double>(begin: 1.0, end: 0.0),
scale: new AnimatedValue<double>(1.0, end: 0.8, curve: Curves.ease), scale: new Tween<double>(begin: 1.0, end: 0.8),
performance: performance, animation: new CurvedAnimation(parent: animation, curve: Curves.ease),
child: child child: child
); );
} }

16
packages/flutter/lib/src/animation/tween.dart
View File

@ -92,7 +92,7 @@ abstract class ProxyWatchableMixin implements Watchable {
abstract class Evaluatable<T> { abstract class Evaluatable<T> {
const Evaluatable(); const Evaluatable();
T evaluate(double t); T evaluate(Animation animation);
WatchableValue<T> watch(Animation parent) { WatchableValue<T> watch(Animation parent) {
return new WatchableValue<T>(parent: parent, evaluatable: this); return new WatchableValue<T>(parent: parent, evaluatable: this);
@ -105,7 +105,7 @@ class WatchableValue<T> extends Watchable with ProxyWatchableMixin {
final Animation parent; final Animation parent;
final Evaluatable<T> evaluatable; final Evaluatable<T> evaluatable;
T get value => evaluatable.evaluate(parent.progress); T get value => evaluatable.evaluate(parent);
} }
abstract class Animation extends Watchable { abstract class Animation extends Watchable {
@ -261,9 +261,8 @@ class _RepeatingSimulation extends Simulation {
bool isDone(double timeInSeconds) => false; bool isDone(double timeInSeconds) => false;
} }
// TODO(abarth): Rename Curve to UnitTransform and ACurve to Curve. class CurvedAnimation extends Animation with ProxyWatchableMixin {
class ACurve extends Animation with ProxyWatchableMixin { CurvedAnimation({ this.parent, this.curve, this.reverseCurve }) {
ACurve({ this.parent, this.curve, this.reverseCurve }) {
assert(parent != null); assert(parent != null);
assert(curve != null); assert(curve != null);
parent.addStatusListener(_handleStatusChanged); parent.addStatusListener(_handleStatusChanged);
@ -317,9 +316,7 @@ class ACurve extends Animation with ProxyWatchableMixin {
} }
class Tween<T extends dynamic> extends Evaluatable<T> { class Tween<T extends dynamic> extends Evaluatable<T> {
Tween({ this.begin, this.end }) { Tween({ this.begin, this.end });
assert(begin != null);
}
/// The value this variable has at the beginning of the animation. /// The value this variable has at the beginning of the animation.
T begin; T begin;
@ -330,9 +327,10 @@ class Tween<T extends dynamic> extends Evaluatable<T> {
/// Returns the value this variable has at the given animation clock value. /// Returns the value this variable has at the given animation clock value.
T lerp(double t) => begin + (end - begin) * t; T lerp(double t) => begin + (end - begin) * t;
T evaluate(double t) { T evaluate(Animation animation) {
if (end == null) if (end == null)
return begin; return begin;
double t = animation.progress;
if (t == 0.0) if (t == 0.0)
return begin; return begin;
if (t == 1.0) if (t == 1.0)

87
packages/flutter/lib/src/material/tabs.dart
View File

@ -415,10 +415,10 @@ class TabBarSelection<T> extends StatefulComponent {
class TabBarSelectionState<T> extends State<TabBarSelection<T>> { class TabBarSelectionState<T> extends State<TabBarSelection<T>> {
PerformanceView get performance => _performance.view; Animation get animation => _controller.view;
// Both the TabBar and TabBarView classes access _performance because they // Both the TabBar and TabBarView classes access _performance because they
// alternately drive selection progress between tabs. // alternately drive selection progress between tabs.
final _performance = new Performance(duration: _kTabBarScroll, progress: 1.0); final AnimationController _controller = new AnimationController(duration: _kTabBarScroll, progress: 1.0);
final Map<T, int> _valueToIndex = new Map<T, int>(); final Map<T, int> _valueToIndex = new Map<T, int>();
void _initValueToIndex() { void _initValueToIndex() {
@ -442,7 +442,7 @@ class TabBarSelectionState<T> extends State<TabBarSelection<T>> {
} }
void dispose() { void dispose() {
_performance.stop(); _controller.stop();
PageStorage.of(context)?.writeState(context, _value); PageStorage.of(context)?.writeState(context, _value);
super.dispose(); super.dispose();
} }
@ -481,21 +481,21 @@ class TabBarSelectionState<T> extends State<TabBarSelection<T>> {
// the previous and current selection index. // the previous and current selection index.
double progress; double progress;
if (_performance.status == PerformanceStatus.completed) if (_controller.status == PerformanceStatus.completed)
progress = 0.0; progress = 0.0;
else if (_previousValue == values.first) else if (_previousValue == values.first)
progress = _performance.progress; progress = _controller.progress;
else if (_previousValue == values.last) else if (_previousValue == values.last)
progress = 1.0 - _performance.progress; progress = 1.0 - _controller.progress;
else if (previousIndex < index) else if (previousIndex < index)
progress = (_performance.progress - 0.5) * 2.0; progress = (_controller.progress - 0.5) * 2.0;
else else
progress = 1.0 - _performance.progress * 2.0; progress = 1.0 - _controller.progress * 2.0;
_performance _controller
..progress = progress ..progress = progress
..forward().then((_) { ..forward().then((_) {
if (_performance.progress == 1.0) { if (_controller.progress == 1.0) {
if (config.onChanged != null) if (config.onChanged != null)
config.onChanged(_value); config.onChanged(_value);
_valueIsChanging = false; _valueIsChanging = false;
@ -507,14 +507,14 @@ class TabBarSelectionState<T> extends State<TabBarSelection<T>> {
void registerPerformanceListener(TabBarSelectionPerformanceListener listener) { void registerPerformanceListener(TabBarSelectionPerformanceListener listener) {
_performanceListeners.add(listener); _performanceListeners.add(listener);
_performance _controller
..addStatusListener(listener.handleStatusChange) ..addStatusListener(listener.handleStatusChange)
..addListener(listener.handleProgressChange); ..addListener(listener.handleProgressChange);
} }
void unregisterPerformanceListener(TabBarSelectionPerformanceListener listener) { void unregisterPerformanceListener(TabBarSelectionPerformanceListener listener) {
_performanceListeners.remove(listener); _performanceListeners.remove(listener);
_performance _controller
..removeStatusListener(listener.handleStatusChange) ..removeStatusListener(listener.handleStatusChange)
..removeListener(listener.handleProgressChange); ..removeListener(listener.handleProgressChange);
} }
@ -590,17 +590,11 @@ class _TabBarState<T> extends ScrollableState<TabBar<T>> implements TabBarSelect
if (_valueIsChanging && status == PerformanceStatus.completed) { if (_valueIsChanging && status == PerformanceStatus.completed) {
_valueIsChanging = false; _valueIsChanging = false;
double progress = 0.5; _indicatorTween
if (_selection.index == 0) ..begin = _tabIndicatorRect(math.max(0, _selection.index - 1))
progress = 0.0; ..end = _tabIndicatorRect(math.min(config.labels.length - 1, _selection.index + 1));
else if (_selection.index == config.labels.length - 1)
progress = 1.0;
setState(() { setState(() {
_indicatorRect _indicatorRect = _tabIndicatorRect(_selection.index);
..begin = _tabIndicatorRect(math.max(0, _selection.index - 1))
..end = _tabIndicatorRect(math.min(config.labels.length - 1, _selection.index + 1))
..curve = null
..setProgress(progress, AnimationDirection.forward);
}); });
} }
} }
@ -612,23 +606,32 @@ class _TabBarState<T> extends ScrollableState<TabBar<T>> implements TabBarSelect
if (!_valueIsChanging && _selection.valueIsChanging) { if (!_valueIsChanging && _selection.valueIsChanging) {
if (config.isScrollable) if (config.isScrollable)
scrollTo(_centeredTabScrollOffset(_selection.index), duration: _kTabBarScroll); scrollTo(_centeredTabScrollOffset(_selection.index), duration: _kTabBarScroll);
_indicatorRect _indicatorTween
..begin = _indicatorRect.value ?? _tabIndicatorRect(_selection.previousIndex) ..begin = _indicatorRect ?? _tabIndicatorRect(_selection.previousIndex)
..end = _tabIndicatorRect(_selection.index) ..end = _tabIndicatorRect(_selection.index);
..curve = Curves.ease;
_valueIsChanging = true; _valueIsChanging = true;
} }
Rect oldRect = _indicatorRect.value; Rect oldRect = _indicatorRect;
_indicatorRect.setProgress(_selection.performance.progress, AnimationDirection.forward); double t = _selection.animation.progress;
Rect newRect = _indicatorRect.value; if (_valueIsChanging) {
if (oldRect != newRect) // When _valueIsChanging is true, we're animating based on a ticker and
// want to curve the animation. When _valueIsChanging is false, we're
// animating based on a pointer event and want linear feedback. It's
// possible we should move this curve into the selection animation.
t = Curves.ease.transform(t);
}
// TODO(abarth): If we've never gone through handleStatusChange before, we
// might not have set up our _indicatorTween yet.
_indicatorRect = _indicatorTween.lerp(t);
if (oldRect != _indicatorRect)
setState(() { }); setState(() { });
} }
Size _viewportSize = Size.zero; Size _viewportSize = Size.zero;
Size _tabBarSize; Size _tabBarSize;
List<double> _tabWidths; List<double> _tabWidths;
AnimatedRectValue _indicatorRect = new AnimatedRectValue(null); Rect _indicatorRect;
RectTween _indicatorTween = new RectTween();
Rect _tabRect(int tabIndex) { Rect _tabRect(int tabIndex) {
assert(_tabBarSize != null); assert(_tabBarSize != null);
@ -673,9 +676,9 @@ class _TabBarState<T> extends ScrollableState<TabBar<T>> implements TabBarSelect
labelColor = isSelectedTab ? selectedColor : color; labelColor = isSelectedTab ? selectedColor : color;
if (_selection.valueIsChanging) { if (_selection.valueIsChanging) {
if (isSelectedTab) if (isSelectedTab)
labelColor = Color.lerp(color, selectedColor, _selection.performance.progress); labelColor = Color.lerp(color, selectedColor, _selection.animation.progress);
else if (isPreviouslySelectedTab) else if (isPreviouslySelectedTab)
labelColor = Color.lerp(selectedColor, color, _selection.performance.progress); labelColor = Color.lerp(selectedColor, color, _selection.animation.progress);
} }
} }
return new _Tab( return new _Tab(
@ -749,7 +752,7 @@ class _TabBarState<T> extends ScrollableState<TabBar<T>> implements TabBarSelect
children: tabs, children: tabs,
selectedIndex: _selection?.index, selectedIndex: _selection?.index,
indicatorColor: indicatorColor, indicatorColor: indicatorColor,
indicatorRect: _indicatorRect.value, indicatorRect: _indicatorRect,
textAndIcons: textAndIcons, textAndIcons: textAndIcons,
isScrollable: config.isScrollable, isScrollable: config.isScrollable,
onLayoutChanged: _layoutChanged onLayoutChanged: _layoutChanged
@ -873,14 +876,14 @@ class _TabBarViewState extends PageableListState<TabBarView> implements TabBarSe
return; return;
// The TabBar is driving the TabBarSelection performance. // The TabBar is driving the TabBarSelection performance.
final Performance performance = _selection.performance; final Animation animation = _selection.animation;
if (performance.status == PerformanceStatus.completed) { if (animation.status == PerformanceStatus.completed) {
_updateItemsAndScrollBehavior(); _updateItemsAndScrollBehavior();
return; return;
} }
if (performance.status != PerformanceStatus.forward) if (animation.status != PerformanceStatus.forward)
return; return;
final int selectedIndex = _selection.index; final int selectedIndex = _selection.index;
@ -895,9 +898,9 @@ class _TabBarViewState extends PageableListState<TabBarView> implements TabBarSe
} }
if (_scrollDirection == AnimationDirection.forward) if (_scrollDirection == AnimationDirection.forward)
scrollTo(performance.progress); scrollTo(animation.progress);
else else
scrollTo(1.0 - performance.progress); scrollTo(1.0 - animation.progress);
} }
void dispatchOnScroll() { void dispatchOnScroll() {
@ -905,12 +908,12 @@ class _TabBarViewState extends PageableListState<TabBarView> implements TabBarSe
return; return;
// This class is driving the TabBarSelection's performance. // This class is driving the TabBarSelection's performance.
final Performance performance = _selection._performance; final AnimationController controller = _selection._controller;
if (_selection.index == 0 || _selection.index == _tabCount - 1) if (_selection.index == 0 || _selection.index == _tabCount - 1)
performance.progress = scrollOffset; controller.progress = scrollOffset;
else else
performance.progress = scrollOffset / 2.0; controller.progress = scrollOffset / 2.0;
} }
Future fling(Offset scrollVelocity) { Future fling(Offset scrollVelocity) {

28
packages/flutter/lib/src/widgets/enter_exit_transition.dart
View File

@ -70,30 +70,30 @@ class _SmoothlyResizingOverflowBoxState extends State<SmoothlyResizingOverflowBo
class _Entry { class _Entry {
_Entry({ _Entry({
this.child, this.child,
this.enterPerformance, this.enterController,
this.enterTransition this.enterTransition
}); });
final Widget child; final Widget child;
final Performance enterPerformance; final AnimationController enterController;
final Widget enterTransition; final Widget enterTransition;
Size childSize = Size.zero; Size childSize = Size.zero;
Performance exitPerformance; AnimationController exitController;
Widget exitTransition; Widget exitTransition;
Widget get currentTransition => exitTransition ?? enterTransition; Widget get currentTransition => exitTransition ?? enterTransition;
void dispose() { void dispose() {
enterPerformance?.stop(); enterController?.stop();
exitPerformance?.stop(); exitController?.stop();
} }
} }
typedef Widget TransitionBuilderCallback(PerformanceView performance, Widget child); typedef Widget TransitionBuilderCallback(Animation animation, Widget child);
Widget _identityTransition(PerformanceView performance, Widget child) => child; Widget _identityTransition(Animation animation, Widget child) => child;
class EnterExitTransition extends StatefulComponent { class EnterExitTransition extends StatefulComponent {
EnterExitTransition({ EnterExitTransition({
@ -129,11 +129,11 @@ class _EnterExitTransitionState extends State<EnterExitTransition> {
} }
_Entry _createEnterTransition() { _Entry _createEnterTransition() {
Performance enterPerformance = new Performance(duration: config.duration)..play(); AnimationController enterController = new AnimationController(duration: config.duration)..forward();
return new _Entry( return new _Entry(
child: config.child, child: config.child,
enterPerformance: enterPerformance, enterController: enterController,
enterTransition: config.onEnter(enterPerformance, new KeyedSubtree( enterTransition: config.onEnter(enterController, new KeyedSubtree(
key: new GlobalKey(), key: new GlobalKey(),
child: config.child child: config.child
)) ))
@ -141,11 +141,11 @@ class _EnterExitTransitionState extends State<EnterExitTransition> {
} }
Future _createExitTransition(_Entry entry) async { Future _createExitTransition(_Entry entry) async {
Performance exitPerformance = new Performance(duration: config.duration); AnimationController exitController = new AnimationController(duration: config.duration);
entry entry
..exitPerformance = exitPerformance ..exitController = exitController
..exitTransition = config.onExit(exitPerformance, entry.enterTransition); ..exitTransition = config.onExit(exitController, entry.enterTransition);
await exitPerformance.play(); await exitController.forward();
if (!mounted) if (!mounted)
return; return;
setState(() { setState(() {