https://mp.weixin.qq.com/s/qvrulcbCkeIe6HcUaDP6iA

libpag 是 PAG (Portable Animated Graphics) 动效文件的渲染 SDK,目前已覆盖几乎所有的主流平台,包括:iOS, Android, macOS, Windows, Linux, 以及 Web 端。

PAG 方案是一套完善的动效工作流。提供从 AE(Adobe After Effects)导出插件,到桌面预览工具 PAGViewer,再到各端的跨平台渲染 SDK。目标是降低或消除动效研发相关的成本,打通设计师创作到素材交付上线的极简流程,不断输出运行时可编辑的高质量动效内容。

PAG 方案目前已经接入了腾讯系 40 余款应用,包括微信,手机 QQ,王者荣耀,腾讯视频,QQ 音乐等头部产品,稳定性经过了海量用户的持续验证,可以广泛应用于 UI 动画、贴纸动画、视频编辑、模板设计等场景。

PAG 优势
高效的文件格式:采用可扩展的二进制文件格式,可单文件集成图片音频等资源,实现快速交付。导出相同的 AE 动效内容,在文件解码速度和压缩率上均大幅领先于同类型方案。

全 AE 特性支持:在纯矢量导出方式上支持更多 AE 特性的同时,还引入了 BMP 预合成结合矢量的混合导出能力,实现支持所有 AE 特性的同时又能保持动效运行时的可编辑性。

性能监测可视化:通过导出插件内置的自动优化策略,以及预览工具集成的性能监测面板,能够直观地看到每个素材的性能状态,以帮助设计师制作效果和性能俱佳的动画特效。

运行时可编辑:运行时,可在保留动效效果前提下,动态修改替换文本或替换占位图内容,甚至对任意子图层进行增删改及移动,轻松实现照片和视频模板等素材的批量化生产。

示例
拍摄道具图片
视频模板图片
游戏战报图片
视频编辑图片
视频广告图片
UI 动画图片
直播打赏图片
运营活动图片
快速接入
系统要求
iOS 9.0 版本及以上
Android 4.4 版本及以上
macOS 10.13 版本及以上
Windows 7.0 版本及以上
Chrome 69.0 版本及以上
Safari 11.3 版本及以上
iOS 端接入
可以从 release 页面下载编译的二进库,或者通过 CocoaPods 接入:

https://github.com/Tencent/libpag/releases
在 Podfile 中添加 libpag 依赖:


pod 'libpag'
然后运行:

pod install

然后在项目中引入 libpag 的头文件


#import <libpag/xxx.h>

安卓端接入
可以从 release 页面下载预编译的 aar 库文件,或者通过 Maven 将 libpag 添加到你的项目中:

https://github.com/Tencent/libpag/releases
编辑工程根目录下的build.gradle文件,在repositories下面添加mavenCentral() :


buildscript {
    repositories {
        mavenCentral()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.2.1'
    }
}

在app/build.gradle中添加 libpag 依赖(4.0.5.10应替换为最新发布版本):


dependencies {
    implementation 'com.tencent.tav:libpag:4.0.5.10'
}

在混合列表里,添加 libpag 的保持规则


  -keep class org.libpag.** {*;}
  -keep class androidx.exifinterface.** {*;}

配置完成以后,sync 一下,再编译即可。

Web 端接入
直接连接贝如下代号,然后在浏览器中运行即可:


<canvas class="canvas" id="pag"></canvas>
<script src="https://unpkg.com/libpag@latest/lib/libpag.min.js"></script>
<script>
  window.libpag.PAGInit().then((PAG) => {
    const url = 'https://pag.art/file/like.pag';
    fetch(url)
      .then((response) => response.blob())
      .then(async (blob) => {
        const file = new window.File([blob], url.replace(/(.*\/)*([^.]+)/i, '$2'));
        // Do Something.
      });
  });
</script>

Web 端更多接入方式请参考:Web端接入指南

https://pag.art/docs/sdk-web.html
传送门
开源协议:Apache2.0

开源地址:https://github.com/Tencent/libpag

项目合集:https://github.com/OpenTechCol/OpenTechCol

文档更新时间: 2023-06-03 17:28   作者:admin