Flutter Flar動畫使用實戰(zhàn)示例
Flare動畫
在Flare動畫出現(xiàn)之前,F(xiàn)lare動畫大體可以分為使用AnimationController控制的基礎(chǔ)動畫以及使用Hero的轉(zhuǎn)場動畫,如果遇到一些復(fù)雜的場景,使用這些動畫方案實現(xiàn)起來還是有難度的。
不過,隨著Flutter開始支持Flare矢量動面,F(xiàn)lutter的動畫開發(fā)也變得越來越簡單。事實上,F(xiàn)lare動畫是一種類似于Lottie的矢量動畫方案,使用Flare動面不僅可以有效減少安裝包的體積,還能實現(xiàn)傳統(tǒng)動畫方案無法實現(xiàn)的復(fù)雜動畫效果。
Flare矢量動畫的網(wǎng)站
Rive是一個專業(yè)制作Flare矢量動畫的網(wǎng)站,網(wǎng)站本身提供了很多免費Flare動畫供開發(fā)者下載學(xué)習(xí)。除此之外,Rive還提供了Flare動畫的使用和制作教程。為了便于學(xué)習(xí)和使用Rive網(wǎng)站的Flare動畫,需要先注冊一個Rive官方賬號,如下圖所示。
Rive以工程形式來創(chuàng)建和管理Flare動畫項目,目前支持創(chuàng)建的Flare動畫項目類型有兩類,分別是Nima和Flare,區(qū)別如下:
• Nima:僅支持光柵圖,主要用來為游戲引擎和應(yīng)用構(gòu)建2D動畫。
• Flare:支持矢量圖與光柵圖,主要用來為移動App和Web構(gòu)建實時、高效的動畫,同時還支持構(gòu)建游戲動畫。
由于Nima主要用于構(gòu)建2D游戲動畫,所以對于Flutter應(yīng)用開發(fā)來說,只需要新建一個Flare類型的項目即可。
創(chuàng)建Flare項目
目前,創(chuàng)建Flare項目主要有兩種方式,一種是在Rive官網(wǎng)中進行創(chuàng)建,另一種則是通過Rive的客戶端進行創(chuàng)建。此處以Rive客戶端方式來說明如何創(chuàng)建Flare項目,如下圖所示。
首先,打開Rive客戶端,然后點擊右上角的新建按鈕創(chuàng)建一個 Flare空項目,然后就可以開始設(shè)計了,如下圖所示。
不過,設(shè)計并制作Flare動畫是一項專業(yè)性極強的工作,一般都由設(shè)計同學(xué)完成,開發(fā)同學(xué)只需要集成到項目中即可。如果需要為了制作Flare動畫,官方也提供了詳細的Flare動畫制作教程。如果只是想體驗一下Flare動畫的魅力,那么可以使用Rive社區(qū)提供的免費Flare動畫,如下圖所示。
打開一個免費Flare動畫項目,點擊面板中【OPEN IN RIVE】選項打開Flare動畫源文件,然后點擊 【DownLoad】將項目下載到本地,如下圖所示。
可以看到,下載到本地的Flare動畫文件是.riv格式的文件,也是Flare動面需要加載的文件。需要注意的是,F(xiàn)lutter默認(rèn)情況下是不識別Flare動畫文件的,開發(fā)前需要我們先安裝一下rive插件庫,如下所示。
dependencies: … rive: ^0.11.8
接著,將之前下載到本地的Flare動畫文件拷貝到assets資源文件中,然后在pubspec.yaml配置文件中注冊動畫文件?,F(xiàn)在,我們就可以使用rive庫提供的RiveAnimation組件來加載這個動畫文件,如下所示。
RiveAnimation.asset('assets/rocket.riv')
其中,asset表示動畫文件的路徑,是一個必傳參數(shù)。除了支持加載項目本地的文件外,RiveAnimation還支持網(wǎng)絡(luò)圖片。
同時,一個Flare動畫文件是由多個動畫節(jié)點構(gòu)成的,通過這些動畫節(jié)點,我們就可以很容易對動畫進行精準(zhǔn)的控制。我們可以打開Flare動畫文件,然后在源文件面板的左下角來查看這些動畫節(jié)點,如下圖所示。
RiveAnimationController控制器
事實上,為了更好的在項目中使用Flare動畫,并對動畫進行精準(zhǔn)控制,rive插件提供了一個RiveAnimationController控制器。借助它,開發(fā)者可以很容易的監(jiān)聽Flare動畫的各種狀態(tài),以及對動畫節(jié)點進行更精準(zhǔn)的控制,如下所示。
class PlayPauseAnimationState extends State<PlayPauseAnimation> { late RiveAnimationController controller; void togglePlay() => setState(() => controller.isActive = !controller.isActive); bool get isPlaying => controller.isActive; @override void initState() { super.initState(); controller = SimpleAnimation('idle'); } @override Widget build(BuildContext context) { return Scaffold( body: RiveAnimation.asset( 'assets/off_road_car.riv', fit: BoxFit.cover, controllers: [controller], ), floatingActionButton: FloatingActionButton( onPressed: togglePlay, tooltip: isPlaying ? 'Pause' : 'Play', child: Icon(isPlaying ? Icons.pause : Icons.play_arrow), ), ); } }
在上面的代碼中,我們使用RiveAnimation組件加載了一個本地Flare動畫,然后再通過RiveAnimationController來控制動畫的啟動與運行??梢园l(fā)現(xiàn),相比傳統(tǒng)的動畫方案,F(xiàn)lare動畫更加靈活,可以用它來實現(xiàn)一些復(fù)雜的動畫效果。
以上就是Flutter Flar動畫使用實戰(zhàn)示例的詳細內(nèi)容,更多關(guān)于Flutter Flar動畫效果的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
Android Webview的postUrl與loadUrl加載頁面實例
這篇文章主要介紹了Android Webview的postUrl與loadUrl加載頁面實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-03-03Android開發(fā)實現(xiàn)帶清空按鈕的EditText示例
這篇文章主要介紹了Android開發(fā)實現(xiàn)帶清空按鈕的EditText,結(jié)合具體實例形式分析了Android實現(xiàn)EditText清空按鈕功能相關(guān)操作技巧,非常具有實用價值,需要的朋友可以參考下2017-11-11Android 設(shè)置Edittext獲取焦點并彈出軟鍵盤
本文主要介紹了Android設(shè)置Edittext獲取焦點并彈出軟鍵盤的實現(xiàn)代碼。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04Android TextView字體顏色設(shè)置方法小結(jié)
這篇文章主要介紹了Android TextView字體顏色設(shè)置方法,結(jié)合實例形式總結(jié)分析了Android開發(fā)中TextView設(shè)置字體顏色的常用技巧,需要的朋友可以參考下2016-02-02Android編程實現(xiàn)自定義ImageView圓圖功能的方法
這篇文章主要介紹了Android編程實現(xiàn)自定義ImageView圓圖功能的方法,結(jié)合實例形式分析了Android自定義ImageView及實現(xiàn)圓圖效果的具體步驟與相關(guān)操作技巧,需要的朋友可以參考下2017-08-08Android實現(xiàn)ListView的A-Z字母排序和過濾搜索功能 實現(xiàn)漢字轉(zhuǎn)成拼音
這篇文章主要為大家詳細介紹了Android實現(xiàn)ListView的A-Z字母排序和過濾搜索功能,實現(xiàn)漢字轉(zhuǎn)成拼音功能2017-06-06Android 沉浸式狀態(tài)欄與隱藏導(dǎo)航欄實例詳解
沉浸式狀態(tài)欄是指狀態(tài)欄與ActionBar顏色相匹配,隱藏導(dǎo)航欄,就是將導(dǎo)航欄隱藏,去掉下面的黑條。下面通過實例給大家詳解android沉浸式狀態(tài)欄與隱藏導(dǎo)航欄,感興趣的朋友一起看看2017-07-07