基于Flutter實現(xiàn)愛心三連動畫效果
前言
我們開始 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個值/秒,以達到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)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Android5.0+ CollapsingToolbarLayout使用詳解
這篇文章主要為大家詳細介紹了Android5.0+ CollapsingToolbarLayout使用,感興趣的小伙伴們可以參考一下2016-09-09Android使用TextView實現(xiàn)無下劃線超鏈接的方法
這篇文章主要介紹了Android使用TextView實現(xiàn)無下劃線超鏈接的方法,結(jié)合實例形式分析了Android中TextView超鏈接去除下劃線的相關(guān)實現(xiàn)技巧與注意事項,需要的朋友可以參考下2016-08-08Android實現(xiàn)帶動畫效果的可點擊展開TextView
這篇文章主要為大家詳細介紹了Android實現(xiàn)帶動畫效果的可點擊展開TextView,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-07-07