对于一个前端的App来说，添加适当的动画，可以给用户更好的体验和视觉效果。所以无论是原生的iOS或Android，还是前端开发中都会提供完成某些动画的API。
Flutter有自己的渲染闭环，我们当然可以给它提供一定的数据模型，来让它帮助我们实现对应的动画效果。
一. 动画API认识
动画其实是我们通过某些方式（比如对象，Animation对象）给Flutter引擎提供不同的值，而Flutter可以根据我们提供的值，给对应的Widget添加顺滑的动画效果。
针对动画这个章节，我打算先理清楚他们的API关系和作用，再来讲解如何利用这些API来实现不同的动画效果。
1.1. Animation
在Flutter中，实现动画的核心类是Animation，Widget可以直接将这些动画合并到自己的build方法中来读取它们的当前值或者监听它们的状态变化。
我们一起来看一下Animation这个类，它是一个抽象类：
- addListener方法
- 当动画的状态值发生变化时，动画都会通知所有通过
addListener添加的监听器。 - 通常，一个正在监听动画的
state对象会调用自身的setState方法，将自身传入这些监听器的回调函数来通知 widget 系统需要根据新状态值进行重新构建。
- 当动画的状态值发生变化时，动画都会通知所有通过
- addStatusListener
- 当动画的状态发生变化时，会通知所有通过
addStatusListener添加的监听器。 - 通常情况下，动画会从
dismissed状态开始，表示它处于变化区间的开始点。 - 举例来说，从 0.0 到 1.0 的动画在
dismissed状态时的值应该是 0.0。 - 动画进行的下一状态可能是
forward（比如从 0.0 到 1.0）或者reverse（比如从 1.0 到 0.0）。 - 最终，如果动画到达其区间的结束点（比如 1.0），则动画会变成
completed状态。
- 当动画的状态发生变化时，会通知所有通过
Animation源码如下：
abstract class Animation<T> extends Listenable implements ValueListenable<T> {
const Animation();
// 添加动画监听器
@override
void addListener(VoidCallback listener);
// 移除动画监听器
@override
void removeListener(VoidCallback listener);
// 添加动画状态监听器
void addStatusListener(AnimationStatusListener listener);
// 移除动画状态监听器
void removeStatusListener(AnimationStatusListener listener);
// 获取动画当前状态
AnimationStatus get status;
// 获取动画当前的值
@override
T get value;
1.2. AnimationController
Animation是一个抽象类，并不能用来直接创建对象实现动画的使用。
- AnimationController是Animation的一个子类，实现动画通常我们需要创建AnimationController对象。
- AnimationController会生成一系列的值，默认情况下值是0.0到1.0区间的值；
除了上面的监听，获取动画的状态、值之外，AnimationController还提供了对动画的控制：
- forward：向前执行动画
- reverse：方向播放动画
- stop：停止动画
AnimationController源码如下：
class AnimationController extends Animation<double>
with AnimationEagerListenerMixin, AnimationLocalListenersMixin, AnimationLocalStatusListenersMixin {
AnimationController({
// 初始化值
double value,
// 动画执行的时间
this.duration,
// 反向动画执行的时间
this.reverseDuration,
// 最小值
this.lowerBound = 0.0,
// 最大值
this.upperBound = 1.0,
// 刷新率ticker的回调（看下面详细解析）
@required TickerProvider vsync,
})
}
AnimationController有一个必传的参数vsync，它是什么呢？
- 之前我讲过关于Flutter的渲染闭环，Flutter每次渲染一帧画面之前都需要等待一个vsync信号。
- 这里也是为了监听vsync信号，当Flutter开发的应用程序不再接受同步信号时（比如锁屏或退到后台），那么继续执行动画会消耗性能。
- 这个时候我们设置了Ticker，就不会再出发动画了。
- 开发中比较常见的是将SingleTickerProviderStateMixin混入到State的定义中。
1.3. CurvedAnimation
CurvedAnimation也是Animation的一个实现类，它的目的是为了给AnimationController增加动画曲线。
- CurvedAnimation可以将AnimationController和Curve结合起来，生成一个新的Animation对象。
CurvedAnimation源码如下：
class CurvedAnimation extends Animation<double> with AnimationWithParentMixin<double> {
CurvedAnimation({
// 通常传入一个AnimationController
@required this.parent,
// Curve类型的对象
@required this.curve,
this.reverseCurve,
});
}
Curve类型的对象的有一些常量Curves（和Color类型有一些Colors是一样的），可以供我们直接使用：
- 对值的效果，可以直接查看官网（有对应的gif效果，一目了然）
- https://api.flutter.dev/flutter/animation/Curves-class.html
官方也给出了自己定义Curse的一个示例：
import 'dart:math';
class ShakeCurve extends Curve {
@override
double transform(double t) => sin(t * pi * 2);
}
1.4. Tween
默认情况下，AnimationController动画生成的值所在区间是0.0到1.0，如果希望使用这个以外的值，或者其他的数据类型，就需要使用Tween。
Tween的源码非常简单，传入两个值即可，可以定义一个范围，如下：
class Tween<T extends dynamic> extends Animatable<T> {
Tween({ this.begin, this.end });
}
Tween也有一些子类，比如ColorTween、BorderTween，可以针对动画或者边框来设置动画的值。
要使用Tween对象，需要调用Tween的animate()方法，传入一个Animation对象。
二. 动画案例练习
2.1. 动画的基本使用
我们来完成一个案例：
- 点击案例后执行一个心跳动画，可以反复执行
- 再次点击可以暂停和重新开始动画
import 'dart:async';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue, splashColor: Colors.transparent),
home: HYHomePage(),
);
}
}
class HYHomePage extends StatefulWidget {
@override
_HYHomePageState createState() => _HYHomePageState();
}
class _HYHomePageState extends State<HYHomePage>
with SingleTickerProviderStateMixin {
// 创建AnimationController
AnimationController _controller;
Animation _animation;
Animation _sizeAnim;
// bool _isForward;
@override
void initState() {
super.initState();
// 1.创建AnimationController
// 只有在方法里面才能写this
_controller = AnimationController(
vsync: this,
duration: Duration(seconds: 2)
);
// 2.设置Curve的值
_animation = CurvedAnimation(parent: _controller, curve: Curves.linear);
// 3.Tween 设置范围
_sizeAnim = Tween(begin: 50.0, end: 150.0).animate(_animation);
// 监听动画值的改变，这时候_sizeAnim.value的值是一直改变的
// 值改变后我们就调用setState，调用setState之后就会重新执行build，这时候界面上就有动画效果了
_controller.addListener(() {
setState(() {});
});
// 监听动画的状态改变
// 状态改变后反转，实现心跳效果
_controller.addStatusListener((status) {
if (status == AnimationStatus.completed) {
_controller.reverse();
} else if (status == AnimationStatus.dismissed) {
_controller.forward();
}
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("首页"),
),
body: Center(
// 心形
child: Icon(Icons.favorite, color: Colors.red, size: _sizeAnim.value,),
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.play_arrow),
onPressed: () {
// 如果动画在执行，就暂停
if (_controller.isAnimating) {
_controller.stop();
print(_controller.status);
// 如果是暂停后的向前状态，就继续向前
} else if (_controller.status == AnimationStatus.forward) {
_controller.forward();
// 如果是暂停后的向后状态，就继续向后
} else if (_controller.status == AnimationStatus.reverse) {
_controller.reverse();
} else {
// completed状态直接开始
_controller.forward();
}
},
),
);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
}
/**
* 1.Animation: 抽象类
* * 监听动画值的改变
* * 监听动画状态的改变
* * value
* * status
* 2.AnimationController继承自Animation
* * vsync: 同步信号(this -> with SingleTickerProviderStateMixin)
* * forward(): 向前执行动画
* * reverse(): 反转执行动画
* 3.CurvedAnimation:
* * 作用: 设置动画执行的速率(速度曲线)
* 4.Tween: 设置动画执行的value范围
* * begin: 开始值
* * end: 结束值
*/
2.2. AnimatedWidget
在上面的代码中，我们必须监听动画值的改变，并且改变后需要调用setState，这会带来两个问题：
- 每次写动画都要写一大段监听动画值的改变代码
- 调用setState意味着整个State类中的build方法就会被重新build
如何优化上面的操作呢？创建一个Widget继承于AnimatedWidget：
class HYAnimatedIcon extends AnimatedWidget {
// final Animation _sizeAnim;
//必须将_sizeAnim传递给父类
HYAnimatedIcon(Animation anim): super(listenable: anim);
@override
Widget build(BuildContext context) {
// listenable是父类的属性
Animation anim = listenable;
return Icon(Icons.favorite, color: Colors.red, size: anim.value,);
}
}
详细代码如下：
import 'dart:async';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue, splashColor: Colors.transparent),
home: HYHomePage(),
);
}
}
class HYHomePage extends StatefulWidget {
@override
_HYHomePageState createState() => _HYHomePageState();
}
class _HYHomePageState extends State<HYHomePage>
with SingleTickerProviderStateMixin {
// 创建AnimationController
AnimationController _controller;
Animation _animation;
Animation _sizeAnim;
// bool _isForward;
@override
void initState() {
super.initState();
// 1.创建AnimationController
_controller = AnimationController(
vsync: this,
duration: Duration(seconds: 2)
);
// 2.设置Curve的值
_animation = CurvedAnimation(parent: _controller, curve: Curves.linear);
// 3.Tween
_sizeAnim = Tween(begin: 50.0, end: 150.0).animate(_animation);
// 监听动画值的改变
// _controller.addListener(() {
// setState(() {});
// });
// 监听动画的状态改变
_controller.addStatusListener((status) {
if (status == AnimationStatus.completed) {
_controller.reverse();
} else if (status == AnimationStatus.dismissed) {
_controller.forward();
}
});
}
@override
Widget build(BuildContext context) {
print("执行_HYHomePageState的build方法");
return Scaffold(
appBar: AppBar(
title: Text("首页"),
),
body: Center(
// 将_sizeAnim传进去
child: HYAnimatedIcon(_sizeAnim),
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.play_arrow),
onPressed: () {
if (_controller.isAnimating) {
_controller.stop();
print(_controller.status);
} else if (_controller.status == AnimationStatus.forward) {
_controller.forward();
} else if (_controller.status == AnimationStatus.reverse) {
_controller.reverse();
} else {
_controller.forward();
}
},
),
);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
}
但是AnimatedWidget也有缺点，如下：
- 我们每次都要新建一个类来继承自AnimatedWidget
- 如果我们的动画Widget有子Widget，那么意味着它的子Widget也会重新build
如何优化上面的操作呢？AnimatedBuilder
2.3. AnimatedBuilder
import 'dart:async';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue, splashColor: Colors.transparent),
home: HYHomePage(),
);
}
}
class HYHomePage extends StatefulWidget {
@override
_HYHomePageState createState() => _HYHomePageState();
}
class _HYHomePageState extends State<HYHomePage>
with SingleTickerProviderStateMixin {
// 创建AnimationController
AnimationController _controller;
Animation _animation;
Animation _sizeAnim;
// bool _isForward;
@override
void initState() {
super.initState();
// 1.创建AnimationController
_controller = AnimationController(
vsync: this,
duration: Duration(seconds: 2)
);
// 2.设置Curve的值
_animation = CurvedAnimation(parent: _controller, curve: Curves.linear);
// 3.Tween
_sizeAnim = Tween(begin: 50.0, end: 150.0).animate(_animation);
// 监听动画值的改变
// _controller.addListener(() {
// setState(() {});
// });
// 监听动画的状态改变
_controller.addStatusListener((status) {
if (status == AnimationStatus.completed) {
_controller.reverse();
} else if (status == AnimationStatus.dismissed) {
_controller.forward();
}
});
}
@override
Widget build(BuildContext context) {
print("执行_HYHomePageState的build方法");
return Scaffold(
appBar: AppBar(
title: Text("首页"),
),
body: Center(
child: AnimatedBuilder(
animation: _controller,
builder: (ctx, child) {
// 如果有child，就把下面的child放到这里，这个语法在consumer里面也讲过
// 这样写可以解决第二个问题：子widget的child不会重新构建
return Icon(Icons.favorite, color: Colors.red, size: _sizeAnim.value);
},
// child: {},
),
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.play_arrow),
onPressed: () {
if (_controller.isAnimating) {
_controller.stop();
print(_controller.status);
} else if (_controller.status == AnimationStatus.forward) {
_controller.forward();
} else if (_controller.status == AnimationStatus.reverse) {
_controller.reverse();
} else {
_controller.forward();
}
},
),
);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
}
三. 其它动画补充
3.1. 交织动画
案例说明：
- 点击floatingActionButton执行动画；
- 动画集合了透明度变化、大小变化、颜色变化、旋转动画等；
- 我们这里是通过多个Tween生成了多个Animation对象；
import 'dart:async';
import 'dart:math';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue, splashColor: Colors.transparent),
home: HYHomePage(),
);
}
}
class HYHomePage extends StatefulWidget {
@override
_HYHomePageState createState() => _HYHomePageState();
}
class _HYHomePageState extends State<HYHomePage>
with SingleTickerProviderStateMixin {
// 创建AnimationController
AnimationController _controller;
Animation _sizeAnim;
Animation _colorAnim;
Animation _opacityAnim;
Animation _radiansAnim;
@override
void initState() {
super.initState();
// 1.创建AnimationController
_controller = AnimationController(
vsync: this,
duration: Duration(seconds: 2)
);
// 3.Tween
// 3.1.创建size的tween
_sizeAnim = Tween(begin: 10.0, end: 200.0).animate(_controller);
// 3.2.创建color的tween
_colorAnim = ColorTween(begin: Colors.orange, end: Colors.purple).animate(_controller);
// 3.3.创建opacity的tween
_opacityAnim = Tween(begin: 0.0, end: 1.0).animate(_controller);
// 3.4.创建radians的tween
_radiansAnim = Tween(begin: 0.0, end: 2 * pi).animate(_controller);
// 监听动画的状态改变
_controller.addStatusListener((status) {
if (status == AnimationStatus.completed) {
_controller.reverse();
} else if (status == AnimationStatus.dismissed) {
_controller.forward();
}
});
}
@override
Widget build(BuildContext context) {
print("执行_HYHomePageState的build方法");
/**
* 1.大小变化动画
* 2.颜色变化动画
* 3.透明度变化动画
*/
return Scaffold(
appBar: AppBar(
title: Text("首页"),
),
body: Center(
// 使用AnimatedBuilder
child: AnimatedBuilder(
animation: _controller,
builder: (ctx, child) {
return Opacity(
// 不透明度，1不透明，0完全透明
opacity: _opacityAnim.value,
child: Transform(
transform: Matrix4.rotationZ(_radiansAnim.value),
// 设置沿着中心点旋转
alignment: Alignment.center,
child: Container(
width: _sizeAnim.value,
height: _sizeAnim.value,
color: _colorAnim.value,
),
),
);
},
)
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.play_arrow),
onPressed: () {
if (_controller.isAnimating) {
_controller.stop();
print(_controller.status);
} else if (_controller.status == AnimationStatus.forward) {
_controller.forward();
} else if (_controller.status == AnimationStatus.reverse) {
_controller.reverse();
} else {
_controller.forward();
}
},
),
);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
}
3.2. Hero动画
移动端开发经常会遇到类似这样的需求：
- 点击一个头像，显示头像的大图，并且从原来图像的Rect到大图的Rect
- 点击一个商品的图片，可以展示商品的大图，并且从原来图像的Rect到大图的Rect
在Flutter中，有一个专门的Widget可以来实现这种动画效果：Hero
实现Hero动画，需要如下步骤：
- 在第一个Page1中，定义一个起始的Hero Widget，被称之为source hero，并且绑定一个tag；
- 在第二个Page2中，定义一个终点的Hero Widget，被称之为 destination hero，并且绑定相同的tag；
- 可以通过Navigator来实现第一个页面Page1到第二个页面Page2的跳转过程；
首页Page代码：
import 'package:flutter/material.dart';
import 'package:learn_flutter/_12_animation/pages/image_detail.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue, splashColor: Colors.transparent),
home: HYHomePage(),
);
}
}
class HYHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("首页"),
),
body: Center(
child: GridView(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 8,
mainAxisSpacing: 8,
childAspectRatio: 16/9
),
children: List.generate(20, (index) {
final imageURL = "https://picsum.photos/500/500?random=$index";
// 添加手势
return GestureDetector(
onTap: () {
// 使用渐变的方式显示界面
Navigator.of(context).push(PageRouteBuilder(
pageBuilder: (ctx, anim1, anim2) {
return FadeTransition(opacity: anim1, child: HYImageDetailPage(imageURL));
}
));
},
child: Hero(
// 将图片地址作为tag，就能做到图片放大的效果
tag: imageURL,
child: Image.network(
imageURL,
fit: BoxFit.cover,
),
)
);
}),
),
),
);
}
}
大图展示页面，image_detail.dart文件，代码如下：
import 'package:flutter/material.dart';
class HYImageDetailPage extends StatelessWidget {
final String _imageURL;
HYImageDetailPage(this._imageURL);
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black,
body: Center(
child: GestureDetector(
onTap: () {
// 点击大图消失
Navigator.of(context).pop();
},
// 将图片地址作为tag，就能做到图片放大的效果
child: Hero(tag: _imageURL, child: Image.network(_imageURL))
),
),
);
}
}
