看到这个标题的时候,有没有同学想到了一篇文章:Flutter | 求求你们了,切换 Widget 的时候加上动画吧![1]
是否想起了那个组件:AnimatedSwitcher
?
这两个控件有相似的地方,也有不同的地方。
但是这篇并不打算说出来他俩有什么不同,主要来讲解 AnimatedCrossFade
该组件使用的方式和大致可以使用的场景。
😮 先来了解一下 AnimatedCrossFade
1. 首先看一下官方介绍
A widget that cross-fades between two given children and animates itself between their sizes.
在两个子 Widget 之间交叉淡入并在其大小之间设置动画的小部件。
其中「交叉淡入」其实是电影中的术语,意思就是由一个要素进入另一个要素。
也就是「由一个 Widget 进入另一个 Widget」。
2. 再来看一下构造函数
const AnimatedCrossFade({
Key key,
@required this.firstChild,
@required this.secondChild,
this.firstCurve = Curves.linear,
this.secondCurve = Curves.linear,
this.sizeCurve = Curves.linear,
this.alignment = Alignment.topCenter,
@required this.crossFadeState,
@required this.duration,
this.reverseDuration,
this.layoutBuilder = defaultLayoutBuilder,
}) : assert(firstChild != null),
assert(secondChild != null),
assert(firstCurve != null),
assert(secondCurve != null),
assert(sizeCurve != null),
assert(alignment != null),
assert(crossFadeState != null),
assert(duration != null),
assert(layoutBuilder != null),
super(key: key);
可以看到必要的参数有四个: