Flutter上线项目实战——Vap视频动画

Flutter上线项目实战——Vap视频动画

Android小彩虹2021-07-08 22:07:13210A+A-

背景

透明视频动画是目前比较流行的实现动画的一种, 大厂也相继开源自己的框架,最终我们选中腾讯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}

使用

  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

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1

联系我们