在這之前，我們介紹了關於 Lottie 一個近年來常見的動畫解決方案。然而隨著技術的進步，現在我們還可以選擇一個更強大的替代品 - Rive。

基本上 Rive 是一個製作動畫的新格式，感覺類似於那個已經被時代淘汰的 Flash。Rive 包含專屬的編輯器和執行環境，可以在幾乎主流平台上播放，甚至可以製作互動內容。

Rive v.s Lottie

1. 性能上 Rive 比 Lottie 的檔案更小，效能更好，消耗的記憶體更少。
2. Rive 支援互動設計，可以根據使用者輸入、外部的觸發器等等即時改變動畫的狀態。
3. 更加完整的工作流程。
4. 支援協作功能。

雖然我們上面提了這些優點，但關於 Lottie 還是有其優勢：

1. 廣泛的社群支援和資源。
2. 對設計師來說 After Effect 可能更加熟悉。
3. After Effects 提供大量的效果，適合複雜的動畫需求。

想知道 Rive 可以做到什麼程度我們不如直接看看一些分享的案例 Community Files

Flutter 整合 Rive 快速入門

1. 安裝插件：

$ flutter pub add rive

2. 匯入函式庫：

import 'package:rive/rive.dart';

3. 加入 RiveAnimation 組件，此時，有 3 種不同的方式可以整合 Rive 動畫

使用 URL

RiveAnimation.network(
	'https://cdn.rive.app/animations/vehicles.riv'
)

使用資源包 Asset Bundle 首先要先確認 Rive 檔案加入 pubspec.yaml

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

assets:
	- assets/vehicles.riv

若會多次使用相同的 Rive 檔案，我們可以建立一個 RiveFile 物件實例並直接使用 RiveAnimation 載入，如此檔案只會載入一次。

final riveFile = await RiveFile.asset('assets/truck.riv');

RiveAnimation.direct(riveFile)

Rive 檔案快取

在大部分的情況下 .riv 檔案應該很快能載入，自行管理 RiveFile 通常並非必要。但如果如上面提到的你會在整個程式很多地方或同一個畫面使用相同的 .riv 檔案，那麼一次性載入並保留在記憶體中會比較好。

class PreloadRive extends StatefulWidget {
  const PreloadRive({ super.key });
  
  @override
  State<PreloadRive> createState() => _PreloadRiveState();
}

class _PreloadRiveState extends State<PreloadRive> {
  RiveFile? _file;
  
  @override
  void initState() {
    super.initState();
    preload();
  }
  
  Future<void> preload() async {
    rootBundle.load('assets/vehicles.riv').then(
      (data) async {
        setState(() {
          _file = RiveFile.import(data);
        });
      },
    );
  }
  
  @override
  Widget build(BuildContext context) {
    return (_file == null)
        ? const SizedBox.shrink()
        : RiveAnimation.direct(_file!);
  }
}

播放和暫停

Rive 可以讓我們指定使用哪個畫板（Artboard）、哪個動畫以及控制動畫的播放/暫停狀態。

class _MyRiveState extends State<MyRive> {
  late RiveAnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = SimpleAnimation('idle');
  }

  void _togglePlay() {
    setState(() {
      _controller.isActive = !_controller.isActive;
    });
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: _togglePlay,
      child: RiveAnimation.asset(
        'assets/my_animation.riv',
        controllers: [_controller],
      ),
    );
  }
}

總結

總的來說，Rive 提供了一個強大的工具，能夠建立更加豐富、互動性更強的使用者介面。非常有潛力成為未來動畫開發的主流選擇。然而，選擇使用 Rive 還是 Lottie，應該根據項目的具體需求、團隊的技能組合以及對效能和互動性的要求來決定。

這篇文章的重點在于為大家分享多一些資訊和初步嘗試使用。慢慢的我們對於 Flutter 不再只是簡單的概念，我們對於各種常見的實務需求也認識了各種解決方案。進一步評估和我們既有的解決方案分析比較，做出選擇等。