一. 動畫API認(rèn)識
動畫其實(shí)是我們通過某些方式（比如對象，Animation對象）給Flutter引擎提供不同的值赴精，而Flutter可以根據(jù)我們提供的值，給對應(yīng)的Widget添加順滑的動畫效果绞幌。
1.1. Animation
在Flutter中蕾哟，實(shí)現(xiàn)動畫的核心類是Animation，Widget可以直接將這些動畫合并到自己的build方法中來讀取它們的當(dāng)前值或者監(jiān)聽它們的狀態(tài)變化。
我們一起來看一下Animation這個類谭确，它是一個抽象類：
-
addListener方法
- 每當(dāng)動畫的狀態(tài)值發(fā)生變化時帘营，動畫都會通知所有通過
addListener添加的監(jiān)聽器。 - 通常逐哈，一個正在監(jiān)聽動畫的
state對象會調(diào)用自身的setState方法芬迄，將自身傳入這些監(jiān)聽器的回調(diào)函數(shù)來通知 widget 系統(tǒng)需要根據(jù)新狀態(tài)值進(jìn)行重新構(gòu)建。
- 每當(dāng)動畫的狀態(tài)值發(fā)生變化時帘营，動畫都會通知所有通過
-
addStatusListener
- 當(dāng)動畫的狀態(tài)發(fā)生變化時昂秃，會通知所有通過
addStatusListener添加的監(jiān)聽器禀梳。 - 通常情況下，動畫會從
dismissed狀態(tài)開始肠骆，表示它處于變化區(qū)間的開始點(diǎn)算途。 - 舉例來說，從 0.0 到 1.0 的動畫在
dismissed狀態(tài)時的值應(yīng)該是 0.0蚀腿。 - 動畫進(jìn)行的下一狀態(tài)可能是
forward（比如從 0.0 到 1.0）或者reverse（比如從 1.0 到 0.0）郊艘。 - 最終，如果動畫到達(dá)其區(qū)間的結(jié)束點(diǎn)（比如 1.0）唯咬，則動畫會變成
completed狀態(tài)纱注。
- 當(dāng)動畫的狀態(tài)發(fā)生變化時昂秃，會通知所有通過
abstract class Animation<T> extends Listenable implements ValueListenable<T> {
const Animation();
// 添加動畫監(jiān)聽器
@override
void addListener(VoidCallback listener);
// 移除動畫監(jiān)聽器
@override
void removeListener(VoidCallback listener);
// 添加動畫狀態(tài)監(jiān)聽器
void addStatusListener(AnimationStatusListener listener);
// 移除動畫狀態(tài)監(jiān)聽器
void removeStatusListener(AnimationStatusListener listener);
// 獲取動畫當(dāng)前狀態(tài)
AnimationStatus get status;
// 獲取動畫當(dāng)前的值
@override
T get value;
1.2. AnimationController
Animation是一個抽象類，并不能用來直接創(chuàng)建對象實(shí)現(xiàn)動畫的使用胆胰。
AnimationController是Animation的一個子類狞贱，實(shí)現(xiàn)動畫通常我們需要創(chuàng)建AnimationController對象。
- AnimationController會生成一系列的值蜀涨，默認(rèn)情況下值是0.0到1.0區(qū)間的值瞎嬉；
除了上面的監(jiān)聽，獲取動畫的狀態(tài)厚柳、值之外氧枣，AnimationController還提供了對動畫的控制：
- forward：向前執(zhí)行動畫
- reverse：方向播放動畫
- stop：停止動畫
AnimationController的源碼：
class AnimationController extends Animation<double>
with AnimationEagerListenerMixin, AnimationLocalListenersMixin, AnimationLocalStatusListenersMixin {
AnimationController({
// 初始化值
double value,
// 動畫執(zhí)行的時間
this.duration,
// 反向動畫執(zhí)行的時間
this.reverseDuration,
// 最小值
this.lowerBound = 0.0,
// 最大值
this.upperBound = 1.0,
// 刷新率ticker的回調(diào)（看下面詳細(xì)解析）
@required TickerProvider vsync,
})
}
AnimationController有一個必傳的參數(shù)vsync，它是什么呢别垮？
- 之前我講過關(guān)于Flutter的渲染閉環(huán)便监，F(xiàn)lutter每次渲染一幀畫面之前都需要等待一個vsync信號。
- 這里也是為了監(jiān)聽vsync信號碳想，當(dāng)Flutter開發(fā)的應(yīng)用程序不再接受同步信號時（比如鎖屏或退到后臺）烧董，那么繼續(xù)執(zhí)行動畫會消耗性能。
- 這個時候我們設(shè)置了Ticker胧奔，就不會再出發(fā)動畫了逊移。
- 開發(fā)中比較常見的是將SingleTickerProviderStateMixin混入到State的定義中。
1.3. CurvedAnimation
CurvedAnimation也是Animation的一個實(shí)現(xiàn)類龙填，它的目的是為了給AnimationController增加動畫曲線：
- CurvedAnimation可以將AnimationController和Curve結(jié)合起來胳泉，生成一個新的Animation對象
class CurvedAnimation extends Animation<double> with AnimationWithParentMixin<double> {
CurvedAnimation({
// 通常傳入一個AnimationController
@required this.parent,
// Curve類型的對象
@required this.curve,
this.reverseCurve,
});
}
Curve類型的對象的有一些常量Curves（和Color類型有一些Colors是一樣的）拐叉，可以供我們直接使用：
- 對值的效果，可以直接查看官網(wǎng)（有對應(yīng)的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
默認(rèn)情況下凤瘦，AnimationController動畫生成的值所在區(qū)間是0.0到1.0
- 如果希望使用這個以外的值，或者其他的數(shù)據(jù)類型钳吟，就需要使用Tween
Tween的源碼：
- 源碼非常簡單，傳入兩個值即可窘拯，可以定義一個范圍红且。
class Tween<T extends dynamic> extends Animatable<T> {
Tween({ this.begin, this.end });
}
Tween也有一些子類，比如ColorTween涤姊、BorderTween暇番，可以針對動畫或者邊框來設(shè)置動畫的值。
Tween.animate
要使用Tween對象思喊，需要調(diào)用Tween的animate()方法壁酬，傳入一個Animation對象。
二. 動畫案例練習(xí)
2.1. 動畫的基本使用
我們來完成一個案例：
- 點(diǎn)擊案例后執(zhí)行一個心跳動畫恨课，可以反復(fù)執(zhí)行
- 再次點(diǎn)擊可以暫停和重新開始動畫
class HYHomePage extends StatelessWidget {
final GlobalKey<_AnimationDemo01State> demo01Key = GlobalKey();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("動畫測試"),
),
body: AnimationDemo01(key: demo01Key),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.play_circle_filled),
onPressed: () {
if (!demo01Key.currentState.controller.isAnimating) {
demo01Key.currentState.controller.forward();
} else {
demo01Key.currentState.controller.stop();
}
},
),
);
}
}
class AnimationDemo01 extends StatefulWidget {
AnimationDemo01({Key key}): super(key: key);
@override
_AnimationDemo01State createState() => _AnimationDemo01State();
}
class _AnimationDemo01State extends State<AnimationDemo01> with SingleTickerProviderStateMixin {
AnimationController controller;
Animation<double> animation;
@override
void initState() {
super.initState();
// 1.創(chuàng)建AnimationController
controller = AnimationController(duration: Duration(seconds: 1), vsync: this);
// 2.動畫添加Curve效果
animation = CurvedAnimation(parent: controller, curve: Curves.elasticInOut, reverseCurve: Curves.easeOut);
// 3.監(jiān)聽動畫
animation.addListener(() {
setState(() {});
});
// 4.控制動畫的翻轉(zhuǎn)
animation.addStatusListener((status) {
if (status == AnimationStatus.completed) {
controller.reverse();
} else if (status == AnimationStatus.dismissed) {
controller.forward();
}
});
// 5.設(shè)置值的范圍
animation = Tween(begin: 50.0, end: 120.0).animate(controller);
}
@override
Widget build(BuildContext context) {
return Center(
child: Icon(Icons.favorite, color: Colors.red, size: animation.value,),
);
}
@override
void dispose() {
controller.dispose();
super.dispose();
}
}
2.2. AnimatedWidget
在上面的代碼中舆乔，我們必須監(jiān)聽動畫值的改變，并且改變后需要調(diào)用setState剂公，這會帶來兩個問題：
- 1.執(zhí)行動畫必須包含被部分代碼希俩，代碼比較冗余
- 2.調(diào)用setState意味著整個State類中的build方法就會被重新build
如何可以優(yōu)化上面的操作呢？AnimatedWidget
創(chuàng)建一個Widget繼承自AnimatedWidget：
class IconAnimation extends AnimatedWidget {
IconAnimation(Animation animation): super(listenable: animation);
@override
Widget build(BuildContext context) {
Animation animation = listenable;
return Icon(Icons.favorite, color: Colors.red, size: animation.value,);
}
}
修改_AnimationDemo01State中的代碼：
class _AnimationDemo01State extends State<AnimationDemo01> with SingleTickerProviderStateMixin {
AnimationController controller;
Animation<double> animation;
@override
void initState() {
super.initState();
// 1.創(chuàng)建AnimationController
controller = AnimationController(duration: Duration(seconds: 1), vsync: this);
// 2.動畫添加Curve效果
animation = CurvedAnimation(parent: controller, curve: Curves.elasticInOut, reverseCurve: Curves.easeOut);
// 3.監(jiān)聽動畫
// 4.控制動畫的翻轉(zhuǎn)
animation.addStatusListener((status) {
if (status == AnimationStatus.completed) {
controller.reverse();
} else if (status == AnimationStatus.dismissed) {
controller.forward();
}
});
// 5.設(shè)置值的范圍
animation = Tween(begin: 50.0, end: 120.0).animate(controller);
}
@override
Widget build(BuildContext context) {
return Center(
child: IconAnimation(animation),
);
}
@override
void dispose() {
controller.dispose();
super.dispose();
}
}
2.3. AnimatedBuilder
Animated是不是最佳的解決方案呢纲辽？
1.我們每次都要新建一個類來繼承自AnimatedWidget
2.如果我們的動畫Widget有子Widget颜武，那么意味著它的子Widget也會重新build
如何可以優(yōu)化上面的操作呢？AnimatedBuilder
class _AnimationDemo01State extends State<AnimationDemo01> with SingleTickerProviderStateMixin {
AnimationController controller;
Animation<double> animation;
@override
void initState() {
super.initState();
// 1.創(chuàng)建AnimationController
controller = AnimationController(duration: Duration(seconds: 1), vsync: this);
// 2.動畫添加Curve效果
animation = CurvedAnimation(parent: controller, curve: Curves.elasticInOut, reverseCurve: Curves.easeOut);
// 3.監(jiān)聽動畫
// 4.控制動畫的翻轉(zhuǎn)
animation.addStatusListener((status) {
if (status == AnimationStatus.completed) {
controller.reverse();
} else if (status == AnimationStatus.dismissed) {
controller.forward();
}
});
// 5.設(shè)置值的范圍
animation = Tween(begin: 50.0, end: 120.0).animate(controller);
}
@override
Widget build(BuildContext context) {
return Center(
child: AnimatedBuilder(
animation: animation,
builder: (ctx, child) {
return Icon(Icons.favorite, color: Colors.red, size: animation.value,);
},
),
);
}
@override
void dispose() {
controller.dispose();
super.dispose();
}
}
三. 其它動畫補(bǔ)充
3.1. 交織動畫
案例說明：
- 點(diǎn)擊floatingActionButton執(zhí)行動畫
- 動畫集合了透明度變化拖吼、大小變化鳞上、顏色變化、旋轉(zhuǎn)動畫等吊档；
- 我們這里是通過多個Tween生成了多個Animation對象篙议；
import 'dart:math';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue, splashColor: Colors.transparent),
home: HYHomePage(),
);
}
}
class HYHomePage extends StatelessWidget {
final GlobalKey<_AnimationDemo01State> demo01Key = GlobalKey();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("列表測試"),
),
body: AnimationDemo01(key: demo01Key),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.play_circle_filled),
onPressed: () {
demo01Key.currentState.controller.forward();
},
),
);
}
}
class AnimationDemo01 extends StatefulWidget {
AnimationDemo01({Key key}): super(key: key);
@override
_AnimationDemo01State createState() => _AnimationDemo01State();
}
class _AnimationDemo01State extends State<AnimationDemo01> with SingleTickerProviderStateMixin {
AnimationController controller;
Animation<double> animation;
Animation<Color> colorAnim;
Animation<double> sizeAnim;
Animation<double> rotationAnim;
@override
void initState() {
super.initState();
// 1.創(chuàng)建AnimationController
controller = AnimationController(duration: Duration(seconds: 2), vsync: this);
// 2.動畫添加Curve效果
animation = CurvedAnimation(parent: controller, curve: Curves.easeIn);
// 3.監(jiān)聽動畫
animation.addListener(() {
setState(() {});
});
// 4.設(shè)置值的變化
colorAnim = ColorTween(begin: Colors.blue, end: Colors.red).animate(controller);
sizeAnim = Tween(begin: 0.0, end: 200.0).animate(controller);
rotationAnim = Tween(begin: 0.0, end: 2*pi).animate(controller);
}
@override
Widget build(BuildContext context) {
return Center(
child: Opacity(
opacity: animation.value,
child: Transform(
alignment: Alignment.center,
transform: Matrix4.rotationZ(animation.value),
child: Container(
width: sizeAnim.value,
height: sizeAnim.value,
color: colorAnim.value,
alignment: Alignment.center,
),
),
),
);
}
@override
void dispose() {
controller.dispose();
super.dispose();
}
}
當(dāng)然，我們可以使用Builder來對代碼進(jìn)行優(yōu)化
@override
Widget build(BuildContext context) {
return Center(
child: AnimatedBuilder(
animation: controller,
builder: (ctx, child) {
return Opacity(
opacity: animation.value,
child: Transform(
alignment: Alignment.center,
transform: Matrix4.rotationZ(rotationAnim.value),
child: Container(
width: sizeAnim.value,
height: sizeAnim.value,
color: colorAnim.value,
alignment: Alignment.center,
),
),
);
},
),
);
}
3.2. Hero動畫
移動端開發(fā)會經(jīng)常遇到類似這樣的需求：
- 點(diǎn)擊一個頭像怠硼，顯示頭像的大圖涡上，并且從原來圖像的Rect到大圖的Rect
- 點(diǎn)擊一個商品的圖片，可以展示商品的大圖拒名，并且從原來圖像的Rect到大圖的Rect
這種跨頁面共享的動畫被稱之為享元動畫（Shared Element Transition）
在Flutter中吩愧，有一個專門的Widget可以來實(shí)現(xiàn)這種動畫效果：Hero
實(shí)現(xiàn)Hero動畫，需要如下步驟：
- 1.在第一個Page1中增显，定義一個起始的Hero Widget雁佳，被稱之為source hero脐帝，并且綁定一個tag；
- 2.在第二個Page2中糖权，定義一個終點(diǎn)的Hero Widget堵腹，被稱之為 destination hero，并且綁定相同的tag星澳；
- 3.可以通過Navigator來實(shí)現(xiàn)第一個頁面Page1到第二個頁面Page2的跳轉(zhuǎn)過程疚顷；
Flutter會設(shè)置Tween來界定Hero從起點(diǎn)到終端的大小和位置，并且在圖層上執(zhí)行動畫效果禁偎。
首頁P(yáng)age代碼：
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:testflutter001/animation/image_detail.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@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("Hero動畫"),
),
body: HYHomeContent(),
);
}
}
class HYHomeContent extends StatelessWidget {
@override
Widget build(BuildContext context) {
return GridView(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 8,
mainAxisSpacing: 8,
childAspectRatio: 2
),
children: List.generate(20, (index) {
String imageURL = "https://picsum.photos/id/$index/400/200";
return GestureDetector(
onTap: () {
Navigator.of(context).push(PageRouteBuilder(
pageBuilder: (ctx, animation, animation2) {
return FadeTransition(
opacity: animation,
child: HYImageDetail(imageURL),
);
}
));
},
child: Hero(
tag: imageURL,
child: Image.network(imageURL)
),
);
}),
);
}
}
圖片展示Page：
import 'package:flutter/material.dart';
class HYImageDetail extends StatelessWidget {
final String imageURL;
HYImageDetail(this.imageURL);
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black,
body: Center(
child: GestureDetector(
onTap: () {
Navigator.of(context).pop();
},
child: Hero(
tag: imageURL,
child: Image.network(
this.imageURL,
width: double.infinity,
fit: BoxFit.cover,
),
)),
),
);
}
}
