Flare動(dòng)畫

在Flare動(dòng)畫出現(xiàn)之前，F(xiàn)lare動(dòng)畫大體可以分為使用AnimationController控制的基礎(chǔ)動(dòng)畫以及使用Hero的轉(zhuǎn)場動(dòng)畫，如果遇到一些復(fù)雜的場景，使用這些動(dòng)畫方案實(shí)現(xiàn)起來還是有難度的。

不過，隨著Flutter開始支持Flare矢量動(dòng)面，F(xiàn)lutter的動(dòng)畫開發(fā)也變得越來越簡單。事實(shí)上，F(xiàn)lare動(dòng)畫是一種類似于Lottie的矢量動(dòng)畫方案，使用Flare動(dòng)面不僅可以有效減少安裝包的體積，還能實(shí)現(xiàn)傳統(tǒng)動(dòng)畫方案無法實(shí)現(xiàn)的復(fù)雜動(dòng)畫效果。

Flare矢量動(dòng)畫的網(wǎng)站

Rive是一個(gè)專業(yè)制作Flare矢量動(dòng)畫的網(wǎng)站，網(wǎng)站本身提供了很多免費(fèi)Flare動(dòng)畫供開發(fā)者下載學(xué)習(xí)。除此之外，Rive還提供了Flare動(dòng)畫的使用和制作教程。為了便于學(xué)習(xí)和使用Rive網(wǎng)站的Flare動(dòng)畫，需要先注冊一個(gè)Rive官方賬號(hào)，如下圖所示。

Rive以工程形式來創(chuàng)建和管理Flare動(dòng)畫項(xiàng)目，目前支持創(chuàng)建的Flare動(dòng)畫項(xiàng)目類型有兩類，分別是Nima和Flare，區(qū)別如下：

• Nima：僅支持光柵圖，主要用來為游戲引擎和應(yīng)用構(gòu)建2D動(dòng)畫。

• Flare：支持矢量圖與光柵圖，主要用來為移動(dòng)App和Web構(gòu)建實(shí)時(shí)、高效的動(dòng)畫，同時(shí)還支持構(gòu)建游戲動(dòng)畫。

由于Nima主要用于構(gòu)建2D游戲動(dòng)畫，所以對于Flutter應(yīng)用開發(fā)來說，只需要新建一個(gè)Flare類型的項(xiàng)目即可。

創(chuàng)建Flare項(xiàng)目

目前，創(chuàng)建Flare項(xiàng)目主要有兩種方式，一種是在Rive官網(wǎng)中進(jìn)行創(chuàng)建，另一種則是通過Rive的客戶端進(jìn)行創(chuàng)建。此處以Rive客戶端方式來說明如何創(chuàng)建Flare項(xiàng)目，如下圖所示。

首先，打開Rive客戶端，然后點(diǎn)擊右上角的新建按鈕創(chuàng)建一個(gè) Flare空項(xiàng)目，然后就可以開始設(shè)計(jì)了，如下圖所示。

不過，設(shè)計(jì)并制作Flare動(dòng)畫是一項(xiàng)專業(yè)性極強(qiáng)的工作，一般都由設(shè)計(jì)同學(xué)完成，開發(fā)同學(xué)只需要集成到項(xiàng)目中即可。如果需要為了制作Flare動(dòng)畫，官方也提供了詳細(xì)的Flare動(dòng)畫制作教程。如果只是想體驗(yàn)一下Flare動(dòng)畫的魅力，那么可以使用Rive社區(qū)提供的免費(fèi)Flare動(dòng)畫，如下圖所示。

打開一個(gè)免費(fèi)Flare動(dòng)畫項(xiàng)目，點(diǎn)擊面板中【OPEN IN RIVE】選項(xiàng)打開Flare動(dòng)畫源文件，然后點(diǎn)擊 【DownLoad】將項(xiàng)目下載到本地，如下圖所示。

可以看到，下載到本地的Flare動(dòng)畫文件是.riv格式的文件，也是Flare動(dòng)面需要加載的文件。需要注意的是，F(xiàn)lutter默認(rèn)情況下是不識(shí)別Flare動(dòng)畫文件的，開發(fā)前需要我們先安裝一下rive插件庫，如下所示。

dependencies:
  …
  rive: ^0.11.8

接著，將之前下載到本地的Flare動(dòng)畫文件拷貝到assets資源文件中，然后在pubspec.yaml配置文件中注冊動(dòng)畫文件?，F(xiàn)在，我們就可以使用rive庫提供的RiveAnimation組件來加載這個(gè)動(dòng)畫文件，如下所示。

RiveAnimation.asset('assets/rocket.riv')

其中，asset表示動(dòng)畫文件的路徑，是一個(gè)必傳參數(shù)。除了支持加載項(xiàng)目本地的文件外，RiveAnimation還支持網(wǎng)絡(luò)圖片。

同時(shí)，一個(gè)Flare動(dòng)畫文件是由多個(gè)動(dòng)畫節(jié)點(diǎn)構(gòu)成的，通過這些動(dòng)畫節(jié)點(diǎn)，我們就可以很容易對動(dòng)畫進(jìn)行精準(zhǔn)的控制。我們可以打開Flare動(dòng)畫文件，然后在源文件面板的左下角來查看這些動(dòng)畫節(jié)點(diǎn)，如下圖所示。

RiveAnimationController控制器

事實(shí)上，為了更好的在項(xiàng)目中使用Flare動(dòng)畫，并對動(dòng)畫進(jìn)行精準(zhǔn)控制，rive插件提供了一個(gè)RiveAnimationController控制器。借助它，開發(fā)者可以很容易的監(jiān)聽Flare動(dòng)畫的各種狀態(tài)，以及對動(dòng)畫節(jié)點(diǎn)進(jìn)行更精準(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組件加載了一個(gè)本地Flare動(dòng)畫，然后再通過RiveAnimationController來控制動(dòng)畫的啟動(dòng)與運(yùn)行。可以發(fā)現(xiàn)，相比傳統(tǒng)的動(dòng)畫方案，F(xiàn)lare動(dòng)畫更加靈活，可以用它來實(shí)現(xiàn)一些復(fù)雜的動(dòng)畫效果。

以上就是Flutter Flar動(dòng)畫使用實(shí)戰(zhàn)示例的詳細(xì)內(nèi)容，更多關(guān)于Flutter Flar動(dòng)畫效果的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論