Flare動(dòng)畫(huà)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

dependencies:
  …
  rive: ^0.11.8

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

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

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

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

RiveAnimationController控制器

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

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

最新評(píng)論