Skip to content

Latest commit

 

History

History
85 lines (69 loc) · 2.36 KB

README_CH.md

File metadata and controls

85 lines (69 loc) · 2.36 KB

背景

透明视频动画是目前比较流行的实现动画的一种, 大厂也相继开源自己的框架,最终我们选中腾讯vap,它支持了Android、IOS、Web,为我们封装flutter_vap提供了天然的便利,并且它提供了将帧图片生成带alpha通道视频的工具,这简直太赞了。

VAP(Video Animation Player)是企鹅电竞开发,用于播放酷炫动画的实现方案。

  • 相比Webp, Apng动图方案,具有高压缩率(素材更小)、硬件解码(解码更快)的优点
  • 相比Lottie,能实现更复杂的动画效果(比如粒子特效)

预览

image

video for youtube

video for qiniu

apk download

安装

flutter_vap: ${last_version}

使用

import 'package:flutter_vap/flutter_vap.dart';

IgnorePointer(
  // VapView可以通过外层包Container(),设置宽高来限制弹出视频的宽高
  child: VapView(),
),
  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;
  }
  1. 播放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;
  }
  1. 停止播放
  VapController.stop()
  1. 队列播放
  _queuePlay() async {
    // 模拟多个地方同时调用播放,使得队列执行播放。
    QueueUtil.get("vapQueue").addTask(() => VapController.playPath(downloadPathList[0]));
    QueueUtil.get("vapQueue").addTask(() => VapController.playPath(downloadPathList[1]));
  }
  1. 取消队列播放
  QueueUtil.get("vapQueue").cancelTask();

例子

github