
微信交流群
# TweenAnimationBuilder
开发App中有时需要一个简单的动画,可以通过AnimationController实现,但比较麻烦,有没有一个内置的隐式动画组件来解决这个问题?TweenAnimationBuilder可以满足你对所有自定义动画的需求,而不用关系AnimationController。
TweenAnimationBuilder用法比较简单,首先需要一个动画时长参数:
TweenAnimationBuilder<double>(
duration: Duration(seconds: 2),
)
1
2
3
2
3
然后添加一个builder方法,用法如下:
builder: (context, value, child) {
return Container(
height: value,
width: value,
child: child,
);
}
1
2
3
4
5
6
7
2
3
4
5
6
7
builder方法有3个参数,第一个是BuildContext,第二个value的类型取决于你要做动画的数据,比如:
TweenAnimationBuilder<double>(
builder: (context, value, child) {
}
)
1
2
3
4
2
3
4
value的类型就是double,如果是TweenAnimationBuilder<Color>
,value的类型就是Color。
第三个就是TweenAnimationBuilder的子组件,用于优化。
设置tween(动画的值),比如需要一个100到200的差值,设置如下:
tween: Tween<double>(begin: 100.0, end: 200),
1
如果需要颜色值使用ColorTween
,这样我们的动画组件就可以动起来了。
我们也可以设置动画曲线,设置如下:
TweenAnimationBuilder<double>(
curve: Curves.bounceIn,
)
1
2
3
2
3
通过onEnd监听动画完成通知,用法如下:
TweenAnimationBuilder<double>(
onEnd: () {}
)
1
2
3
2
3
下面写一个图片不断放大变小的demo:
double _value = 200;
@override
Widget build(BuildContext context) {
return Center(
child: TweenAnimationBuilder<double>(
tween: Tween<double>(begin: 100.0, end: _value),
duration: Duration(seconds: 2),
curve: Curves.bounceIn,
builder: (context, value, child) {
return Container(
height: value,
width: value,
child: child,
);
},
onEnd: () {
setState(() {
_value = _value == 200 ? 250 : 200;
});
},
child: Image.network(
'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg',
fit: BoxFit.fill,
),
));
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
效果如下:
版权所有,禁止私自转发、克隆网站。