人物采访 / T SALON

编辑内容

陈仁健谈 PAG:动效工作流、底层引擎与技术成长

回顾陈仁健在 2022 年 T Chat 的 PAG 技术分享与对谈,串起四个版本的演进、文件压缩、混合导出和 TGFX,再展开项目实践、技术管理、代码质量、开源参与及交互动效的未来设想。

陈仁健在 T Chat 分享腾讯 PAG 动效方案的活动海报
陈仁健在 T Chat 分享腾讯 PAG 动效方案的活动海报

本期视频发布于 2022 年。文中的技术状态、个人经历与观点均为当时情况。

一个动效从设计师的电脑进入真实产品,中间需要多少研发工作?陈仁健在这场 T Chat 中讨论的 PAG,首先要解决的是这个生产过程,而后才是支撑它的文件格式、渲染架构与工具。

陈仁健(Dom)在当期活动资料中以腾讯技术负责人的身份参与。他在分享中回顾,职业前半段主要在游戏行业,后来转向短视频,负责音视频发布相关的中台建设。这条经历也贯穿了后半场对谈:怎样用真实项目积累能力,怎样从重复劳动中提炼工具,以及怎样把个人的技术能力变成团队可以持续交付的能力。

技术分享:把逐个还原动效,变成可复用的工作流

为什么视频素材生产会被研发环节卡住

PAG 的起点是视频编辑。贴纸、转场、动态文字和视频模板不断产生新需求,运营既希望效果丰富,也希望赶得上热点。传统流程却要经过多次转交:设计师先在 Adobe After Effects(AE)里做出效果,输出演示视频;研发再拆解动效,用代码还原属性和时间轴;没有的特效能力还要排期开发,最后与设计师反复确认。

陈仁健把问题分成三部分。首先,每个素材都需要研发介入,有限的人力限制了生产规模。其次,设计与实现反复联调,让素材上线周期拉长。最后,复杂效果难以经济地还原,设计师不得不删减创意来适应开发成本。即使素材最终上线,也可能已经偏离最初的视觉目标。

PAG 的工作流把这些重复环节移入工具链:设计师通过 AE 插件导出 PAG 文件,在桌面工具里预览,并检查文本、图片或视频被替换后的效果;确认后交付素材,由已经接入的 SDK 在终端渲染。PAG 的全称是 Portable Animated Graphics,官方将它定位为完整的动效工作流方案。参见 PAG 官方介绍

他希望减少的是每个素材都重新写代码还原的成本。SDK 接入、底层能力建设和后续维护仍然存在,但设计师可以在已有能力范围内独立生产更多内容。他在分享中以当时的视频模板流程为例,说明上线周期如何从按周计算缩短到按小时计算;这属于团队给出的历史案例,而非对所有素材的统一耗时保证。

应用从播放动画,走向可编辑、可组合

分享随后展示了编辑要求逐步增强的场景:直播礼物需要播放完整动效,UI 动画可能需要控制进度或改变文字,贴纸与花字需要内容替换,视频模板还要把用户素材纳入预设效果。到了游戏战报,系统需要根据实际内容,把不同片段和动效重新组合。

最后一种场景尤其重要:设计师很难预先穷举所有可能的完整模板,因此需要生产可以组合的原子素材,程序再根据内容选择、排列和调整。PAG 的目标便从播放一个文件,逐步扩展到让业务操纵文件内部的图层与时间关系。

谈到 Lottie、SVGA 等同类方案时,陈仁健把它们放进一条更长的工作流历史中。他认为,Flash 时代曾让设计和研发形成较完整的协作,而转向移动端后,这种衔接需要重新建立。几种方案从不同场景出发,都在尝试补上这段连接。

四个版本,对应四组新的业务约束

陈仁健没有把 PAG 的演进描述成一开始就设计好的功能列表。每个主要版本都对应一组新出现的约束。

1.0 先解决视频编辑中的动效与文本。 团队需要在视频上叠加动画贴纸和文字,并保留文字编辑能力。为此,他们从较底层建立渲染与文件格式,借鉴游戏引擎中的设计,让动效能进入视频渲染管线,同时考虑实时预览、缓存和文件大小。

2.0 处理复杂效果与视频模板。 纯矢量导出能保留编辑能力,但不能直接覆盖设计师使用的所有复杂效果。团队引入 BMP 预合成与矢量混合导出:复杂且不需要修改的部分可以预渲染,需要替换或编辑的部分继续保留相应结构。占位图的引入,则让用户视频能进入模板,沿用设计师配置的变换、动效与层级关系。

3.0 把控制单位推进到图层。 一键出片、游戏战报等需求,使单个固定模板不再足够。团队提供图层渲染树的编辑接口,让业务增删、调整图层,改变空间位置与时间位置,并把多个 PAG 文件组合成新的结构。多个动效也因此有机会共享渲染上下文,改善同屏播放时的组织方式。

4.0 则深入到底层绘图引擎。 当上层功能逐渐完善,SDK 包体和 Web 支持成为进一步突破的重点。团队认为原有绘图库的结构限制了自己的优化空间,于是投入开发 TGFX,希望更直接地控制 GPU 渲染、平台能力和资源管理。

小文件背后,是针对动效特征的存储设计

文件格式首先服务于交付和播放:素材最好能以单个文件传递,首次加载要快,下载体积也应尽可能小。陈仁健介绍,PAG 选择可扩展的二进制结构,把资源纳入同一文件,并用独立的 Tag 数据块组织内容。新能力可以通过扩展数据块表达;旧版本遇到不认识的非关键信息,可以按格式约定跳过,而不必因此无法读取整个文件。

更细的压缩则来自对 AE 动效的观察。大量属性仍然保持默认值,可以用标记代替完整存储;相似类型的数据可以重新排列后集中编码,把符号位和整数等信息按实际需要的位数紧凑存放。对于一些表示屏幕坐标的浮点数据,还可以在选定精度下量化,再使用整数压缩方式。

这里的关键不是笼统地说二进制比文本好,而是利用动效数据本身的分布与精度需求。默认值、省略规则、数据重排和坐标精度各自承担一部分作用;不同素材的压缩结果也会不同。

视频渲染管线与三级缓存

视频编辑对动效提出了与普通 UI 播放不同的约束。画面要和其他视频、滤镜及处理过程合成,动效最好能够直接输出到目标 GPU 纹理,并在适合的线程执行,避免占住 UI 交互。陈仁健把统一的底层实现看作跨端一致性和管线整合的重要基础。

完成接入后,还要把重复工作减少。分享首先介绍了静态区间:动效并不是每一帧都变化,一些图层或整个画面会维持不动。识别这些区间后,可以复用此前结果,跳过没有必要的计算或绘制。

他接着讲到三级缓存。文件缓存复用已经解码的数据,使同一个素材不必为每个实例反复解码;绘制缓存保存插值计算后的文本、矢量等数据,并结合静态区间复用;内容缓存则把复杂、稳定的图形保存成纹理,减少后续绘制成本。

缓存也需要限制范围。如果素材实际只按较小尺寸显示,就应在满足清晰度的前提下控制缓存面积;缓存内容可以随播放逐渐生成,避免一开始集中产生大量工作。这一段展示的是在内存占用与执行时间之间做具体取舍,而不是无限增加缓存。

混合导出怎样兼顾效果、编辑与体积

陈仁健再次展开 2.0 的核心选择:有些效果在设计软件里都需要明显的渲染等待,很难要求移动端逐帧实时重现。纯矢量方案有小体积、可编辑的优势,预渲染序列帧则能承接更复杂的视觉效果。把两者混合,才能让不同部分采用合适的表示方式。

设计师可以把复杂且不需要运行时修改的图层标记为 BMP 预合成,其他部分保留可编辑结构。这里要区分整体方案的编辑能力与某个预渲染部分的能力:BMP 预合成本身不能再像矢量结构一样修改内部内容。官方文档也明确了这一取舍。参见 PAG 素材优化说明

接下来的问题是序列帧如何存得更小、播得更快。分享介绍了用视频压缩承载序列帧,并利用硬件解码;由于动效常有透明区域,还需要把颜色与透明度信息编码到可保存的画面中,渲染时再合并。团队将颜色转换与透明信息处理尽量放在同一次绘制中,减少中间步骤。

动效还会随机跳转到某个时间点,因此封装结构需要方便访问关键帧信息。PAG 采用面向自身需求的数据组织方式,将静态区间等信息一并带入运行时,减少不必要的解码等待。文件导出、数据封装与终端播放在这里被作为同一条链路优化。

TGFX:围绕自己的约束重新选择

为什么不继续裁剪 Skia?陈仁健给出的解释是,团队面临的重点已经从功能支持转到包体、可预测动效与 GPU 资源控制。通用绘图库需要覆盖许多使用方式,而 PAG 希望针对自己的工作负载作更集中的优化。TGFX 是这组取舍的结果,不能据此把通用引擎概括成没有价值。

首先是聚焦 GPU 绘制,减少与其他渲染路径之间的耦合。其次是尽量复用平台已经提供的能力,包括图像解码、字体和部分图形处理;只有缺少适合能力的环境才引入其他实现。这会增加平台适配工作,但能减少把相同依赖反复打包进 SDK 的成本。

在接入方式上,团队也封装了平台视图、设备、渲染上下文和线程协作等工作。GPU 资源的生命周期尤其容易出错:对象在某个线程上失去引用,并不一定意味着可以立即在那个位置清理底层资源。分享介绍了延迟到合适上下文再释放的处理思路,以减少调用方需要自行协调的细节。

其他优化包括利用设备提供的硬件缓冲能力,允许上层复用关键 GPU 对象,减少 CPU 与 GPU 侧重复保存数据,以及把更多缓存管理权交给了解业务的上层。平台字体的利用也是 Web 支持和包体控制的一部分。

陈仁健报告了当时替换绘图引擎后的包体与性能改善,并提出把 TGFX 作为独立项目继续完善。片尾有人问引擎是否开源,他补充:当时尚未单独建立仓库,但相关代码已在 libpag 仓库中。今天可以访问独立的 TGFX 官方仓库,这与录播里的历史状态应分别理解。

工具、社区与下一阶段的四个方向

分享最后回到方案的使用者。除了 SDK,设计师需要导出、预览和性能检查工具;研发需要文档、教程和可以提问的渠道。陈仁健介绍了当时的开源、用户交流和业务接入情况,强调把工具链做完整,才能让更多人独立使用方案。

他提出的后续方向也对应这条主线:继续补齐能直接编辑的 AE 特性,减少对预渲染的依赖;提供图层级性能分析,帮助设计师自己定位素材瓶颈;为 TGFX 增加更多渲染后端;建立素材与设计师交流的社区。它们是当时的推进方向,不应直接视作已经交付的功能清单。

成长对谈:从真实问题中积累,再把经验交给团队

第一笔经验,来自实际做完一个项目

主持人从新手成长问起。陈仁健把早期经历分为两个阶段:先尽快积累解决真实问题的经验,再学习怎样把已经能完成的工作做得更好。

他回顾,自己在大学期间开始系统接触编程,并通过计算机社团参与外包项目。这些项目有明确需求和交付结果,促使他遇到问题就查资料、补技能,也帮助他较早获得游戏公司的实习机会。相比只完成课程或练习题,他更看重实际做完一个项目后留下的能力:怎样拆解任务,怎样把不同环节接起来,怎样处理书上没有直接答案的问题。

后来谈到学习新语言,他再次使用同一思路:先找一个有具体功能的程序做起来。他举了入职初期实现俄罗斯方块的经历,过程中查语法、查文档、解决问题,完成后便有了继续开发其他东西的基础。

这不意味着资料不重要,而是由任务帮助选择当前真正需要掌握的部分。他以自己长期使用 C++ 为例,说明没有必要先记住所有语言特性才开始开发;相较于炫耀复杂语法,他更关注把实际问题抽象成清晰代码的能力。

从重复拼 UI,到理解成熟框架为什么这样设计

第二个阶段的转折,发生在游戏项目里。陈仁健当时反复用代码拼 UI 面板,觉得这类工作耗时且容易重复修改,于是尝试将自己熟悉的 Adobe Flex 思路简化、移植到游戏场景,逐渐形成 FlexLite 及配套的可视化编辑工具。

这段经历与 PAG 有相似之处:他希望花更多时间建立可复用的生产方式,减少后续重复还原界面的工作。但对个人成长更关键的是,重新实现一个成熟方案,迫使他深入理解每个设计选择。

遇到问题时,他会回到原项目查看实现;也曾觉得某些设计过于保守,尝试大幅修改,后来才在实际需求中理解原方案为何这样处理。成熟项目于是成为一个可以反复对照的经验来源:先自己尝试,遇到约束,再回头研究别人如何解决同类问题。

他将这种积累称为架构上的直觉。初期未必能完整解释为什么某种方式更合适,但通过实际尝试和反馈,可以先建立判断方向;经历更多问题后,再逐渐能够讲清楚原因,并把经验传给别人。它不是跳过实践的捷径,而是让实践有可靠的参照。

选择有挑战的业务,让能力持续接上

陈仁健在对谈中反复强调职业经历的连续性。游戏和短视频看起来是不同业务,但在他的路线中,图形渲染能力可以继续积累。换行业时,他关注的不只是岗位名称,还包括下一段工作能否给已有能力带来新的问题和约束。

他也谈到,纯凭兴趣想象一个开源项目,有时很难持续推进;进入真实业务后,用户的新需求反而会逼迫架构发展。PAG 的几个版本正是例子:复杂模板、动态组合、包体和 Web 支持,并不是一个人闭门就能提前列全的题目,而是在业务中逐步出现。

他的选择原则,是尽量进入需求真实、问题重要、技术上有挑战的环境。项目是否成为爆款,并不完全受个人控制;持续解决难题后留下的技术能力,则更容易伴随自己进入下一段工作。这里表达的是他个人的成长取向,不是每个开发者都必须频繁换工作的建议。

技术管理的转变,发生在横向协作和向下授权

当主持人问到成为负责人后的适应,陈仁健先区分了技术攻坚与团队管理。他此前在创业公司也带过团队,但更多承担技术专家的角色;到腾讯后的经历,让他更集中地处理管理问题。

第一项转变是横向突破边界。技术负责人不能只把自己定位成接收需求的人,也要从用户和产品角度判断问题。对实现细节的了解可以成为优势:更早发现不合理的需求,讨论替代方案,减少团队后续返工。如果只机械地维护分工边界,团队可能会在错误方向上投入大量精力。

第二项转变是让别人也能把工作做好。一个强工程师习惯自己完成难题,管理者却需要把工作逐步交出去;即使别人开始时没有自己熟练,也要帮助其承担责任。否则所有关键环节都等负责人亲自介入,负责人就成了团队的瓶颈。

他同时不赞成技术负责人完全脱离技术。自己的做法是保持代码实践和技术熟悉度,但尽量不抢走其他成员能够承担的工作。保持判断力与扩大团队能力,需要同时推进。

严谨的团队文化,落实在审查、测试与代码结构中

主持人问团队氛围时,陈仁健选择了严谨这个词。他把这种要求与底层引擎的特点联系起来:代码量未必最大,但一个问题可能变成难排查的崩溃,因此希望尽可能在进入产品前发现它。

按他当时的介绍,团队所有代码提交都需要审查,包括他自己的代码;能够用工具检查的事项尽量自动化,提交还要通过既定测试和 CI/CD 流程。除了功能能否跑通,审查也看结构是否简洁、命名是否清楚,以及新增功能是否影响周边模块。

他举了一个具体例子:某项功能把多种特殊情况堆在上层业务逻辑中,形成许多条件分支。他建议考虑将差异放到下层的具体实现中,让上层保持统一接口。这个例子不是要求所有条件判断都改成多态,而是在讨论职责应该落在哪一层,才能让结构保持清楚。

有代表性的审查讨论还会分享给整个团队,让成员理解为什么这样改。陈仁健认为,这些小判断长期积累,才会形成可维护系统所需的能力。他也希望成员离开某个团队后,仍能带走这种能力;它比要求所有人一直留下更重要。

研发也要直接接触使用者

团队的另一项习惯,是让研发直接接触一手需求。陈仁健说,底层工具团队并不总有一个产品经理替大家完成所有需求分析;桌面工具、交互和功能设计,常需要研发自己参与判断。

他和团队成员会在论坛、交流群和 GitHub 等渠道回应问题。从用户遇到的具体障碍出发,才能发现有价值的改进,再把这些问题带回项目。它把前面个人成长的逻辑扩展到了团队:真实需求不只是需要被消化的任务,也是完善工具和训练判断力的来源。

现场也聊到加入团队的机会,但没有给出具体岗位信息;持续交流和参与开源项目,是当时对话中更明确的连接方式。

不用语言或单一业务标签限定自己

谈到音视频开发者的方向,陈仁健再次用自己从游戏走向短视频的经历作解释。对他所处的工程场景来说,图形渲染是很重要的共同基础:视频编辑会使用已有的编解码模块,同时还需要大量画面合成、效果和渲染工作。

他建议把视野放到更通用的能力上。掌握渲染后,可能接触的工作包括动效、图像特效、UI 框架、游戏引擎,以及 AR、VR 等交互场景。与其只用某一种语言或某个业务称呼限定自己,不如理解自己真正积累的是哪类能力,再寻找能继续使用它的领域。

这是他对自身技术路线的概括,而不是说所有音视频岗位都以渲染为主;编解码、音频处理及其他方向也有各自的专业工作。

从关注 Rive,到参与一个开源项目

主持人问到最近关注的技术,陈仁健谈了两条线。一条是 Rive 等可交互图形产品:除了制作动画,还要考虑如何根据输入改变动画状态,以及不同时间线如何配合。他当时正在研究,怎样将这类交互能力与成熟的 AE 创作流程结合,并预告交互将是 PAG 下一阶段的重要方向。

另一条仍然是 Skia。即使团队做了更符合自身约束的替代方案,他也明确肯定这个项目的价值,继续关注其 GPU 架构的新进展。TGFX 在他的描述中,是给使用者增加一种选择,而不是否认已有方案的积累。

话题随后转到如何成为贡献者。陈仁健提醒,参与开源不必从一个复杂核心模块开始。理解某个机制后写清楚文档,协助复现和回答问题,找到一个可以修正的小缺陷,都能推动项目,也能帮助自己深入代码。

随着这些贡献不断积累,参与者才可能逐渐进入更核心的开发。他希望降低的是参与者对第一步的心理门槛,而不是降低贡献质量的要求。这也与他早年的学习经验形成呼应:研究成熟项目,并在具体问题中与它发生真正的协作。

PAG 为什么开始,又为什么走向开源

主持人接着问,为什么选择动效工作流。陈仁健的回答仍从需求出发:转入短视频后,他发现移动端缺少自己在 Flash 生态中熟悉的高效协作方式,而贴纸、可编辑花字等需求又不可能长期靠逐个写代码解决。

他愿意为系统性方案投入更长时间,让后续同类问题处理得更快。早期已有方案的存在也很重要:它证明设计到运行时的通路有机会打通,给团队继续投入提供了参照。随着视频编辑中的困难被逐步解决,方案再扩展到 UI、直播等其他场景。

PAG 并不是一开始就对外开源。按陈仁健的回顾,项目早期主要服务内部业务;设计师觉得好用后,使用经验逐渐向其他团队及外部传播,团队开始收到更多使用和开源请求。这种反馈让他们判断,方案具有超出单一业务的通用价值。

随后团队走过公司内部审核、材料整理与脱敏等过程,在 2022 年初对外开源。陈仁健在现场介绍了开源后接入范围的增长。主持人则将这段经历理解为一个从用户需要出发的循环:工具解决真实问题,使用者带来更多反馈,新需求再推动工具完善。

Flash 的历史,以及动效工作流还能走多远

最后的问题,把视野从 PAG 拉回整个动效工作流。陈仁健按照自己的经历,将 Flash 生态的发展概括为三个阶段:先输出可观看的图形内容,再加入交互形成富媒体,最后发展为可以承载游戏和应用的开发平台。

他回顾了从矢量动画、交互广告,到社交游戏、Flex 企业应用和 AIR 桌面工具的扩展。对他而言,这段历史的价值不仅在播放器,还在于设计、代码、编辑器和部署能够共同形成一套高效生产体系。早期工具链中将其他语言能力接入运行环境的尝试,也让他看到今天一些技术方向的历史呼应。

谈到 Flash 在移动时代的退场,他更强调平台规则与商业利益的影响,并讨论了跨平台工具与应用分发生态之间的关系。这是他在访谈中的历史解读。可以独立核实的是,Apple 在 2010 年确曾调整并随后放宽应用开发工具限制;Adobe 在 2017 年宣布 Flash Player 的终止计划时,也将开放 Web 标准的成熟和浏览器生态变化列为背景。两份历史材料可以帮助读者避免把一段复杂的产业变迁简化为单一原因。参见 Apple 2010 年声明;Adobe 2017 年说明

回到 PAG,他认为当时动效方案主要还在图形内容输出阶段,下一步是把交互能力接入工作流。他在录播中谈到后续版本和工具协作的计划,希望先做好这一步;至于再往后是否成为更完整的应用开发平台,他保留了可能性,没有把它作为已经确定的结果。

查看本期原视频与分段信息:我在腾讯做 PAG 动效方案 →