Flutter学习之旅（四）Flutter动画（1）动画基础介绍 - 好文

前言

本篇将介绍Flutter中动画。首先来看下Flutter的动画基础概念和相关类

* Animation：Flutter中动画的核心类
* AnimationController：动画管理类
* Tween：补间对象，用于计算动画使用的数据范围之间的插值。
* Listeners和StatusListeners：用于监听动画状态改变
* CurvedAnimation：用于定义非线性曲线动画

1. Animation介绍

Flutter中的动画核心类，我们可以理解为Animation是Flutter中动画的基类。它是个抽象类（abstract），所以不能够直接创建其对象来使用动画。Animation对象可以在设定的动画执行时间内生成在两个值之间生成插值数。Animation对象的输出可以是线性，非线性。

一种常用的动画类型是Animation，当然还有可能是double之外的其数据类型，例如Animation 或Animation 。

2. CurvedAnimation非线性动画

CurvedAnimation继承Animation，构建其对象的方式是：
CurvedAnimation curve = CurvedAnimation(parent: controller, curve:
Curves.easeIn);
构造函数中传入控制器和要执行的曲线方式。这里不做过多的介绍。

3. AnimationController动画管理类

AnimationController是一个特殊的Animation对象。其继承自Animation
，因此可以在需要Animation对象的任何地方使用它。默认情况下，AnimationController在给定的持续时间内线性生成从0.0到1.0的值。
AnimationController controller = new AnimationController( duration: const
Duration(milliseconds:2000), vsync: this);
上述是AnimationController
对象的创建方式，构造函数第一个参数是动画执行的时间，第二个vsync传入是防止动画离屏之后继续消耗资源。AnimationController
提供了几个常用的方法。
 TickerFuture forward({ double from }) {} 
TickerFuture reverse({ double from }) {} TickerFuture
repeat({ double min, double max, Duration period }) {}
TickerFuture fling({ double velocity: 1.0 }) {} void stop({ bool
canceled: true }) {} void dispose() {}

4. Tween补间值生成类

AnimationController对象的范围为0.0到1.0。如果需要不同的范围或不同的数据类型，可以使用Tween将动画配置为插入到不同的范围或数据类型。例如，以下Tween从0.0变为500.0：
Tween doubleTween = Tween<double>(begin: 0.0, end: 500.0);
构造函数传入只需要传入begin和end两个值，当然这里不一定只是double值。

5. Listeners和StatusListeners动画监听

Animation对象可以有Listeners和StatusListeners，用addListener()和addStatusListener()。只要动画的值发生变化，就会调用监听器。我们通常可用调用setState()
以将动画重置状态。动画开始，结束，前进或后退时调用StatusListener，下列是Flutter提供动画的监听方法。
 void addListener(VoidCallback listener);  void
removeListener(VoidCallback listener); void
addStatusListener(AnimationStatusListener listener); void
removeStatusListener(AnimationStatusListener listener);
动画状态如下：
 enum AnimationStatus {  dismissed,
 forward,  reverse, 
completed, }
OK，下面来看个简单的Flutter动画Demo。
import 'package:flutter/animation.dart'; import 'package:flutter/material.dart'
;class MyApp extends StatefulWidget { _AnimationApp createState() => new
_AnimationApp(); }class _AnimationApp extends State<MyApp> with
SingleTickerProviderStateMixin { Animation<double> tween; AnimationController
controller;/*初始化状态*/ initState() { super.initState(); /*创建动画控制类对象*/ controller =
new AnimationController( duration: const Duration(milliseconds: 2000), vsync:
this); /*创建补间对象*/ tween = new Tween(begin: 0.0, end: 1.0) .animate(controller)
//返回Animation对象 ..addListener(() { //添加监听 setState(() { print(tween.value);
//打印补间插值 }); }); controller.forward(); //执行动画 } Widget build(BuildContext
context) {return new GestureDetector( onTap: () { startAnimtaion(); //点击文本
重新执行动画 }, child: new Center( child: new Text( "Flutter Animation(一)", style:
TextStyle(fontSize:20 * controller.value), //更改文本字体大小 ) )); } startAnimtaion()
{ setState(() { controller.forward(from:0.0); }); } dispose() { //销毁控制器对象
controller.dispose();super.dispose(); } } void main() { runApp(new MaterialApp(
home:new MyApp(), )); }

打印出的部分补间插值如上图所示，系统自动计算0.0-1.0之间在2s内的线性插值。

动画效果图（制作软件太low）：

热门工具换一换