codecamp

百度智能小程序 AFX透明视频

AFX 透明视频

AFX 透明视频是一种可支持透明背景的动画播放能力,帮助开发者实现更为沉浸、丰富的动画效果。

开发文档说明详见 animation-video 透明视频动画 。

透明视频 AFX 优质特性

  1. 可支持透明背景动画,实现沉浸式的动画效果展现。
  2. 视频文件体积较小,有利于提升小程序性能。
  3. 动画播放流畅,实现还原度高。

透明视频设计资源示例

如下所示,透明视频组件的视频源是一个格式为 mp4 的视频,它的左侧为动画的 alpha 通道信息,右侧为动画 rgb 通道信息,左右两侧动画同步播放。



制作透明视频 AFX 的步骤

步骤一:在 After Effects 里完成动画设计

在 After Effects 里进行动画设计,请注意图层中尽量不要出现“混合模式”。

步骤二:导入合成

在 AE 里新建一个合成,将设计完成的动画导入到此合成中,注意:合成帧速率建议设置为 25FPS,分辨率不可大于 800x800px,如需较大尺寸,后续可由开发人员根据场景进行等比扩大适配。

1. 创建合成文件; 2. 合成动画效果示意。

步骤三:将合成输出为序列帧

将合成输出为 PNG 序列帧,通道为 RGB+Alpha,命名方式需为纯数字,第一帧为 0,例:0、1、2……

步骤四:使用“AFX Creator”软件转化为 MP4 视频

下载“AFX Creator”软件并进行安装。(点击下载)将导出的序列帧文件夹拖拽到此软件中,并将序列帧转化为 MP4 视频。注意:帧速率设置需与AE中的合成帧速率 25FPS一致,视频质量为“高”。

步骤五:将生成的 MP4 视频提供给开发人员

最后将生成的 MP4 视频提供给开发人员,由开发人员使用透明视频 AFX 组件能力进行下一步开发。开发文档说明详见 animation-video 透明视频动画


百度智能小程序 Lottie 动画
百度智能小程序 视觉资源下载
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

百度智能小程序开发文档

百度智能小程序 组件

百度智能小程序 地图

百度智能小程序 画布

百度智能小程序 API

百度智能小程序 界面

百度智能小程序 关注小程序引导组件

百度智能小程序 自定义组件

百度智能小程序 媒体

百度智能小程序 设备

百度智能小程序 拨打电话

百度智能小程序 内存警报

百度智能小程序 手机联系人

百度智能小程序 用户截屏事件

百度智能小程序 第三方平台

百度智能小程序 开放接口

百度智能小程序 百度收银支付

百度智能小程序 分包预下载

百度智能小程序 数据分析

百度智能小程序 服务端

百度智能小程序 云开发

百度智能小程序 初始化

百度智能小程序 云函数

百度智能小程序 服务端初始化

百度智能小程序 服务器获取上下文

百度智能小程序 服务端云函数

百度智能小程序 开发教程

百度智能小程序 功能开发

百度智能小程序 基本原理

百度智能小程序 小程序自动化

百度智能小程序 视频教程

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }