????對于一個前端的App來說两波，添加適當(dāng)?shù)膭赢嫞梢越o用戶更好的體驗和視覺效果。所以無論是原生的iOS或Android适荣，還是前端開發(fā)中都會提供完成某些動畫的API现柠。
????Flutter有自己的渲染閉環(huán)，我們當(dāng)然可以給它提供一定的數(shù)據(jù)模型弛矛，來讓它幫助我們實現(xiàn)對應(yīng)的動畫效果够吩。
一. 動畫API認(rèn)識
????動畫其實是我們通過某些方式（比如對象，Animation對象）給Flutter引擎提供不同的值丈氓，而Flutter可以根據(jù)我們提供的值周循，給對應(yīng)的Widget添加順滑的動畫效果。
????針對動畫這個章節(jié)万俗，我打算先理清楚他們的API關(guān)系和作用湾笛，再來講解如何利用這些API來實現(xiàn)不同的動畫效果。
1.1. Animation
在Flutter中该编，實現(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)建。
????addStatusListener
????????當(dāng)動畫的狀態(tài)發(fā)生變化時迂曲，會通知所有通過 addStatusListener 添加的監(jiān)聽器靶橱。
????????通常情況下，動畫會從 dismissed 狀態(tài)開始路捧，表示它處于變化區(qū)間的開始點关霸。
????????舉例來說，從 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é)束點（比如 1.0）章姓，則動畫會變成 completed 狀態(tài)佳遣。
abstractclass 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)建對象實現(xiàn)動畫的使用凡伊。
AnimationController是Animation的一個子類零渐，實現(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的一個實現(xiàn)類，它的目的是為了給AnimationController增加動畫曲線：
????CurvedAnimation可以將AnimationController和Curve結(jié)合起來歉铝，生成一個新的Animation對象
class CurvedAnimation extends Animation<double> with AnimationWithParentMixin<double> {
? CurvedAnimation({
? ? // 通常傳入一個AnimationController
? ? @requiredthis.parent,
? ? // Curve類型的對象
? ? @requiredthis.curve,
? ? this.reverseCurve,
? });
}
Curve類型的對象的有一些常量Curves（和Color類型有一些Colors是一樣的）盈简，可以供我們直接使用：
????對應(yīng)值的效果，可以直接查看官網(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. 動畫的基本使用
我們來完成一個案例：
????點擊案例后執(zhí)行一個心跳動畫剧董，可以反復(fù)執(zhí)行
????再次點擊可以暫停和重新開始動畫
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();
? ? ? } elseif (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();
? ? ? } elseif (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();
? ? ? } elseif (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. 交織動畫
案例說明：
????點擊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)常遇到類似這樣的需求：
????點擊一個頭像列另，顯示頭像的大圖，并且從原來圖像的Rect到大圖的Rect
????點擊一個商品的圖片页衙，可以展示商品的大圖，并且從原來圖像的Rect到大圖的Rect
這種跨頁面共享的動畫被稱之為享元動畫（Shared Element Transition）
在Flutter中艰躺，有一個專門的Widget可以來實現(xiàn)這種動畫效果：Hero
實現(xiàn)Hero動畫眨八，需要如下步驟：
????1.在第一個Page1中，定義一個起始的Hero Widget页响，被稱之為source hero段誊，并且綁定一個tag闰蚕；
????2.在第二個Page2中没陡，定義一個終點的Hero Widget，被稱之為 destination hero盼玄，并且綁定相同的tag；
????3.可以通過Navigator來實現(xiàn)第一個頁面Page1到第二個頁面Page2的跳轉(zhuǎn)過程埃儿；
Flutter會設(shè)置Tween來界定Hero從起點到終端的大小和位置，并且在圖層上執(zhí)行動畫效果青灼。
首頁Page代碼：
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
圖片展示Page
import'package:flutter/material.dart';
class HYImageDetail extends StatelessWidget {
? finalString 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,
? ? ? ? ? ? ),
? ? ? ? ? )),
? ? ? ),
? ? );
? }
}
