当前位置： 移动技术网 > 移动技术>移动开发>Android > 《Flutter 动画系列》组合动画

《Flutter 动画系列》组合动画

2020年04月06日  | 移动技术网移动技术  | 我要评论

老孟导读：在前面的文章中介绍了

《flutter 动画系列》25种动画组件超全总结

《flutter 动画系列》google工程师带你选择flutter动画控件：

在项目中动画效果很多时候是几种动画的组合，比如颜色、大小、位移等属性同时变化或者顺序变化，这篇文章讲解如何实现组合动画

flutter中组合动画使用interval，interval继承自curve，用法如下：

animation _sizeanimation = tween(begin: 100.0, end: 300.0).animate(curvedanimation(
    parent: _animationcontroller, curve: interval(0.5, 1.0)));

表示_sizeanimation动画从0.5（一半）开始到结束，如果动画时长为6秒，_sizeanimation则从第3秒开始。

interval中begin 和end参数值的范围是0.0到1.0。

下面实现一个先执行颜色变化，在执行大小变化，代码如下：

class animationdemo extends statefulwidget {
  @override
  state<statefulwidget> createstate() => _animationdemo();
}

class _animationdemo extends state<animationdemo>
    with singletickerproviderstatemixin {
  animationcontroller _animationcontroller;
  animation _coloranimation;
  animation _sizeanimation;

  @override
  void initstate() {
    _animationcontroller =
        animationcontroller(duration: duration(seconds: 5), vsync: this)
    ..addlistener((){setstate(() {
      
    });});

    _coloranimation = colortween(begin: colors.red, end: colors.blue).animate(
        curvedanimation(
            parent: _animationcontroller, curve: interval(0.0, 0.5)));

    _sizeanimation = tween(begin: 100.0, end: 300.0).animate(curvedanimation(
        parent: _animationcontroller, curve: interval(0.5, 1.0)));

    //开始动画
    _animationcontroller.forward();
    super.initstate();
  }

  @override
  widget build(buildcontext context) {
    return center(
      child: column(
        mainaxissize: mainaxissize.min,
        children: <widget>[
          container(
              height: _sizeanimation.value,
              width: _sizeanimation.value,
              color: _coloranimation.value),
        ],
      ),
    );
  }

  @override
  void dispose() {
    _animationcontroller.dispose();
    super.dispose();
  }
}

效果如下：

我们也可以设置同时动画，只需将2个interval的值都改为interval(0.0, 1.0)。

想象下面的场景，一个红色的盒子，动画时长为6秒，前40%的时间大小从100->200，然后保持200不变20%的时间，最后40%的时间大小从200->300，这种效果通过tweensequence实现，代码如下：

_animation = tweensequence([
  tweensequenceitem(
      tween: tween(begin: 100.0, end: 200.0)
          .chain(curvetween(curve: curves.easein)),
      weight: 40),
  tweensequenceitem(tween: constanttween<double>(200.0), weight: 20),
  tweensequenceitem(tween: tween(begin: 200.0, end: 300.0), weight: 40),
]).animate(_animationcontroller);

weight表示每一个tween的权重。

最终效果如下：

交流

如果你对flutter还有疑问或者技术方面的疑惑，欢迎加入flutter交流群（微信：laomengit）。

同时也欢迎关注我的flutter公众号【老孟程序员】，公众号首发flutter的相关内容。

flutter地址： 里面包含160多个组件的详细用法。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网