![](https://img-blog.csdnimg.cn/20200326192905817.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21lbmdrczE5ODc=,size_16,color_FFFFFF,t_70)

## 动画运行的原理

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

电影就是依靠视觉暂留，在感官上电影是连续的。使动画有流畅的感觉，帧率至少要达到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，代码如下：

```dart
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`更新的，

```dart
_animationController.addListener(() {
  setState(() {});
});
```

效果如下：

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

```dart
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。

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

```dart
_animation = ColorTween(begin: Colors.red,end: Colors.blue).animate(_animation);
```

对动画状态监听：

```dart
_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：[http://laomengit.com/flutter/widgets/AnimatedBuilder/](http://laomengit.com/flutter/widgets/AnimatedBuilder/)
-  AlignTransition:[http://laomengit.com/flutter/widgets/AlignTransition/](http://laomengit.com/flutter/widgets/AlignTransition/)
-  AnimatedOpacity：[http://laomengit.com/flutter/widgets/AnimatedOpacity/](http://laomengit.com/flutter/widgets/AnimatedOpacity/)
-  AnimatedAlign：[http://laomengit.com/flutter/widgets/AnimatedAlign/](http://laomengit.com/flutter/widgets/AnimatedAlign/)
-  AnimatedPadding：[http://laomengit.com/flutter/widgets/AnimatedPadding/](http://laomengit.com/flutter/widgets/AnimatedPadding/)
-  AnimatedCrossFade：[http://laomengit.com/flutter/widgets/AnimatedCrossFade/](http://laomengit.com/flutter/widgets/AnimatedCrossFade/)
-  AnimatedContainer：[http://laomengit.com/flutter/widgets/AnimatedContainer/](http://laomengit.com/flutter/widgets/AnimatedContainer/)
-  AnimatedPositioned：[http://laomengit.com/flutter/widgets/AnimatedPositioned/](http://laomengit.com/flutter/widgets/AnimatedPositioned/)
-  AnimatedPositionedDirectional：[http://laomengit.com/flutter/widgets/AnimatedPositionedDirectional/](http://laomengit.com/flutter/widgets/AnimatedPositionedDirectional/)
-  AnimatedSwitcher：[http://laomengit.com/flutter/widgets/AnimatedSwitcher/](http://laomengit.com/flutter/widgets/AnimatedSwitcher/)
-  AnimatedIcon：[http://laomengit.com/flutter/widgets/AnimatedIcon/](http://laomengit.com/flutter/widgets/AnimatedIcon/)
-  TweenAnimationBuilder：[http://laomengit.com/flutter/widgets/TweenAnimationBuilder/](http://laomengit.com/flutter/widgets/TweenAnimationBuilder/)
-  DecoratedBoxTransition：[http://laomengit.com/flutter/widgets/DecoratedBoxTransition/](http://laomengit.com/flutter/widgets/DecoratedBoxTransition/)
-  DefaultTextStyleTransition：[http://laomengit.com/flutter/widgets/DefaultTextStyleTransition/](http://laomengit.com/flutter/widgets/DefaultTextStyleTransition/)
-  AnimatedDefaultTextStyle：[http://laomengit.com/flutter/widgets/AnimatedDefaultTextStyle/](http://laomengit.com/flutter/widgets/AnimatedDefaultTextStyle/)
-  PositionedTransition：[http://laomengit.com/flutter/widgets/PositionedTransition/](http://laomengit.com/flutter/widgets/PositionedTransition/)
-  RelativePositionedTransition：[http://laomengit.com/flutter/widgets/RelativePositionedTransition/](http://laomengit.com/flutter/widgets/RelativePositionedTransition/)
-  RotationTransition：[http://laomengit.com/flutter/widgets/RotationTransition/](http://laomengit.com/flutter/widgets/RotationTransition/)
-  ScaleTransition：[http://laomengit.com/flutter/widgets/ScaleTransition/](http://laomengit.com/flutter/widgets/ScaleTransition/)
-  SizeTransition：[http://laomengit.com/flutter/widgets/SizeTransition/](http://laomengit.com/flutter/widgets/SizeTransition/)
-  SlideTransition：[http://laomengit.com/flutter/widgets/SlideTransition/](http://laomengit.com/flutter/widgets/SlideTransition/)
-  FadeTransition：[http://laomengit.com/flutter/widgets/FadeTransition/](http://laomengit.com/flutter/widgets/FadeTransition/)
-  AnimatedModalBarrier：[http://laomengit.com/flutter/widgets/AnimatedModalBarrier/](http://laomengit.com/flutter/widgets/AnimatedModalBarrier/)
-  AnimatedList：[http://laomengit.com/flutter/widgets/AnimatedList/](http://laomengit.com/flutter/widgets/AnimatedList/)
-  Hero：[http://laomengit.com/flutter/widgets/Hero/](http://laomengit.com/flutter/widgets/Hero/)

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

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

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

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

## 交流

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

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

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

ITPub博客

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

最新文章