Flutter ColorTween实现颜色过渡动画效果

忘是亡心i 2023-10-07 17:04 18阅读 0赞

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

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

*  [Flutter 从入门 到精通系列文章在这里][Flutter _]
 *  [当然也必需是要有源码的 在这里了][Link 1]
 *  [github 有点慢 不妨来看看码云的源码吧][github _]
 *  [系列学习教程在这里][Link 2]  
    更多Widget 的应用，小编已总结在书中
 *  [手机点击查看][Link 3]
 *  [电脑点击查看][Link 4]  
    ![请添加图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pep6LW355qE5bm06L275Lq6_size_20_color_FFFFFF_t_70_g_se_x_16]  
    Flutter 用来快速开发 Android iOS平台应用，在Flutter 中，通过 ColorTween 来实现颜色过渡动画效果

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

--------------------

##### 程序入口 #####

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

##### Demo 实例页面 #####

class DemoColorTweenPage extends StatefulWidget {
        
      @override
      _MyHomePageState createState() => _MyHomePageState();
    }
    
    class _MyHomePageState extends State<DemoColorTweenPage>
        with SingleTickerProviderStateMixin {
        
      late AnimationController _animationController;
      late Animation _animation;
    
      @override
      void initState() {
        
        // TODO: implement initState
        super.initState();
    
        //创建动画控制器
        _animationController = new AnimationController(
          vsync: this,
          duration: Duration(milliseconds: 1000),
        );
        //添加动画执行刷新监听
        _animationController.addListener(() {
        
          setState(() {
        });
        });
        //添加动画状态监听
        _animationController.addStatusListener((status) {
        
          //获取动画执行状态
          AnimationStatus status = _animationController.status;
    
          //动画正向执行完成状态
          if (status == AnimationStatus.completed) {
        
            //反向开启动画
            _animationController.reverse();
          } else if (status == AnimationStatus.dismissed) {
        
            //动画初始未执行或者是动画反向执行完成
    
            //正向开始执行动画
            _animationController.forward();
          }
        });
        //颜色动画变化
        _animation = ColorTween(begin: Colors.blue, end: Colors.red)
            .animate(_animationController);
    
        //添加到事件队列
        Future.delayed(Duration.zero, () {
        
          _animationController.forward();
        });
      }
    
      @override
      Widget build(BuildContext context) {
        
        return Scaffold(
          appBar: AppBar(title: Text("Tween")),
          body: Center(
            child: Container(
              width: 200,
              height: 200,
              color: _animation.value,
            ),
          ),
        );
      }
    }

[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
[fb889ddc5a0f4e31a46b1b5d1922bb8f.gif_pic_center]: https://img-blog.csdnimg.cn/fb889ddc5a0f4e31a46b1b5d1922bb8f.gif#pic_center