作者：京東物流沈明亮

在App開發程序中，如果想實作影片效果，可以粗略分為兩種方式，一種是直接用代碼撰寫，像平移、旋轉等簡單的影片效果，都可以這么干，如果稍微復雜點，就會對開發工程師的數學功底、圖形影像學功底有很高的要求，

另一種方式，可以讓UI同學配合，一次性出多張圖片或者直接出一張GIF圖，通過短時間內快速輪播圖片的方式來實作復雜影片效果，這種方式真正實作起來還是有挺多問題的，比如缺少對影片程序的控制、圖片尺寸的適配等等，那么，有沒有更好的解決方案呢？

有的，Rive，

簡介

Rive是專門為簡化影片的實作而生的，設計師可以在其官網通過拖拉拽實作各種復雜影片效果，設計完畢后匯出影片檔案，工程師可以在App里直接匯入此檔案，配合相應的SDK即可實作，

其官網有詳細的開發檔案，同時也有自己的社區資源，我們可以直接從社區里下載別人設計好的影片效果進行學習，另外特別重要的是，Rive支持跨平臺，同時支持Android、iOS、Flutter、JS、React、C++等等，本文以Flutter的實作為例介紹，

一個完整的例子

登陸Rive官網進行設計，并匯出相應的影片檔案，Rive的影片檔案是以.riv結尾，

本文示例是從官網的社區里找的一個個人比較喜歡的動效，

依次運行下面的命令，引入rive sdk，

將匯出的.riv檔案放到資源目錄下，并修改pubspec.yaml檔案，

加載影片檔案并展示的核心代碼：

核心代碼就這么多，對于代碼中的標注詳細說明下：

標注1的地方，主要作用是獲取狀態機控制器，fromArtboard 方法有兩個引數，第二個引數是狀態機的名稱，這個名稱需要和UI同學協商好，一旦確定好名稱就不允許設計同學再改了，對應于設計面板界面的左下角，如下圖：

標注2的地方，本例的影片是根據“數值”的變化而變化的，findInput的入參同樣需要和UI同學協商好，一旦設計時把這個名字改了，代碼里也別忘了進行相應的修改，也在設計面板的左下角，在狀態機名稱的右邊，如下圖：

完整的代碼如下，大家可以按步驟自己操作體驗下，

class RiveDemo extends StatefulWidget {
  const RiveDemo({Key? key}) : super(key: key);

  @override
  State<RiveDemo> createState() => _RiveDemoState();
}

class _RiveDemoState extends State<RiveDemo> {
  /// 狀態機控制器
  StateMachineController? controller;
  /// 控制輸入數值
  SMIInput<double>? valueController;
  ///畫板，配合Rive widget 使用，展示影片效果，
  Artboard? riveArtboard;
  Timer? timer;

  @override
  void initState() {
    super.initState();
    //加載
    rootBundle.load('asset/rives/rive_demo.riv').then((value) async {
      final file = RiveFile.import(value);
      final artboard = file.mainArtboard;
      //1
      controller = StateMachineController.fromArtboard(artboard, 'TreeMachine');
      if (controller != null) {
        setState(() {
          artboard.addController(controller!);
          //2
          valueController = controller!.findInput('input');
          valueController!.value = https://www.cnblogs.com/jingdongkeji/archive/2023/04/23/-4;
        });
      }

      riveArtboard = artboard;
    });
  }

  @override
  void dispose() {
    controller?.dispose();
    stopAnimation();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Rive Demo'),
      ),
      backgroundColor: Colors.white,
      body: Center(
        child: riveArtboard == null ? const CircularProgressIndicator() : Rive(artboard: riveArtboard!),
      ),
      floatingActionButton: SizedBox(
        height: 50,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
            TextButton(
              onPressed: () {
                startAnimation();
              },
              child: const Text('start'),
            ),
            TextButton(
              onPressed: () {
                stopAnimation();
              },
              child: const Text('stop'),
            ),
            TextButton(
              onPressed: () {
                resetAnimation();
              },
              child: const Text('reset'),
            ),
          ],
        ),
      ),
    );
  }

  /// 開始影片
  void startAnimation() {
    if (timer != null) {
      return;
    }
    timer = Timer.periodic(const Duration(milliseconds: 60), (timer) {
      valueController?.value += 0.5;
    });
  }

  /// 停止影片
  void stopAnimation() {
    timer?.cancel();
    timer = null;
  }

  /// 重置影片
  void resetAnimation() {
    stopAnimation();
    valueController?.value = https://www.cnblogs.com/jingdongkeji/archive/2023/04/23/0;
  }
}

總結

像本例中的影片效果，如果用代碼來撰寫，時間成本會很大很大，如果靠圖片的堆積，實作起來也很麻煩，而且由于圖片的數量增多，安裝包的體積也會增加很多，但是用rive，實作起來卻很方便，可能唯一的成本就是設計師同學的學習成本，

Rive不僅支持本地影片檔案的加載，還可以將影片檔案放到服務器上，利用RiveAnimation.network方法進行加載，更多的使用示例可以參考：
https://github.com/rive-app/rive-flutter/tree/master/example

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/551011.html

標籤：其他

上一篇：Android Studio的安裝及環境配置

下一篇：返回列表

App復雜影片實作——Rive保姆級教程

簡介

一個完整的例子

總結