Flutter开发之——动画-同时执行多个Tween动画

最新推荐文章于 2024-03-23 16:44:33 发布

PGzxc

最新推荐文章于 2024-03-23 16:44:33 发布

阅读量2.2k

点赞数

分类专栏： Flutter 文章标签： flutter tween

本文链接：https://blog.csdn.net/Calvin_zhou/article/details/116272525

版权

Flutter 专栏收录该内容

122 篇文章 45 订阅

订阅专栏

本文详细介绍了在Flutter中如何使用AnimationController、Tween和Curve来创建动画效果。通过实例代码展示了如何初始化两个AnimationController，分别用于控制尺寸和颜色的变化，并应用不同的曲线实现平滑和弹跳的过渡。点击触发动画，Container的高度和颜色会根据设定的动画参数动态变化。

摘要由CSDN通过智能技术生成

一概述

一个AnimationController ，只需要一个SingleTickerProviderStateMixin
需要有多个AnimationController 时，需要修改为TickerProviderStateMixin

二 AnimationController 、 Tween 、Curve

2.1 AnimationController 、 Tween

AnimationController调用Tween

_animation = _controller.drive(Tween(begin: 100.0, end: 200.0)

Tween调用AnimationController

  _animation = Tween(begin: 100.0, end: 200.0).animate(_controller);

2.2 加入Curve后

AnimationController调用Tween

_animation = _controller.drive(CurveTween(curve: Curves.linear)).drive(Tween(begin: 100.0, end: 200.0)

Tween调用AnimationController

_animation = Tween(begin: 100.0, end: 200.0)
    .chain(CurveTween(curve: Curves.linear))
    .animate(_controller);

三示例

3.1 代码

  class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin
  
  AnimationController _sizeController;
  AnimationController _colorController;
  Animation<double> _sizeAnimation;
  Animation<Color> _colorAnimation;
  
   @override
  void initState() {
    super.initState();

    _sizeController =
    AnimationController(vsync: this, duration: Duration(milliseconds: 2000))
      ..addListener(() {
        setState(() {});
      });

    _sizeAnimation = _sizeController
        .drive(CurveTween(curve: Curves.linear))
        .drive(Tween(begin: 100.0, end: 200.0));

    _colorController =
    AnimationController(vsync: this, duration: Duration(milliseconds: 1000))
      ..addListener(() {
        setState(() {});
      });

    _colorAnimation = _colorController
        .drive(CurveTween(curve: Curves.bounceIn))
        .drive(ColorTween(begin: Colors.blue, end: Colors.red));
  } 
  
 Center(
          child: GestureDetector(
            onTap: () {
              _sizeController.forward();
              _colorController.forward();
            },
            child: Container(
              height: _sizeAnimation.value,
              width: _sizeAnimation.value,
              color: _colorAnimation.value,
              alignment: Alignment.center,
              child: Text('点我开始动画',),
            ),
          ),
        )