AFX 透明视频
AFX 透明视频是一种可支持透明背景的动画播放能力,帮助开发者实现更为沉浸、丰富的动画效果。
开发文档说明详见animation-video 透明视频动画。
透明视频 AFX 优质特性
- 可支持透明背景动画,实现沉浸式的动画效果展现。
- 视频文件体积较小,有利于提升小程序性能。
- 动画播放流畅,实现还原度高。你的浏览器不支持该视频播放
透明视频设计资源示例
如下所示,透明视频组件的视频源是一个格式为 mp4 的视频,它的左侧为动画的 alpha 通道信息,右侧为动画rgb 通道信息,左右两侧动画同步播放。
你的浏览器不支持该视频播放
制作透明视频 AFX 的步骤
步骤一:在After Effects里完成动画设计
在 After Effects 里进行动画设计,请注意图层中尽量不要出现“混合模式”。
你的浏览器不支持该视频播放
步骤二:导入合成
在AE里新建一个合成,将设计完成的动画导入到此合成中,注意:合成帧速率不可大于 60FPS,分辨率不可大于 800x800px,如需较大尺寸,后续可由开发人员根据场景进行等比扩大适配。
- 创建合成文件;2. 合成动画效果示意。
步骤三:将合成输出为序列帧
将合成输出为PNG序列帧,通道为 RGB+Alpha,命名方式需为纯数字,第一帧为0,例:0、1、2…
步骤四:使用“AFX Creator”软件转化为MP4视频
下载“AFX Creator”软件并进行安装。(点击下载)将导出的序列帧文件夹拖拽到此软件中,并将序列帧转化为MP4视频。注意:帧速率设置需与AE中的合成帧速率一致,视频质量为默认值。
步骤五:将生成的MP4视频提供给开发人员
最后将生成的MP4视频提供给开发人员,由开发人员使用透明视频AFX组件能力进行下一步开发。开发文档说明详见animation-video 透明视频动画