Flutter AnimatedWidget 实现动画的自动刷新

叁歲伎倆 2023-10-07 16:34 39阅读 0赞

> 在码农的世界里，优美的应用体验，来源于程序员对细节的处理以及自我要求的境界，年轻人也是忙忙碌碌的码农中一员，每天、每周，都会留下一些脚印，就是这些创作的内容，有一种执着，就是不知为什么，如果你迷茫，不妨来瞅瞅码农的轨迹。

如果你有兴趣 你可以关注一下公众号 biglead 来获取最新的学习资料。

*  [Flutter 从入门 到精通系列文章在这里][Flutter _]
 *  [当然也必需是要有源码的 在这里了][Link 1]
 *  [github 有点慢][github]
 *  [系列学习教程在这里][Link 2]

更多应用知识点，小编已总结在书中

*  [手机点击查看][Link 3]
 *  [电脑点击查看][Link 4]  
    ![请添加图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pep6LW355qE5bm06L275Lq6_size_20_color_FFFFFF_t_70_g_se_x_16]

在Flutter中, AnimatedWidget可以理解为动画Animation的辅助类，可以理解为创建一个Widget自带动画效果，也可以理解为使用Widget来封装复杂的组合的自定义动画实现，当然这个过程中是不需要 setState的。

本页面实现 Demo 效果如下

![在这里插入图片描述][20210613153924513.gif_pic_center]

程序入口

main() {
        
      runApp(MaterialApp(
        //不显示 debug标签
        debugShowCheckedModeBanner: false,
        //显示的首页面
        home: DemoStreamBuilder(),
      ));
    }

DemoStreamBuilder 主页面

class DemoAnimatedBuilder extends StatefulWidget {
        
      @override
      _DemoAnimatedBuilderState createState() => _DemoAnimatedBuilderState();
    }
    
    class _DemoAnimatedBuilderState extends State<DemoAnimatedBuilder>
        with SingleTickerProviderStateMixin {
        
      //动画控制器
      AnimationController _animationController;
    
      @override
      void initState() {
        
        super.initState();
        //0.0 - 1.0
        _animationController = new AnimationController(
            vsync: this, duration: Duration(milliseconds: 1800));
    
      }
    
      @override
      Widget build(BuildContext context) {
        
        //返回
        return Scaffold(
          //按钮
          floatingActionButton: FloatingActionButton(
            //小图标
            child: Icon(Icons.add),
            //点击事件
            onPressed: () {
        
              _animationController.reset();
              _animationController.forward();
            },
          ),
          appBar: AppBar(
            title: Text("Animated"),
          ),
          body: Container(
            padding: EdgeInsets.all(30),
            //线性布局
            child: Column(
              children: [
    
                TransformAnimated(
                  animation: _animationController,
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Text("测试数据"),
                      Text("测试数据"),
                      Text("测试数据"),
                    ],
                  ),
                ),
    
              ],
            ),
          ),
        );
      }
    }

自定义AnimatedWidget 的实现 TransformAnimated 如下

class TransformAnimated extends AnimatedWidget {
        
      Widget child;
    
      TransformAnimated({
        this.child, Animation animation})
          : super(listenable: animation);
    
      @override
      Widget build(BuildContext context) {
        
        //获取动画控制监听
        Animation<double> animation = listenable;
        //自定义
        return Container(
          color: Colors.grey[200],
          width: double.infinity,
          margin: EdgeInsets.only(
            left: 20,
            right: 20,
            top: 60 * animation.value / 2,
          ),
          height: 260,
          //向下平移
          child: Transform.translate(
            // 参数一 表示 在x轴方向的平移量
            // 参数二 表示 在y轴方向的平移量
            offset: Offset(0.0, 150 * animation.value),
            //执行动画的子Widet
            child: child,
          ),
        );
      }
    }

[Flutter _]: https://blog.csdn.net/zl18603543572/article/details/93532582
[Link 1]: https://gitee.com/android.long/flutter-ho/blob/279b5185f50a3379c71a74fc6c51b421f59c0354/lib/src/pages/demo/demo18/demo_DateRangPage.dart
[github]: https://github.com/zhaolongs
[Link 2]: https://study.163.com/instructor/1021406098.htm?_trace_c_p_k2_=09d88ef1f37645abadcc2b58620d4b00
[Link 3]: https://m.tb.cn/h.f6IsZcl?sm=b5555a
[Link 4]: https://detail.tmall.com/item.htm?id=658886049139
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pep6LW355qE5bm06L275Lq6_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/ed9ecf4aacc84e5cb17d5b486e431083.jpg?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5pep6LW355qE5bm06L275Lq6,size_20,color_FFFFFF,t_70,g_se,x_16
[20210613153924513.gif_pic_center]: https://img-blog.csdnimg.cn/20210613153924513.gif#pic_center