亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Flutter Flar動畫使用實戰(zhàn)示例

 更新時間:2023年08月06日 16:09:00   作者:xiangzhihong  
這篇文章主要為大家介紹了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)文章

最新評論