Flutter：TweenAnimationBuilder自定义隐式动画

sunly_2024-11-21 11:37

1、修改组件的大小触发：自定义动画

js 复制代码

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、组件透明度变化触发：自定义动画

js 复制代码

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')),
 ],
),