[移动开发] Flutter ColorTween实现颜色过渡动画效果

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 移动开发 -> Flutter ColorTween实现颜色过渡动画效果 -> 正文阅读

[移动开发]Flutter ColorTween实现颜色过渡动画效果

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

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

Flutter 用来快速开发 Android iOS平台应用，在Flutter 中，通过 ColorTween 来实现颜色过渡动画效果

在这里插入图片描述

程序入口

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,
        ),
      ),
    );
  }
}