近几年能明显感觉到，互联网产品已经越来越离不开动效了：不管是APP里会动的加载动画UI，还是直播间里华丽的礼物，都需要经历动效上线的过程。而负责这些动效上线的前端同学应该有过这样的体验：各种加班写代码上线动画效果，并且在动效还原过程中反复和设计师联调效果。

最近接触到一个开源项目可以帮助大家解决这个问题，它就是PAG动效组件。

PAG 简介：认识 PAG动效

PAG是来自腾讯的一套完整的动画工作流解决方案，助力于将 AE 动画方便快捷的应用于各平台终端。PAG 的流程图下图所示，设计师在 AE 上设计出动画后，可以通过导出插件导出 pag 文件，同时 PAG 提供了桌面端预览工具，支持实时预览效果，在确认效果后，通过运行配置上线，各平台终端可以通过 PAG SDK 加载渲染 PAG 动画。

PAG 特点及优势 ：和其他动效上线方案相比，它强在哪里

● 开源项目：无需担心团队维护问题。

● 文件更小：PAG采用针对 AE 时间轴属性设计的二进制文件编码器，能够使用动态比特位紧凑存储，冗余信息极少，文件体积最小，解码速度最快，且支持单文件集成图片和音频等外部资源。

● 全 AE 特性支持：在纯矢量的导出模式下，无论是哪种实现方案，在众多的 AE 特性面前，都只支持将有限的 AE特性导出渲染，PAG 方案提供了 BMP 预合成的解决方案，支持将特定图层截图导出成透明视频，实现了对于所有 AE 特性导出的支持。

● 运行时编辑：PAG 不仅仅支持文本图层的文本编辑、图片图层的占位图替换，还支持图层级别的增加、删除及更改渲染位置，实现原子素材的自由组合，典型的应用场景就是视频模版和游戏战报，一个模版中由多个 pag 有机组合在一起。

● 渲染架构：相对于 Lottie 、SVGA 依赖于平台端相关的渲染接口，PAG 使用了跨平台一致的 C++ 架构，平台层面仅仅提供渲染环境，渲染的主体位于 C++ 层，可以实现跨平台的渲染一致性。

● 支持的平台更多：相比 Lottie 支持 Android、iOS、Web 和 macOS， SVGA 支持 Android、iOS、Web，PAG 实现了 Android、iOS、Web、macOS、Windows、Linux 和 微信小程序，支持的平台更多。

这里放一张对比图，大家就一目了然了：

想进一步了解也可以去开源地址：https://github.com/Tencent/libpag

PAG 使用：核心类分析及常用方法解读

在浏览过开源地址后，这里帮大家整理出核心类的分析：

类 分析
PAGLayer PAG 的渲染图层，PAG 是一个树状结构，PAGLayer 相当于树状结构中的叶子节点。PAG 对外暴露的渲染图层包括 PAGImageLayer （图片图层）、PAGTextLayer （文本图层）、PAGSolidLayer（实色图层），只有这些图层可以二次改编辑。PAGLayer 主要提供了以下能力：以 C++ 层接口为例 （ PAG 的对外接口保持各平台一致性），通过 setMatrix 可以控制图层的位移、缩放和扭曲，通过 setVisible 控制图层的显示与隐藏，通过 localTimeToGlobal 获取该图层相对于主渲染时间轴的具体时间，通过 setStartTime 设置图层相对于主时间轴的开始时间，通过设置 setExcludedFromTimeline 可以控制该图层渲染是否脱离主时间轴由接入方控制。
PAGImageLayer PAGImageView 为图片图层，支持通过 replaceImage 的方法替换默认占位图，同时支持通过 imageBytes 获取默认占位图的数据。它支持用户自己创建，支持指定开始时间和时长，典型的应用场景中将一个外部视频添加到 pag 渲染数据。
PAGTextLayer PAGTextLayer 为文本图层，支持用户修改默认的文本信息、文本颜色、更换字体、字体大小等。为了方便修改文本数据，C++ 封装了 TextDocument 类，支持修改文本的排版、斜体、描边信息等，对应 iOS、Android 平台的 PAGText 类。
PAGSolidLayer PAGSolidLayer 为实色图层，支持修改实色图层的颜色
PAGCompostion PAGComponsition 是渲染树中的容器，继承于 PAGLayer，可以包含多个 PAGLayer，支持用户自己创建，支持增加、删除、更换渲染顺序，支持通过图层名称获取该名称对应的图层。
PAGFile PAGFile 继承于 PAGComposition，不支持自己创建，通过加载 pag 文件获得，相对比 PAGComposition，PAGFile 增加了替换文本图层和图片图层内容的接口，因此如果需要编辑文本图层和图片图层的内容，一方面可以通过图层自身的接口，另一方面可以通过 PAGFile 的接口。
PAGSurface PAGSurface 是 PAG 的渲染画布。PAGSurface 的创建， iOS 平台可以通过 CVPixelBufferRef、尺寸（内部同样创建的是 CVPixelBufferRef），Android 平台可以通过 Surface、SurfaceTexture、TextureID、尺寸等创建，不同的创建方法对应不同的应用场景。PAGSurface 提供了获取单帧渲染数据的接口，支持获取 BGRA 数据、CVPixelBufferRef 和Bitmap。
PAGPlayer PAG 的播放控制类，持有 PAGSurface 和 PAGComposition， 可以通过 setProgress 控制渲染进度， flush 完成当前帧的渲染，可以通过 getBounds 接口获取各 PAGLayer 相对于 PAGSurface 渲染画布的位置信息， 通过 getLayersUnderPoint 获取特定位置下的所有图层。PAGComposition、PAGSurface、PAGPlayer 为 PAG 的三个组件，PAGComposition 提供渲染数据，PAGSurface 提供渲染画布，PAGPlayer 控制渲染进度。在视频后编辑场景，这种使用方式经常被用到。
PAGView 主要使用在 UI 动画场景，存在 Android、iOS、macOS、Web、微信小程序等平台，iOS 平台继承于 UIView， Andoroid 平台继承于 TextView， PAGView 支持通过本地路径 和 PAGComposition 加载， 调用 play 方法进行播放，内部有一个定时器，同时也提供了 PAGViewListener 的接口监听动画播放的状态，PAGView 内部实现了 PAGPlayer、PAGSurface、PAGComposition 的封装处理。
PAGDecoder PAGDecoder 目前存在于 iOS 和 Android 平台， 用于获取 pag 文件的渲染数据，支持通过 PAGComposition 创建，渲染的尺寸和 PAGCompositon 的尺寸一致，同时增加 sacle 参数支持用户设置渲染尺寸，通过 maxFrameRate 的参数设置最大渲染帧率。在数据读取层面，支持获取数据为 UIImage 、Bitmap 和 RGBA 数据。
PAGImageView PAGImageView 主要应用于 UI 列表以及页面中含有多个 pag 文件同时渲染的场景。这些场景使用 PAGView 实现时，页面中需要含有多个 PAGView，每一个 PAGView 都需要有一个 GPU 的渲染环境，任何一个 GPU 渲染的方案都会有一个初始的屏幕缓冲区开销，从而造成 内存占用的增加。PAGImageView 增加了磁盘缓存的功能，针对渲染过的内容，都会缓存到本地，当所有帧的数据缓存完成后，就会销毁 PAG 的渲染环境，剩余的就是磁盘数据的读取，实现了pag 文件渲染与素材的无关性。如果 pag 文件的相关内容没有被编辑过（如编辑文本、替换占位图等），下次加载就会直接读取缓存数据，无需创建 PAG 渲染环境。PAGImageView 的缓存支持两种模式：全磁盘和全内存， 默认为全磁盘模式，此时内存占用是最小的，CPU 占用相对较低，全内存模式的 CPU 占用最低，但内存占用较高，适用于对 CPU 占用要求较高、PAG 文件帧数较少的场景。

这些PAG常用方法解读也能帮助大家使用起来更轻松：

PAG 运行时编辑

PAG 的运行时编辑主要分为两类：1）修改文本图层的文本信息、替换图片图层中的占位图、修改实色图层中的颜色

// C++
std::shared_ptr<pag::PAGFile> ReplaceImageOrText() {auto pagFile = pag::PAGFile::Load("../../assets/test2.pag");if (pagFile == nullptr) {return nullptr;}for (int i = 0; i < pagFile->numImages(); i++) {auto pagImage = pag::PAGImage::FromPath("../../assets/scene.png");pagFile->replaceImage(i, pagImage);}for (int i = 0; i < pagFile->numTexts(); i++) {auto textDocumentHandle = pagFile->getTextData(i);textDocumentHandle->text = "hah哈 哈哈哈哈												


											

PAG 动效方案使用总结相关推荐
	

    
								
  1. 动效素材极速交付： 腾讯PAG动效组件技术揭秘
		
    编者按:音视频产品中的动效素材需求是源源不断的,例如贴纸花字,转场特效,照片和视频模板等,并且对它们的产量,上线速度,以及视觉效果都有比较高的要求.但在传统工作流中的交付成本却非常高,需要通过代码来手 ...
    
		
    2. 
						
  2. 前端必看！微信都在用的开源动效方案【PAG动效】
		
    1.PAG 是什么? 在 web 中实现一个动画, css animation 声明一下各个时间点的样式就好了, 写起来并不麻烦.但是当设计给的动画越来越复杂, 还原度要求越来越高的情况下, 单纯依赖 ...
    
		
    3. 
						
  3. 如何选取合适的前端动效方案？
		
    一.原因 前端动画场景需求多 对众多动画场景的技术实现方案选择上比较模糊 各动画方案的优劣及适用场景认识模糊 现有动画库太多,不知道选哪个 主流动画库的适用场景认识模糊 二.分类 动画用途 展示型的动 ...
    
		
    4. 
						
  4. android 加载动画素材,八种APP启动界面的Loading进度条设计动效方案
		
    在移动端APP应用中,从用户点击图标那一瞬间到用户进入主界面这段过程,同样也决定用户对该APP应用的第一印象,如何让用户产生好感并快速熟悉应用是这一阶段重点考虑的问题.这一过程是否给用户留下好的第一饮 ...
    
		
    5. 
						
  5. Pag——腾讯自创动效
		
    背景 是腾讯公司自主研发,最初诞生于2016年,为解决复杂视频编辑场景下动画 渲染的问题,同时又覆盖了UI动画和直播场景,2022年一月在GitHub正式开源.这意味着目前还处于一个小众阶段,从网上搜 ...
    
		
    6. 
						
  6. pako 压缩lottie动效资源方案
		
    原文链接: pako 压缩lottie动效资源方案 上一篇: typescript-json-schema 和 ajv 检测数据是否符合指定的ts类型 下一篇: vue3 i18n 国际化支持 基本思 ...
    
		
    7. 
						
  7. AE 动效制作和交付方案
		
    在界面设计中,设计师利用动效让整个界面更加活泼,给界面元素带来生命力,解决功能上的问题,在更好地展示产品功能的基础上,凸显品牌的特色.而作为用户,动效增强了体验者的审美感受.情感需要,让用户更容易理解 ...
    
		
    8. 
						
  8. uniapp image图片切换动效_动效设计从概念到落地
		
    一.什么是动效设计 聚焦于产品中的动效,我们常说的动效设计可以分为3类: 1.交互动效 交互动效承载了产品流程.交互行为的串联,不论可实际操作的交互原型还是纯做 demo 展示的动效过场都可以算作交互 ...
    
		
    9. 
						
  9. three相机在模型上_基于 three.js 的 3D 粒子动效实现
		
    作者:个推web前端开发工程师 梁神 一.背景 粒子特效是为模拟现实中的水.火.雾.气等效果由各种三维软件开发的制作模块,原理是将无数的单个粒子组合使其呈现出固定形态,借由控制器.脚本来控制其整体或单 ...
    
		
    10. 
		


					

最新文章
	

    
						
  1. MySQL 5.7中的更多改进，包括计算列
		
    2. 
						
  2. 英特尔用英伟达显卡，给GTA5打了个超强画质补丁
		
    3. 
						
  3. 付费会员制，如何赋能产品？
		
    4. 
						
  4. C++学习笔记2[表达式与语句]
		
    5. 
						
  5. linux-shell命令之cp（copy）【拷贝复制】
		
    6. 
						
  6. JPA：确定关系的归属方
		
    7. 
						
  7. OCP 11G 051题库解析笔记-总
		
    8. 
						
  8. 快速从入门到精通！mysql删除语句姓李的语句
		
    9. 
						
  9. 《中国人工智能学会通讯》——6.7 实体链接任务及系统
		
    10. 
						
  10. python元组是有序还是无序_python-03 元组和字典
		
    11. 
						
  11. window环境mysql卸载不干净
		
    12. 
						
  12. 密苏里大学理工学院计算机,美国密苏里大学工学院计算机系主任Dong Xu教授访问我校...
		
    13. 
						
  13. pandas 中 rank 的用法
		
    14. 
						
  14. 网站被黑 怎么检测代码含有后门
		
    15. 
						
  15. 祈求代码不出 Bug 该拜哪个“神仙”？
		
    16. 
						
  16. 大数据在快狗打车中的应用与实践
		
    17. 
						
  17. 关于HOOK,如何通过钩子截获指定窗口的所有消息 SetWindowsHookEx demo
		
    18. 
						
  18. vsync与hsync
		
    19. 
						
  19. c++/c 大整数乘法的分治与递归实现（string存储）
		
    20. 
						
  20. FTP服务器无法访问原因
		
    21. 
		

	


热门文章
	

    
									
  1. python实现mp3文件播放
			
    2. 
						
  2. C++ Primer 回炉重铸（一）
			
    3. 
						
  3. 125KHz三通道低功耗唤醒接收器芯片SI3933概述
			
    4. 
						
  4. JS日期格式化——数字日期转中文日期（封装函数，dayjs时间格式化YYYY-MM-DD）
			
    5. 
						
  5. RTMP协议中的AMF数据
			
    6. 
						
  6. CPython、IPython、PyPy、Jython、IronPython名词解释
			
    7. 
						
  7. 基于安卓的大学生心理健康管理系统的设计与实现
			
    8. 
						
  8. 做mysql服务器 需要什么配置最好_最佳的MySQL服务器配置以获得性能？
			
    9. 
						
  9. AI：人工智能领域之AI基础概念术语之机器学习、深度学习、数据挖掘中常见关键词、参数等5000多个单词中英文对照(绝对干货)
			
    10. 
						
  10. [附源码]java毕业设计疫情防控期间人员档案追寻系统
			
    11.