基于 afx 透明视频的视觉增强前端方案

2024-04-16
上海
本文字数：2170 字
阅读完需：约 7 分钟

作者 | 青玉

导读
本文介绍了增长前端团队自研的 Webview 框架下透明视频视觉增强方案，该方案在保证对视觉进行高度还原的同时可投入更少的开发成本，还能获得更优的前端性能表现。文章首先分析了市面上动画方案的优缺点，然后详细介绍了透明视频的整体设计、实现方法、使用流程和在运营活动中的使用案例。该方案通过在视频中添加透明通道，利用 OpenGL 和 Canvas 实现了视频动画，同时通过资源的预加载和缓存优化了加载过程，开发者还可通过叠加 svg 和 css3 等其他技术进行氛围增强。希望给到前端同学在开发动效方面一点小小启发和助力。

全文 2170 字，预计阅读时间 7 分钟。

01 背景

随着 App 娱乐元素的不断增加和交互的日益丰富，动画效果在用户体验中的地位越来越重要。然而，实现高质量的动画效果需要较高的开发成本，且目前尚无通用的技术方案。为了解决这一问题，降低或消除动效相关的研发成本，业界逐渐诞生了基于 afx 透明视频的视觉增强前端方案。

02 整体方案设计

2.1 常见动画方案及问题

为了在项目中实现动画效果，目前业界现有的方案有：帧动画、lottie、gif、video 等。这些方案中帧动画占用的体积较大，gif 只支持 8 位色彩，画质比较粗糙，mp4 是不支持透明背景，canvas/css 对于复杂动效实现比较复杂，而动画引擎对我们项目来说开发成本以及设计成本都比较大。

参考百度 APP 和百度小程序在此方向的探索，更多 H5 应用场景下的我们自研了一套可在 WebView 环境允许，能够完美还原设计稿同时降低技术实现成本和门槛的透明视频方案。

2.2 实现方法

2.2.1 透明视频

首先，我们这边先介绍一下颜色通道和透明通道的概念。

在视频中，每一帧图像都可以被分解为多个颜色通道(RGB 通道)，如红、绿、蓝等。除此之外，还可以包含一个透明通道（Alpha 通道），用于表示图像中各个像素的透明度。透明通道中的数值范围通常是 0 到 255，其中 0 表示完全透明，255 表示完全不透明。

mp4 在默认的情况下，只存在 RGB 通道，不存在透明通道，所以我们需要在视频中额外开辟一个区域，去放置这些透明信息。

为了还原视频帧中的 Alpha 信息，我们在将序列帧合成视频时，将图像的 RGB 通道和 Alpha 通道分离，并将 Alpha 作为一张新图片的 RGB 值（新图片的 RGB 都等于原始图片的 Alpha），然后将这两张图片合成为一张对称的图片。这样，在播放视频时就可以还原图片的 Alpha 信息，从而实现透明效果的动画。

2.2.2 动效资源的预加载以及缓存

对于需要重复播放的动效来说，资源的缓存以及资源的预加载是比较重要的。

对于<video>标签来说，src 除了可以直接赋值一个网络 URL 外，还可以使用URL.createObjectURL来播放已经被下载到本地的 blob 文件。所以，我们可以通过提前下载资源文件来实现资源的预加载。

const loadVideo = async (path) =>{    // 下载blob格式的mp4文件    // 或者从indexdb中获取缓存的视频文件    return blob;}const blob = await loadVideo(path);path = URL.createObjectURL(blob);
// 设置视频源video.src = path;

复制代码

同时，为了资源的缓存，我们可以利用 indexDB 存储我们下载的 blob 文件，所以整个动效的加载过程如下：先去判断本地 indexDB 中是否已经存在对应的视频资源，如果存在，则直接读取对应的文件，如果不存在，则去下载视频资源，同时将视频资源缓存到本地，方便后续播放时重复使用，节约下载时间；然后再将下载后的资源转换为对象 URL，赋值给 video 标签。

2.3 使用流程

视觉同学制作完动效后，将 AE 文件导出为序列帧，再使用 AFXCreater 将序列帧合成为对应的产出文件。然后研发侧获得对应的视频文件后，在工程文件中使用 afx sdk 播放对应的动效文件。

在 afx sdk1.0 中，使用 drawImage 获得 mp4 的视频帧信息，然后再使用 cpu 去计算混合后的效果，导致在动效播放时会大量占用主线程的算力，导致页面会十分卡顿，页面 fps 只有十几，同时 cpu 占用经常达到 100%。

后来为了优化性能，就改成使用 OpenGL 合成最终的 rgba 图片，这样页面 fps 就达到 30~60fps。

03 现有案例

目前该方案大量运用到了增长的大型活动中，包括日常运营和多年的春节活动，累计 14+。同之前的动效方案相比，实现一个复杂且还原度高的动效，开发成本从原本的 2 天缩短到 0.5 天，开发效率提升了 75%。高度还原效果的同时也提高了视觉的产出效率，方便视觉在初始情况下，提供一个原始的动效视频给研发同学进行占位开发，在后期替换为正式的动效文件，这样让视觉的排期较为富裕，交付更加精美的动效。

在今年百度春节项目中，我们大量使用了该方案，并成功地完整复刻了视觉稿。以今年的《集好运分 3 亿》为例，今年项目中有 5 个复杂动效使用了 afx 方案，其余采用了 css 实现。

比如使用引导动效和转场动效，在利用 afx 方案高度还原动效后，技术再叠加 css 进行氛围动效渲染，并且为防止 afx 播放失败导致的页面异常，我们也会增加相应的兜底。

04 小结

基于 afx 透明视频的视觉增强前端方案是一种有效的还原高质量动画效果的方法。通过使用该方案，我们可以快速、低成本地实现具有透明背景的动画效果，提升用户体验。同时，该方案还具有资源体积小、性能优等特点，适用于各种场景视觉提升。在未来，我们还将不断优化该方案，叠加更多技术能力如 css3，svg 等进行氛围增强，以更好地丰富视觉效果。

——————END——————

推荐阅读

发布于: 1 小时前阅读数: 12