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

Posted 2021-09-19 早起的年轻人

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

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

• Flutter 从入门 到精通系列文章在这里
• 当然也必需是要有源码的 在这里了
• github 有点慢 不妨来看看码云的源码吧
• 系列学习教程在这里

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