前言

我們開始 Flutter 動(dòng)畫相關(guān)篇章之旅，在應(yīng)用中通過(guò)動(dòng)效能夠給用戶帶來(lái)更愉悅的體驗(yàn)，比較典型的例子就是一些直播平臺(tái)的動(dòng)效了，比如送火箭能做出來(lái)那種火箭發(fā)射的動(dòng)效——感覺(jué)倍有面子，當(dāng)然這是土豪的享受，我等碼農(nóng)只在視頻里看過(guò)。本篇我們來(lái)介紹基于 Animation 類實(shí)現(xiàn)的基本動(dòng)畫構(gòu)建。

Animation 簡(jiǎn)介

Animation 是一個(gè)抽象類，它并不參與屏幕的繪制，而是在設(shè)定的時(shí)間范圍內(nèi)對(duì)一段區(qū)間值進(jìn)行插值。插值的方式可以是線性、曲線、一個(gè)階躍函數(shù)或其他能夠想到的方式。這個(gè)類的對(duì)象能夠知道當(dāng)前的值和狀態(tài)（完成或消失）。Animation 類提供了一個(gè)監(jiān)聽回調(diào)方法，當(dāng)它的值改變的時(shí)候，就會(huì)調(diào)用該方法：

@override
void?addListener(VoidCallback?listener);

因此，在監(jiān)聽回調(diào)里，我們可以來(lái)刷新界面，通過(guò)Animation 對(duì)象最新的值控制 UI 組件的位置、尺寸、角度，從而實(shí)現(xiàn)動(dòng)畫的效果。Animation 類通常會(huì)和 AnimationController 一起使用。

AnimationController 簡(jiǎn)介

AnimationController 是一個(gè)特殊的 Animation 類，它繼承自 Animation<double>。每當(dāng)硬件準(zhǔn)備好繪制下一幀時(shí)，AnimationController就會(huì)產(chǎn)生一個(gè)新的值。默認(rèn)情況下 AnimationController 會(huì)在給定的時(shí)間范圍內(nèi)產(chǎn)生的值是從0到1.0的線性序列值（通常60個(gè)值/秒，以達(dá)到60 fps的效果）。例如，下面的代碼構(gòu)建一個(gè)時(shí)長(zhǎng)為2秒的 AnimationController。

var?controller?=
????AnimationController(duration:?const?Duration(seconds:?2),?vsync:?this);

AnimationController 具有 forward，reverse等控制動(dòng)畫的方法，通常用于控制動(dòng)畫的開始和恢復(fù)。

連接 Animation 和 AnimationController 的是 Animatable類，該類也是一個(gè)抽象類， 常用的的實(shí)現(xiàn)類包括 Tween<T>（線性插值），CurveTween（曲線插值）。Animatable 類有一個(gè) animate 方法，該方法接收 Animation<double>類參數(shù)（通常是 AnimationController），并返回一個(gè) Animation 對(duì)象。

Animation<T>?animate(Animation<double>?parent)?{
??return?_AnimatedEvaluation<T>(parent,?this);
}

animate方法使用給定的 Animation<double>對(duì)象驅(qū)動(dòng)完成動(dòng)效，但使用的值的范圍是自身的值，從而可以構(gòu)建自定義值范圍的動(dòng)效。比如，要構(gòu)建一個(gè)2秒內(nèi)從0增長(zhǎng)100的動(dòng)效值，可以使用如下的代碼。

var?controller?=
????????AnimationController(duration:?const?Duration(seconds:?2),?vsync:?this);
var?animation?=?Tween<double>(begin:?0,?end:?100).animate(controller);

應(yīng)用 - 愛(ài)心三連

有了上面的基礎(chǔ)，我們就可以開始牛刀小試了，我們先來(lái)一個(gè)愛(ài)心三連放大縮小的動(dòng)效，如下所示，首次點(diǎn)擊逐漸放大，再次點(diǎn)擊逐漸縮小恢復(fù)到原樣。

界面代碼很簡(jiǎn)單，三個(gè)愛(ài)心其實(shí)就是使用Stack 將三個(gè)不同顏色的愛(ài)心 Icon 組件疊加在一起，然后通過(guò) Animtion對(duì)象的值改變 Icon 的大小。在 Animation 值變化的監(jiān)聽回調(diào)里使用 setState 刷新界面就好了。完整代碼如下：

import?'package:flutter/material.dart';

class?AnimtionDemo?extends?StatefulWidget?{
??const?AnimtionDemo({Key??key})?:?super(key:?key);

??@override
??_AnimtionDemoState?createState()?=>?_AnimtionDemoState();
}

class?_AnimtionDemoState?extends?State<AnimtionDemo>
????with?SingleTickerProviderStateMixin?{
??late?Animation<double>?animation;
??late?AnimationController?controller;

??@override
??void?initState()?{
????super.initState();
????controller?=
????????AnimationController(duration:?const?Duration(seconds:?1),?vsync:?this);
????animation?=?Tween<double>(begin:?40,?end:?100).animate(controller)
??????..addListener(()?{
????????setState(()?{});
??????});
????controller.addStatusListener((status)?{
??????print(status);
????});
??}

??@override
??Widget?build(BuildContext?context)?{
????return?Scaffold(
??????appBar:?AppBar(
????????title:?Text('Animation?動(dòng)畫'),
??????),
??????body:?Center(
????????child:?Stack(
??????????alignment:?Alignment.center,
??????????children:?[
????????????Icon(
??????????????Icons.favorite,
??????????????color:?Colors.red[100],
??????????????size:?animation.value?*?1.5,
????????????),
????????????Icon(
??????????????Icons.favorite,
??????????????color:?Colors.red[400],
??????????????size:?animation.value,
????????????),
????????????Icon(
??????????????Icons.favorite,
??????????????color:?Colors.red[600],
??????????????size:?animation.value?/?2,
????????????),
??????????],
????????),
??????),
??????floatingActionButton:?FloatingActionButton(
????????child:?Icon(Icons.play_arrow,?color:?Colors.white),
????????onPressed:?()?{
??????????if?(controller.status?==?AnimationStatus.completed)?{
????????????controller.reverse();
??????????}?else?{
????????????controller.forward();
??????????}
????????},
??????),
????);
??}

??@override
??void?dispose()?{
????controller.dispose();
????super.dispose();
??}
}

這里需要提的是在_AnimtionDemoState中混入了SingleTickerProviderStateMixin，這里其實(shí)是為 AnimationController 提供了一個(gè) TickerProivder 對(duì)象。TickerProivder對(duì)象會(huì)在每一幀刷新前觸發(fā)一個(gè) onTick回調(diào)，從而實(shí)現(xiàn)AnimationController的值更新。

總結(jié)

本篇介紹了Flutter 動(dòng)畫構(gòu)建類 Animation 和 AnimationController 的使用，通過(guò)這兩個(gè)類可以實(shí)現(xiàn)很多基礎(chǔ)動(dòng)畫效果，例如常見(jiàn)的進(jìn)度條、縮放、旋轉(zhuǎn)、移動(dòng)等。接下來(lái)我們還將介紹基于 Animation 實(shí)現(xiàn)動(dòng)畫的其他方式和其他類型的動(dòng)畫效果。

到此這篇關(guān)于基于Flutter實(shí)現(xiàn)愛(ài)心三連動(dòng)畫效果的文章就介紹到這了,更多相關(guān)Flutter愛(ài)心三連動(dòng)畫內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！