Flare動畫

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

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

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

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

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

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

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

由于Nima主要用于構(gòu)建2D游戲動畫，所以對于Flutter應用開發(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è)計同學完成，開發(fā)同學只需要集成到項目中即可。如果需要為了制作Flare動畫，官方也提供了詳細的Flare動畫制作教程。如果只是想體驗一下Flare動畫的魅力，那么可以使用Rive社區(qū)提供的免費Flare動畫，如下圖所示。

打開一個免費Flare動畫項目，點擊面板中【OPEN IN RIVE】選項打開Flare動畫源文件，然后點擊 【DownLoad】將項目下載到本地，如下圖所示。

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

dependencies:
  …
  rive: ^0.11.8

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

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

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

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

RiveAnimationController控制器

事實上，為了更好的在項目中使用Flare動畫，并對動畫進行精準控制，rive插件提供了一個RiveAnimationController控制器。借助它，開發(fā)者可以很容易的監(jiān)聽Flare動畫的各種狀態(tài)，以及對動畫節(jié)點進行更精準的控制，如下所示。

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)一些復雜的動畫效果。

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

最新評論