????對于一個前端的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 狀態。
abstractclass 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對象
class CurvedAnimation extends Animation<double> with AnimationWithParentMixin<double> {
? CurvedAnimation({
? ? // 通常傳入一個AnimationController
? ? @requiredthis.parent,
? ? // Curve類型的對象
? ? @requiredthis.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.animate
要使用Tween對象，需要調用Tween的animate()方法，傳入一個Animation對象。
二. 動畫案例練習
2.1. 動畫的基本使用
我們來完成一個案例：
????點擊案例后執行一個心跳動畫，可以反復執行
????再次點擊可以暫停和重新開始動畫
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.創建AnimationController
? ? controller = AnimationController(duration: Duration(seconds: 1), vsync: this);
? ? // 2.動畫添加Curve效果
? ? animation = CurvedAnimation(parent: controller, curve: Curves.elasticInOut, reverseCurve: Curves.easeOut);
? ? // 3.監聽動畫
? ? animation.addListener(() {
? ? ? setState(() {});
? ? });
? ? // 4.控制動畫的翻轉
? ? animation.addStatusListener((status) {
? ? ? if (status == AnimationStatus.completed) {
? ? ? ? controller.reverse();
? ? ? } elseif (status == AnimationStatus.dismissed) {
? ? ? ? controller.forward();
? ? ? }
? ? });
? ? // 5.設置值的范圍
? ? 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
在上面的代碼中，我們必須監聽動畫值的改變，并且改變后需要調用setState，這會帶來兩個問題：
????1.執行動畫必須包含這部分代碼，代碼比較冗余
????2.調用setState意味著整個State類中的build方法就會被重新build
如何可以優化上面的操作呢？AnimatedWidget
創建一個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.創建AnimationController
? ? controller = AnimationController(duration: Duration(seconds: 1), vsync: this);
? ? // 2.動畫添加Curve效果
? ? animation = CurvedAnimation(parent: controller, curve: Curves.elasticInOut, reverseCurve: Curves.easeOut);
? ? // 3.監聽動畫
? ? // 4.控制動畫的翻轉
? ? animation.addStatusListener((status) {
? ? ? if (status == AnimationStatus.completed) {
? ? ? ? controller.reverse();
? ? ? } elseif (status == AnimationStatus.dismissed) {
? ? ? ? controller.forward();
? ? ? }
? ? });
? ? // 5.設置值的范圍
? ? 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
如何可以優化上面的操作呢？AnimatedBuilder
class _AnimationDemo01State extends State<AnimationDemo01> with SingleTickerProviderStateMixin {
? AnimationController controller;
? Animation<double> animation;
? @override
? void initState() {
? ? super.initState();
? ? // 1.創建AnimationController
? ? controller = AnimationController(duration: Duration(seconds: 1), vsync: this);
? ? // 2.動畫添加Curve效果
? ? animation = CurvedAnimation(parent: controller, curve: Curves.elasticInOut, reverseCurve: Curves.easeOut);
? ? // 3.監聽動畫
? ? // 4.控制動畫的翻轉
? ? animation.addStatusListener((status) {
? ? ? if (status == AnimationStatus.completed) {
? ? ? ? controller.reverse();
? ? ? } elseif (status == AnimationStatus.dismissed) {
? ? ? ? controller.forward();
? ? ? }
? ? });
? ? // 5.設置值的范圍
? ? 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();
? }
}
三. 其它動畫補充
3.1. 交織動畫
案例說明：
????點擊floatingActionButton執行動畫
????動畫集合了透明度變化、大小變化、顏色變化、旋轉動畫等；
????我們這里是通過多個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.創建AnimationController
? ? controller = AnimationController(duration: Duration(seconds: 2), vsync: this);
? ? // 2.動畫添加Curve效果
? ? animation = CurvedAnimation(parent: controller, curve: Curves.easeIn);
? ? // 3.監聽動畫
? ? animation.addListener(() {
? ? ? setState(() {});
? ? });
? ? // 4.設置值的變化
? ? 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();
? }
}
當然，我們可以使用Builder來對代碼進行優化
@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動畫
移動端開發會經常遇到類似這樣的需求：
????點擊一個頭像，顯示頭像的大圖，并且從原來圖像的Rect到大圖的Rect
????點擊一個商品的圖片，可以展示商品的大圖，并且從原來圖像的Rect到大圖的Rect
這種跨頁面共享的動畫被稱之為享元動畫（Shared Element Transition）
在Flutter中，有一個專門的Widget可以來實現這種動畫效果：Hero
實現Hero動畫，需要如下步驟：
????1.在第一個Page1中，定義一個起始的Hero Widget，被稱之為source hero，并且綁定一個tag；
????2.在第二個Page2中，定義一個終點的Hero Widget，被稱之為 destination hero，并且綁定相同的tag；
????3.可以通過Navigator來實現第一個頁面Page1到第二個頁面Page2的跳轉過程；
Flutter會設置Tween來界定Hero從起點到終端的大小和位置，并且在圖層上執行動畫效果。
首頁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,
? ? ? ? ? ? ),
? ? ? ? ? )),
? ? ? ),
? ? );
? }
}
