欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

《Flutter 动画系列》组合动画

程序员文章站 2022-09-03 23:46:36
老孟导读:在前面的文章中介绍了 《Flutter 动画系列》25种动画组件超全总结 "http://laomengit.com/flutter/module/animated_1/" 《Flutter 动画系列》Google工程师带你选择Flutter动画控件: "http://laomengit. ......

《Flutter 动画系列》组合动画

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

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

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

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

flutter中组合动画使用intervalinterval继承自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秒开始。

intervalbeginend参数值的范围是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();
  }
}

效果如下:

《Flutter 动画系列》组合动画

我们也可以设置同时动画,只需将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还有疑问或者技术方面的疑惑,欢迎加入flutter交流群(微信:laomengit)。

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

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