《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,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),]).animate(_animationController);

weight表示每一个Tween的权重。

最终效果如下:

交流

如果你对Flutter还有疑问或者技术方面的疑惑,欢迎加入Flutter交流群(微信:laomengit)。

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

Flutter地址:http://laomengit.com 里面包含160多个组件的详细用法。

相关文章

这篇文章主要讲解了“FlutterComponent动画的显和隐怎么实现...
这篇文章主要讲解了“flutter微信聊天输入框功能如何实现”,...
本篇内容介绍了“Flutter之Navigator的高级用法有哪些”的有...
这篇文章主要介绍“Flutter怎么使用Android原生播放器”,在...
Flutter开发的android端如何修改APP名称,logo,版本号,具体...
Flutter路由管理初识路由概念一.路由管理1.1.Route1.2.Mater...