基于afx透明视频的视觉增强前端方案
作者 | 青玉
导读
本文介绍了增长前端团队自研的Webview框架下透明视频视觉增强方案,该方案在保证对视觉进行高度还原的同时可投入更少的开发成本,还能获得更优的前端性能表现。文章首先分析了市面上动画方案的优缺点,然后详细介绍了透明视频的整体设计、实现方法、使用流程和在运营活动中的使用案例。该方案通过在视频中添加透明通道,利用OpenGL和Canvas实现了视频动画,同时通过资源的预加载和缓存优化了加载过程,开发者还可通过叠加svg和css3等其他技术进行氛围增强。希望给到前端同学在开发动效方面一点小小启发和助力。
全文2456字,预计阅读时间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——————
推荐阅读
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
开源日报 | 李厂长一句话得罪整个IT行业;全球首个AI原生操作系统;开源vs.闭源LLM表现;揭底大模型训练成本
欢迎阅读 OSCHINA 编辑部出品的开源日报,每天更新一期。 # 2024.4.16 今日要点 华为自用的时序数据库开源啦,来看看水平怎么样? 2022 年底,又一重磅产品加入了开源时序数据库这一赛道,并在短短一年内在 60 余家企业测试和生产落地,吸引了 70 + 来自国内外重点高校和企业的贡献者 ——openGemini,华为开源的分布式时序数据库,主要聚焦于海量时序数据的存储和分析,通过技术创新,简化业务系统架构,降低海量时序数据的存储成本,提升时序数据的存储和分析效率。 百度宣布全球首个 AI 原生操作系统 DuerOS X 4 月 16 日,Create 2024 百度 AI 开发者大会在深圳举办。小度科技在会上宣布了全球首个AI 原生操作系统 DuerOS X。 据介绍,该系统基于文心大模型进行了全面升级,在多模态感知和拟人化呈现方面有了重要突破。通过 DuerOS X,小度的人机交互体验将实现质的飞跃,为用户提供更加自然、智能的交互方式。 文心大模型是百度在人工智能领域的重要成果,它为 DuerOS X 提供了强大的技术支持。搭载文心大模型的 DuerOS X 不仅更加...
- 下一篇
秒开率破90%!交易后台渲染性能优化 | 得物技术
一、前言 一直以来,体验都是得物技术部的关键词之一,对于前端开发而言,提高用户体验更是一项至关重要的工作。 本文从本次交易后台性能优化实践出发,同时介绍应用整体架构和设计,希望可以给参与网站性能建设的同学提供一定的学习和参考价值。 二、系统简介 交易后台是现有交易流程主要系统,包含商品、出价、商家、订单等二级业务域,其承载了交易的核心任务,在交易平台的整体架构中占据着非常重要的地位。 业务背景:整体日均 PV 数达到 10w+,其中 SPU 场景占比超过一半,由于页面功能结构复杂的原因,运营的使用体验和交易效率有一定程度上的影响。 技术背景:应用基于 qiankun 微前端架构,首屏加载资源过多,包括主子应用 JS 和样式文件,图片和其他静态资源,数十个子应用路由信息和数百个菜单项,以及接入的一些三方 SDK 等。 三、性能现状 先看优化前的首屏效果(没有开慢倍速): 可以从动图看出页面加载速度、白屏时间都不太理想,显然和我们的目标首屏秒开还有一段距离,为了实现首屏秒开的目标,可以先从以下几个方面进行分析。 性能看板分析 Chrome Performance 火焰图在页面性能问题分析...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- Windows10,CentOS7,CentOS8安装Nodejs环境
- CentOS7,CentOS8安装Elasticsearch6.8.6
- Linux系统CentOS6、CentOS7手动修改IP地址
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- CentOS7设置SWAP分区,小内存服务器的救世主
- CentOS7安装Docker,走上虚拟化容器引擎之路
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- Red5直播服务器,属于Java语言的直播服务器
- CentOS8安装MyCat,轻松搞定数据库的读写分离、垂直分库、水平分库