快捷導(dǎo)航

基于Flutter實現(xiàn)愛心三連動畫效果

更新時間：2022年03月24日 09:53:12 作者：島上碼農(nóng)

Animation是一個抽象類，它并不參與屏幕的繪制，而是在設(shè)定的時間范圍內(nèi)對一段區(qū)間值進行插值。本文將利用Animation制作一個愛心三連動畫效果，感興趣的可以學(xué)習(xí)一下

前言

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

Animation 簡介

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

@override
void?addListener(VoidCallback?listener);

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

AnimationController 簡介

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

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

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

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

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

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

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

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

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

界面代碼很簡單，三個愛心其實就是使用Stack 將三個不同顏色的愛心 Icon 組件疊加在一起，然后通過 Animtion對象的值改變 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?動畫'),
??????),
??????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，這里其實是為 AnimationController 提供了一個 TickerProivder 對象。TickerProivder對象會在每一幀刷新前觸發(fā)一個 onTick回調(diào)，從而實現(xiàn)AnimationController的值更新。

總結(jié)

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

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

您可能感興趣的文章: