Flutter:TweenAnimationBuilder自定义隐式动画
1、修改组件的大小触发:自定义动画
class _MyHomePageState extends State<MyHomePage>{
bool flag = true;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('标题'),
),
body: Column(
children: [
Container(
child: TweenAnimationBuilder(
// 当改变Tween的end参数时,Icon就会触发动画,size接收double类型begin和end要加.0
tween: Tween(begin: 60.0,end: flag ? 100.0 : 200.0),
duration: const Duration(milliseconds: 500),
builder: ((context,value,child){
// 当更改flag时,会把end的值,赋值给value,Icon就会执行这个动画
// size接收double类型,但是value是Object类型,需要用 as double 转换一下
return Icon(Icons.star,size: value as double);
})
),
),
ElevatedButton(onPressed: (){
setState(() {
flag = !flag;
});
}, child: const Text('修改Icon大小')),
],
),
);
}
}
2、组件透明度变化触发:自定义动画
body: Column(
children: [
Container(
child: TweenAnimationBuilder(
// 当改变Tween的end参数时,就会触发动画
tween: Tween(begin: 1.0,end: flag ? 1.0 : 0.0),
duration: const Duration(milliseconds: 500),
builder: ((context,value,child){
return Opacity(
opacity: value as double,
child: Container(
width: 200,
height: 200,
color: Colors.red,
),
);
}),
),
),
ElevatedButton(onPressed: (){
setState(() {
flag = !flag;
});
}, child: const Text('修改Opacity')),
],
),