前两篇我们聊了 SVGA 和 VAP一个胜在轻量、一个胜在画质。这一篇收尾聊聊近两年在直播和短视频圈越来越火的PAGPortable Animated Graphic——字节跳动开源、抖音同款的动画渲染方案。如果说 SVGA 是「够用就好」VAP 是「画质拉满」那 PAG 想做的是「既要又要」既保留矢量的清晰和小体积又支持视频级的复杂特效还能动态替换文字、图片、视频。下面从原理到三端接入一次讲透。一、PAG 是什么PAG 是字节跳动在 2021 年开源的一套动画工作流方案全称 Portable Animated Graphic。抖音里那些贴纸、转场、礼物特效大量都是用 PAG 驱动的。它不是单一格式而是一整套「设计 → 导出 → 渲染」的闭环设计端设计师在 After Effects 里做动画用官方 PAGExporter 插件一键导出.pag文件。文件端.pag是二进制格式比 Lottie 的 JSON 小很多支持矢量、位图、视频三种编码混排。渲染端跨平台 SDKAndroid / iOS / Web / macOS / Windows / Linux统一渲染底层用 GPU 加速。它最大的野心是「所见即所得」——设计师在 AE 里看到什么效果端上渲染出来就是什么效果中间几乎不掉帧、不走样。这一点对礼物特效特别关键因为大礼物的动画往往很复杂用 SVGA 经常会遇到滤镜、蒙版还原不了的问题。PAG 矢量视频混排的礼物特效光效清晰、体积可控二、PAG 的三种导出模式PAG 最聪明的设计是把一个动画文件里的不同图层用不同方式编码。导出时可以选三种模式1. 矢量模式Vector纯矢量动画体积最小无限缩放不失真。适合图形、路径、形状类动画。缺点是复杂滤镜、粒子效果还原有限。2. 位图序列帧模式Bitmap把每一帧渲染成图片再压缩类似 SVGA 的思路。能 100% 还原 AE 效果但体积大。适合矢量搞不定的复杂特效。3. 视频序列帧模式Video用 H.264 编码存储画面带独立 alpha 通道。这就是和 VAP 类似的思路了画质高、体积可控。适合超复杂的大礼物特效。关键在于这三种模式可以在同一个.pag文件里混用。比如背景光效用视频编码中间的文字和 Logo 用矢量编码这样既保证画质又能动态替换文字。这是 PAG 相比 SVGA、VAP 最大的差异化优势。三、核心架构PAG SDK 的核心是三个类理解了它们就理解了 PAG 的渲染流程PAGFile对应一个.pag文件是动画数据的载体。可以读取图层、时长、尺寸也可以在这里做动态替换。PAGSurface渲染的目标画布绑定到一个 SurfaceTextureAndroid或 CAEAGLLayeriOS。PAGPlayer播放控制器负责把 PAGFile 渲染到 PAGSurface 上控制进度、播放、暂停。数据流向是PAGFile数据→PAGPlayer控制→PAGSurface输出。大部分场景下你不用直接碰这三个类用封装好的PAGView就够了。四、Android 接入先在build.gradle加依赖dependencies { implementation com.tencent.tav:libpag:4.3.35 }布局里放一个PAGVieworg.libpag.PAGView android:idid/pag_view android:layout_width300dp android:layout_height300dp /代码里加载并播放val pagView findViewByIdPAGView(R.id.pag_view) val pagFile PAGFile.Load(assets, gifts/rocket.pag) pagView.composition pagFile pagView.setRepeatCount(1) // 播放 1 次0 为无限循环 pagView.play() // 监听播放状态 pagView.addListener(object : PAGView.PAGViewListener { override fun onAnimationEnd(view: PAGView?) { Log.d(PAG, 播放完成) } override fun onAnimationStart(view: PAGView?) {} override fun onAnimationCancel(view: PAGView?) {} override fun onAnimationRepeat(view: PAGView?) {} override fun onAnimationUpdate(view: PAGView?) {} })注意PAGView底层是TextureView如果要在RecyclerView里复用记得在 item 回收时调用pagView.stop()释放资源。五、iOS 接入用 CocoaPods 加依赖pod libpag, ~ 4.3.35加载播放import libpag let pagView PAGView(frame: CGRect(x: 0, y: 0, width: 300, height: 300)) view.addSubview(pagView) if let filePath Bundle.main.path(forResource: rocket, ofType: pag), let pagFile PAGFile.load(filePath) { pagView.setComposition(pagFile) pagView.setRepeatCount(1) pagView.play() } // 监听 pagView.add(self) // self 实现 PAGViewListener 协议 func onAnimationEnd(_ pagView: PAGView!) { print(PAG 播放完成) }iOS 端底层用 Metal 渲染对 GPU 友好。同样注意在列表滚动、页面切换时调用stop()释放。六、Web 接入PAG 有 WebAssembly 版本浏览器里也能跑canvas idpag width300 height300/canvas script srchttps://cdn.jsdelivr.net/npm/libpaglatest/lib/libpag.min.js/script script window.libpag.PAGInit().then(async (PAG) { const buffer await fetch(gifts/rocket.pag).then(r r.arrayBuffer()); const pagFile await PAG.PAGFile.load(buffer); const canvas document.getElementById(pag); const pagView await PAG.PAGView.init(pagFile, canvas); pagView.setRepeatCount(1); await pagView.play(); }); /scriptWeb 端用 WebGL 渲染性能取决于浏览器和设备。移动端 H5 里跑复杂 PAG 要注意帧率建议提前测试。七、动态替换PAG 的杀手锏礼物特效经常要「把用户的头像、昵称塞进动画里」。SVGA 也能做但 PAG 做得更彻底——文字、图片、视频都能替换。替换文字val textDoc pagFile.getTextData(0) // 获取第 0 个文本图层 textDoc.text 恭喜 小明 升到王者 pagFile.replaceText(0, textDoc)替换图片比如用户头像val bitmap BitmapFactory.decodeResource(resources, R.drawable.avatar) val pagImage PAGImage.FromBitmap(bitmap) pagFile.replaceImage(0, pagImage) // 替换第 0 个图片图层设计师在 AE 里把要替换的图层命名好、标记为可编辑端上按索引替换即可。这样一套礼物动画模板能给成千上万个用户生成个性化特效这正是直播场景最需要的能力。视频编码保画质昵称文字图层走矢量、支持动态替换八、性能优化PAG 虽然渲染高效但礼物场景是高并发、连续播放几个点要注意预加载与缓存。把常用礼物的.pag文件提前PAGFile.Load好缓存起来别等用户送礼时才读盘解码。PAGFile 对象可以复用。控制并发。同屏别叠太多 PAGView尤其是视频编码模式的。建议做一个播放队列大礼物串行播放小礼物可以适当并发。选对导出模式。能用矢量就别用位图能用位图就别用视频体积和解码开销差很多。让设计师针对不同复杂度的礼物选合适的模式。及时释放。播放完调用freeCache()列表复用时stop()避免 GPU 内存堆积。降级策略。低端机上可以把视频模式的 PAG 降级到较低分辨率版本或直接回退到静态图保证不卡顿。九、PAG vs SVGA vs VAP 怎么选三种格式各有擅长简单说SVGA最轻量、接入最简单、生态成熟。适合中小型特效、预算有限、对画质要求不极致的场景。VAP画质最高、还原度满分。适合超复杂的大礼物、对视觉冲击要求极高的场景代价是体积大、只能视频编码。PAG最灵活矢量/位图/视频混排动态替换能力最强。适合既要画质又要动态个性化、且团队愿意投入 AE 工作流的场景。如果你正在从零搭直播礼物体系PAG 的「一套模板 动态替换」思路长期看最省事但前期设计和接入成本略高。像我们星集礼物商城在做定制礼物动画时就会根据客户的量级和画质要求在这三种格式里灵活组合——不是越新越好而是越合适越好。复杂粒子特效用视频序列帧编码还原度接近 AE 原稿总结PAG 的核心竞争力在于「所见即所得的 AE 工作流」加「三种编码混排」加「彻底的动态替换」。它把设计师的创意和端上的性能之间那道坎抹平了这也是它能撑起抖音级别特效量的原因。三大格式系列到这就写完了。SVGA 轻、VAP 精、PAG 全没有绝对的最优解只有最适合你业务的那一个。下次遇到「直播礼物特效该用什么格式」的问题希望这三篇能帮你快速拍板。
前两篇我们聊了 SVGA 和 VAP一个胜在轻量、一个胜在画质。这一篇收尾聊聊近两年在直播和短视频圈越来越火的PAGPortable Animated Graphic——字节跳动开源、抖音同款的动画渲染方案。如果说 SVGA 是「够用就好」VAP 是「画质拉满」那 PAG 想做的是「既要又要」既保留矢量的清晰和小体积又支持视频级的复杂特效还能动态替换文字、图片、视频。下面从原理到三端接入一次讲透。一、PAG 是什么PAG 是字节跳动在 2021 年开源的一套动画工作流方案全称 Portable Animated Graphic。抖音里那些贴纸、转场、礼物特效大量都是用 PAG 驱动的。它不是单一格式而是一整套「设计 → 导出 → 渲染」的闭环设计端设计师在 After Effects 里做动画用官方 PAGExporter 插件一键导出.pag文件。文件端.pag是二进制格式比 Lottie 的 JSON 小很多支持矢量、位图、视频三种编码混排。渲染端跨平台 SDKAndroid / iOS / Web / macOS / Windows / Linux统一渲染底层用 GPU 加速。它最大的野心是「所见即所得」——设计师在 AE 里看到什么效果端上渲染出来就是什么效果中间几乎不掉帧、不走样。这一点对礼物特效特别关键因为大礼物的动画往往很复杂用 SVGA 经常会遇到滤镜、蒙版还原不了的问题。PAG 矢量视频混排的礼物特效光效清晰、体积可控二、PAG 的三种导出模式PAG 最聪明的设计是把一个动画文件里的不同图层用不同方式编码。导出时可以选三种模式1. 矢量模式Vector纯矢量动画体积最小无限缩放不失真。适合图形、路径、形状类动画。缺点是复杂滤镜、粒子效果还原有限。2. 位图序列帧模式Bitmap把每一帧渲染成图片再压缩类似 SVGA 的思路。能 100% 还原 AE 效果但体积大。适合矢量搞不定的复杂特效。3. 视频序列帧模式Video用 H.264 编码存储画面带独立 alpha 通道。这就是和 VAP 类似的思路了画质高、体积可控。适合超复杂的大礼物特效。关键在于这三种模式可以在同一个.pag文件里混用。比如背景光效用视频编码中间的文字和 Logo 用矢量编码这样既保证画质又能动态替换文字。这是 PAG 相比 SVGA、VAP 最大的差异化优势。三、核心架构PAG SDK 的核心是三个类理解了它们就理解了 PAG 的渲染流程PAGFile对应一个.pag文件是动画数据的载体。可以读取图层、时长、尺寸也可以在这里做动态替换。PAGSurface渲染的目标画布绑定到一个 SurfaceTextureAndroid或 CAEAGLLayeriOS。PAGPlayer播放控制器负责把 PAGFile 渲染到 PAGSurface 上控制进度、播放、暂停。数据流向是PAGFile数据→PAGPlayer控制→PAGSurface输出。大部分场景下你不用直接碰这三个类用封装好的PAGView就够了。四、Android 接入先在build.gradle加依赖dependencies { implementation com.tencent.tav:libpag:4.3.35 }布局里放一个PAGVieworg.libpag.PAGView android:idid/pag_view android:layout_width300dp android:layout_height300dp /代码里加载并播放val pagView findViewByIdPAGView(R.id.pag_view) val pagFile PAGFile.Load(assets, gifts/rocket.pag) pagView.composition pagFile pagView.setRepeatCount(1) // 播放 1 次0 为无限循环 pagView.play() // 监听播放状态 pagView.addListener(object : PAGView.PAGViewListener { override fun onAnimationEnd(view: PAGView?) { Log.d(PAG, 播放完成) } override fun onAnimationStart(view: PAGView?) {} override fun onAnimationCancel(view: PAGView?) {} override fun onAnimationRepeat(view: PAGView?) {} override fun onAnimationUpdate(view: PAGView?) {} })注意PAGView底层是TextureView如果要在RecyclerView里复用记得在 item 回收时调用pagView.stop()释放资源。五、iOS 接入用 CocoaPods 加依赖pod libpag, ~ 4.3.35加载播放import libpag let pagView PAGView(frame: CGRect(x: 0, y: 0, width: 300, height: 300)) view.addSubview(pagView) if let filePath Bundle.main.path(forResource: rocket, ofType: pag), let pagFile PAGFile.load(filePath) { pagView.setComposition(pagFile) pagView.setRepeatCount(1) pagView.play() } // 监听 pagView.add(self) // self 实现 PAGViewListener 协议 func onAnimationEnd(_ pagView: PAGView!) { print(PAG 播放完成) }iOS 端底层用 Metal 渲染对 GPU 友好。同样注意在列表滚动、页面切换时调用stop()释放。六、Web 接入PAG 有 WebAssembly 版本浏览器里也能跑canvas idpag width300 height300/canvas script srchttps://cdn.jsdelivr.net/npm/libpaglatest/lib/libpag.min.js/script script window.libpag.PAGInit().then(async (PAG) { const buffer await fetch(gifts/rocket.pag).then(r r.arrayBuffer()); const pagFile await PAG.PAGFile.load(buffer); const canvas document.getElementById(pag); const pagView await PAG.PAGView.init(pagFile, canvas); pagView.setRepeatCount(1); await pagView.play(); }); /scriptWeb 端用 WebGL 渲染性能取决于浏览器和设备。移动端 H5 里跑复杂 PAG 要注意帧率建议提前测试。七、动态替换PAG 的杀手锏礼物特效经常要「把用户的头像、昵称塞进动画里」。SVGA 也能做但 PAG 做得更彻底——文字、图片、视频都能替换。替换文字val textDoc pagFile.getTextData(0) // 获取第 0 个文本图层 textDoc.text 恭喜 小明 升到王者 pagFile.replaceText(0, textDoc)替换图片比如用户头像val bitmap BitmapFactory.decodeResource(resources, R.drawable.avatar) val pagImage PAGImage.FromBitmap(bitmap) pagFile.replaceImage(0, pagImage) // 替换第 0 个图片图层设计师在 AE 里把要替换的图层命名好、标记为可编辑端上按索引替换即可。这样一套礼物动画模板能给成千上万个用户生成个性化特效这正是直播场景最需要的能力。视频编码保画质昵称文字图层走矢量、支持动态替换八、性能优化PAG 虽然渲染高效但礼物场景是高并发、连续播放几个点要注意预加载与缓存。把常用礼物的.pag文件提前PAGFile.Load好缓存起来别等用户送礼时才读盘解码。PAGFile 对象可以复用。控制并发。同屏别叠太多 PAGView尤其是视频编码模式的。建议做一个播放队列大礼物串行播放小礼物可以适当并发。选对导出模式。能用矢量就别用位图能用位图就别用视频体积和解码开销差很多。让设计师针对不同复杂度的礼物选合适的模式。及时释放。播放完调用freeCache()列表复用时stop()避免 GPU 内存堆积。降级策略。低端机上可以把视频模式的 PAG 降级到较低分辨率版本或直接回退到静态图保证不卡顿。九、PAG vs SVGA vs VAP 怎么选三种格式各有擅长简单说SVGA最轻量、接入最简单、生态成熟。适合中小型特效、预算有限、对画质要求不极致的场景。VAP画质最高、还原度满分。适合超复杂的大礼物、对视觉冲击要求极高的场景代价是体积大、只能视频编码。PAG最灵活矢量/位图/视频混排动态替换能力最强。适合既要画质又要动态个性化、且团队愿意投入 AE 工作流的场景。如果你正在从零搭直播礼物体系PAG 的「一套模板 动态替换」思路长期看最省事但前期设计和接入成本略高。像我们星集礼物商城在做定制礼物动画时就会根据客户的量级和画质要求在这三种格式里灵活组合——不是越新越好而是越合适越好。复杂粒子特效用视频序列帧编码还原度接近 AE 原稿总结PAG 的核心竞争力在于「所见即所得的 AE 工作流」加「三种编码混排」加「彻底的动态替换」。它把设计师的创意和端上的性能之间那道坎抹平了这也是它能撑起抖音级别特效量的原因。三大格式系列到这就写完了。SVGA 轻、VAP 精、PAG 全没有绝对的最优解只有最适合你业务的那一个。下次遇到「直播礼物特效该用什么格式」的问题希望这三篇能帮你快速拍板。
)
)
