Flutter上線專案實戰——Vap視訊動畫

背景

透明視訊動畫是目前比較流行的實現動畫的一種, 大廠也相繼開源自己的框架，最終我們選中騰訊vap，它支援了Android、IOS、Web，為我們封裝flutter_vap提供了天然的便利，並且它提供了將幀圖片生成帶alpha通道視訊的工具，這簡直太讚了。

VAP（Video Animation Player）是企鵝電競開發，用於播放酷炫動畫的實現方案。

• 相比Webp, Apng動圖方案，具有高壓縮率(素材更小)、硬體解碼(解碼更快)的優點
• 相比Lottie，能實現更復雜的動畫效果(比如粒子特效)

預覽

video for youtube

video for qiniu

apk download

安裝

flutter_vap: ${last_version}
複製程式碼

使用

1. 播放本地視訊

  import 'package:flutter_vap/flutter_vap.dart';

  /// return: play error:       {"status": "failure", "errorMsg": ""}
  ///         play complete:    {"status": "complete"}
  Future<Map<dynamic, dynamic>> _playFile(String path) async {
    if (path == null) {
      return null;
    }
    var res = await VapController.playPath(path);
    if (res["status"] == "failure") {
      showToast(res["errorMsg"]);
    }
    return res;
  }
複製程式碼

2. 播放asset視訊

  Future<Map<dynamic, dynamic>> _playAsset(String asset) async {
    if (asset == null) {
      return null;
    }
    var res = await VapController.playAsset(asset);
    if (res["status"] == "failure") {
      showToast(res["errorMsg"]);
    }
    return res;
  }
複製程式碼

3. 停止播放

  VapController.stop()
複製程式碼

4. 佇列播放

  _queuePlay() async {
    // 模擬多個地方同時呼叫播放,使得佇列執行播放。
    QueueUtil.get("vapQueue").addTask(() => VapController.playPath(downloadPathList[0]));
    QueueUtil.get("vapQueue").addTask(() => VapController.playPath(downloadPathList[1]));
  }
複製程式碼

5. 取消佇列播放

  QueueUtil.get("vapQueue").cancelTask();
複製程式碼

例子

github