当前位置： 移动技术网 > IT编程>移动开发>Android > 《Flutter 动画系列一》25种动画组件超全总结

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

2020年04月03日  | 移动技术网IT编程  | 我要评论

麻豆宿舍第一季,劳伦斯·埃里森,宝宝咳嗽

动画运行的原理

任何程序的动画原理都是一样的，即：视觉暂留，视觉暂留又叫视觉暂停，人眼在观察景物时，光信号传入大脑神经，需经过一段短暂的时间，光的作用结束后，视觉形象并不立即消失，这种残留的视觉称“后像”，视觉的这一现象则被称为“视觉暂留”。

电影就是依靠视觉暂留，在感官上电影是连续的。使动画有流畅的感觉，帧率至少要达到24帧，即：每秒播放24个图像，因此动画有一个非常关键的性能参数fps（frame per second），即帧率，达到24fps，画面就比较流畅了，flutter的fps理论上可以达到60fps，超过48fps，将会感到丝滑般的顺畅。

flutter动画系统

为了方便开发者进行动画的开发，flutter将动画系统进行封装，抽象出4个概念：animation、curve、animationcontroller、tween。

  • animation：flutter动画中的核心类，此类是抽象类，通常情况下使用其子类：animationcontroller，可以获取当前动画的状态和值，也可以添加其状态变化监听和值变化监听。
  • curve：决定动画执行的曲线，和android中的interpolator（差值器）是一样的，负责控制动画变化的速率，系统已经封装了10多种动画曲线，详见curves类。
  • animationcontroller：动画控制器，控制动画的开始、停止。继承自animation。
  • tween：映射生成不同范围的值，animationcontroller的动画值是double类型的，如果需要颜色的变化，tween可以完成此工作。

将container控件的大小由100变为300，代码如下：

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

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

  @override
  void initstate() {
    _animationcontroller = animationcontroller(
        duration: duration(seconds: 2),
        lowerbound: 100.0,
        upperbound: 300.0,
        vsync: this);

    _animationcontroller.addlistener(() {
      setstate(() {});
    });

    super.initstate();
  }

  @override
  widget build(buildcontext context) {
    return scaffold(
      appbar: appbar(),
      body: column(
        children: <widget>[
          raisedbutton(
            child: text('开始动画'),
            onpressed: () {
              _animationcontroller.forward();
            },
          ),
          expanded(
            child: center(
              child: container(
                width: _animationcontroller.value,
                height: _animationcontroller.value,
                color: colors.red,
              ),
            ),
          ),
        ],
      ),
    );
  }

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

animationcontroller的初始化中vsync，这个参数要说明白能说一天，我们只需先记住其写法，this表示singletickerproviderstatemixin，屏幕每一帧都会引起animationcontroller值的变化。

dispose方法中要记住释放animationcontroller。

ui的更新是通过setstate更新的，

_animationcontroller.addlistener(() {
  setstate(() {});
});

效果如下：

默认情况下，动画曲线为线性，修改动画曲线如下：

class _animationdemo extends state<animationdemo>
    with singletickerproviderstatemixin {
  animationcontroller _animationcontroller;
  animation _animation;
  @override
  void initstate() {
    _animationcontroller = animationcontroller(
        duration: duration(seconds: 2),
        vsync: this);

    _animationcontroller.addlistener(() {
      setstate(() {});
    });

    _animation = curvedanimation(parent: _animationcontroller,curve: curves.easein);
    _animation = tween(begin: 100.0,end: 300.0).animate(_animation);
    super.initstate();
  }

  @override
  widget build(buildcontext context) {
    return scaffold(
      appbar: appbar(),
      body: column(
        children: <widget>[
          raisedbutton(
            child: text('开始动画'),
            onpressed: () {
              _animationcontroller.forward();
            },
          ),
          expanded(
            child: center(
              child: container(
                width: _animation.value,
                height: _animation.value,
                color: colors.red,
              ),
            ),
          ),
        ],
      ),
    );
  }

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

修改的地方说明如下：

  • animationcontroller中lowerbound和upperbound不能在直接设置为100和300，因为animationcontroller需要被curvedanimation使用，值的范围必须是0-1。
  • 由于animationcontroller值的范围是0-1，而动画需要在100-300变化，所以引入tween。

如果动画是颜色的变化，修改如下：

_animation = colortween(begin: colors.red,end: colors.blue).animate(_animation);

对动画状态监听：

_animationcontroller.addstatuslistener((status) {
if (status == animationstatus.completed) {
//执行结束反向执行
  _animationcontroller.reverse();
} else if (status == animationstatus.dismissed) {
//反向执行结束正向执行
  _animationcontroller.forward();
}
});

动画状态：

  • dismissed：动画结束，停在开始处。
  • forward：动画正向进行。
  • reverse：动画反向进行。
  • completed：动画结束，停在末尾处。

上面就是动画的基本用法，有没有发现一些通用的地方：

  • 每次刷新ui都需要调用setstate。

“懒”是原罪，也是社会进步的最大动力。

flutter封装了animatedwidget，此控件就封装了setstate。虽然flutter为封装了大量的动画控件，但万变不离其宗。

flutter 25种动画组件介绍

flutter中提供了大量的动画组件及详细用法：

  • animatedbuilder：
  • aligntransition:
  • animatedopacity：
  • animatedalign：
  • animatedpadding：
  • animatedcrossfade：
  • animatedcontainer：
  • animatedpositioned：
  • animatedpositioneddirectional：
  • animatedswitcher：
  • animatedicon：
  • tweenanimationbuilder：
  • decoratedboxtransition：
  • defaulttextstyletransition：
  • animateddefaulttextstyle：
  • positionedtransition：
  • relativepositionedtransition：
  • rotationtransition：
  • scaletransition：
  • sizetransition：
  • slidetransition：
  • fadetransition：
  • animatedmodalbarrier：
  • animatedlist：
  • hero：

其实动画不仅仅是这些控件属性变化，还有使用paint自绘制的动画。

看到这么多组件是不是晕了，我也没想到会有这么多组件，那我们改如何选择适合的组件？这真是一个灵魂拷问啊。

这是《flutter 动画系列》的第一篇，接下来还有：

  • 组合动画
  • 自定义动画
  • 到底如何选择动画控件

交流

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

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

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

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

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