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

作者 | 青玉

导读

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

全文3956字,预计阅读时间7分钟。

01 背景

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

02 整体方案设计

2.1 常见动画方案及问题

image.png

为了在项目中实现动画效果,目前业界现有的方案有:帧动画、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信息,从而实现透明效果的动画。

image.png

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标签。

image.png

2.3 使用流程

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

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

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

image.png

03 现有案例

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

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

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

image.png

04 小结

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

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

推荐阅读

百度一站式数据自助分析平台(TDA)建设

浅析如何加速商业业务实时化

登录系统演进、便捷登录设计与实现

一文带你完整了解Go语言IO基础库

百度交易中台之系统对账篇

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/821829.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【备忘】利用FFMpeg读取视频第一帧作为封面

前言 以前做过类似项目&#xff0c;当时是利用php 执行cli命令的方式去读取视频第一帧&#xff0c;现在2024年了服务器环境的升级再使用这种方式也不好了&#xff0c;现在用新的方式去实现这个简单的功能。&#xff08;有点困了不想写了&#xff09; 实现步骤 前提要先安装f…

开发语言漫谈-rust

前面介绍C语言家族时忘掉了rust&#xff0c;紧急补一篇。我们称C语言家族是指他们的语法相似&#xff0c;类似这样的&#xff1a; if(){}else{}就是C家族的。C、C的传统领域就是系统底层、硬件接口方向。C/C没有垃圾内存回收机制&#xff0c;完全靠程序员的自觉天赋&#xff0…

Blender生成COLMAP数据集

最近在做3DGS方向&#xff0c;整理了一下Blender生成自己的数据集。 1 Introduction 在Blender中构建场景&#xff08;light, object, camera&#xff09;&#xff0c;利用Blender的python脚本对其渲染&#xff0c;导出多视角下渲染出的RGB图和depth map&#xff0c;并将trans…

SpingBoot3相关

一、SpringBoot3-AOT与JIT介绍 1.1 AOT与JIT JIT&#xff08;Just-in-Time&#xff0c;实时编译&#xff09;Java跨平台的基础 AOT&#xff08;Ahead-of-Time&#xff0c;预编译或提前编译&#xff09;&#xff0c;无法跨平台 1.2 AOT的优点 启动和运行速度快&#xff1a;传…

OpenHarmony开发实例:【新闻客户端】

介绍 本篇Codelab我们将教会大家如何构建一个简易的OpenHarmony新闻客户端&#xff08;JS版本&#xff09;。应用包含两级页面&#xff0c;分别是主页面和详情页面&#xff0c;两个页面都展示了丰富的UI组件&#xff0c;其中详情页的实现逻辑中还展示了如何通过调用相应接口&a…

BetterDisplay Pro for Mac 显示器校准和优化软件

BetterDisplay Pro for Mac是一款适用于Mac电脑的显示器校准和优化软件。它可以帮助用户校准显示器的颜色、亮度、对比度和伽马值等参数&#xff0c;使得显示器更加准确和清晰&#xff0c;提高用户的工作效率。 BetterDisplay Pro for Mac v2.0.11激活版下载 这款软件具有直观的…

RUST腐蚀服务器添加 TAGS标签教程

RUST腐蚀服务器添加 TAGS标签教程 大家好我是艾西&#xff0c;一个做服务器租用的网络架构师。我们自己搭建架设的服务器在steam展示面板看到跟别人的不一样是咋回事&#xff1f; 这个其实就是服务器的一个标签&#xff0c;那么主要的作用就是让大家在选择服务器时更快更直接的…

pyqt5中sys.argv和app.exec_()是什么意思

在Python的PyQt程序中&#xff0c;sys.argv 和 app.exec_() 是与程序启动和事件循环处理相关的两个概念。 sys.argv: sys 是Python标准库中的一个模块&#xff0c;它提供了一些函数和变量&#xff0c;用来与Python解释器进行交互。argv 是sys模块中的一个列表&#xff0c;它包含…

景区导览系统平台|智能导览|数字人导游|VR游园

随着人工智能、元宇宙等技术的飞速发展&#xff0c;文旅行业正迎来一场前所未有的变革。道可云文旅元宇宙平台以其独特的智慧景区导览系统、元宇宙空间以及数字人导游等创新应用&#xff0c;为景区和游客带来了全新的旅游体验&#xff0c;也标志着文旅行业正式步入了元宇宙时代…

目标检测YOLO实战应用案例100讲-基于特征融合和预测细化的遥感图像目标检测(下)

目录 4.2 无锚方法CenterNet概述 4.3 特征增强和预测细化网络 4.3.1 中间监督的堆叠沙漏网络

课时97:脚本自动化_expect_语法实践

2.2.2 语法实践 这一节&#xff0c;我们从 基础知识、简单实践、小结 三个方面来学习。 基础知识 赋值语法 赋值&#xff1a;tcl 使用“set”关键字来定义参数&#xff0c;不必指定变量值的类型&#xff0c;因为变量值的类型仅一种——字符串 样式&#xff1a;set varName …

手写spring IOC底层源码来模拟spring如何利用多级缓存解决循环依赖的问题

在文章开始之前&#xff0c;先来看一张spring IOC加载过程的脑图吧 Spring IOC的加载过程 首先,当我们去new了一个applicationContext,它底层呢就会把我们配置的bean进行扫描,然后创建成一个一个的beanDefinition放在我们的beanDefinitionMap中,此时就有了一切创造bean的原料信…

Linux crontab命令教程:如何设置和管理定时任务(附实例详解和注意事项)

Linux crontab命令介绍 crontab&#xff08;全称&#xff1a;cron table&#xff09;&#xff0c;是Linux系统中用来定期执行任务的命令。它允许用户添加、删除或修改定时任务。crontab命令的名字来源于“cron table”&#xff0c;因为它使用了名为cron的任务调度程序来执行任…

计算机视觉动作识别——YOWO用于实时时空动作定位与识别的算法解析

摘要 时空动作定位要求将两种信息源整合到设计的架构中&#xff1a;(1) 来自先前帧的时间信息和(2) 来自关键帧的空间信息。当前的最先进方法通常使用单独的网络提取这些信息&#xff0c;并使用额外的机制进行融合以获得检测结果。YOWO是一个用于视频流中实时时空动作定位的统…

数图智慧零售解决方案,赋能零售行业空间资源价值最大化

数图智慧零售解决方案 赋能零售行业空间资源价值最大 在激烈的市场竞争中&#xff0c;如何更好地提升空间资源价值&#xff0c;提高销售额&#xff0c;成为行业关注的焦点。近日&#xff0c;NIQ发布的《2024年中国饮料行业趋势与展望》称&#xff0c;“在传统零售业态店内&…

分析ARP解析过程

1、实验环境 主机A和主机B连接到交换机&#xff0c;并与一台路由器互连&#xff0c;如图7.17所示&#xff0c;路由器充当网关。 图7.17 实验案例一示意图 2、需求描述 查看 ARP 相关信息,熟悉在PC 和 Cisco 设备上的常用命令,设置主机A和主机B为同一个网段网关设置为路由接…

idea 热部署插件JRebel

idea 热部署插件JRebel ​ 当开始开发web项目的时候&#xff0c;需要频繁的修改web页面&#xff0c;此时如果频繁的重启变得很麻烦&#xff0c;因此&#xff0c;可以在idea中集成JRebel插件&#xff0c;改动代码之后不需要重新启动应用程序。 1、安装JRebel ​ &#xff08;…

web server apache tomcat11-01-官方文档入门介绍

前言 整理这个官方翻译的系列&#xff0c;原因是网上大部分的 tomcat 版本比较旧&#xff0c;此版本为 v11 最新的版本。 开源项目 同时也为从零手写实现 tomcat 提供一些基础和特性的思路。 minicat 别称【嗅虎】心有猛虎&#xff0c;轻嗅蔷薇。 系列文章 web server apac…

安卓广播发送接收流程

本文基于Andorid 11。 一、registerReceiver registerReceiver(new MyRecevier(), new IntentFilter("com.example.broadcast"));动态注册广播接收器&#xff0c;参数&#xff1a;BroadcastReceiver, IntentFilter。 <receiver android:name".MyReceiver&…

Backend - Django Swagger

目录 一、安装依赖 二、配置环境 三、路由&#xff08;urls&#xff09; 四、swagger UI 界面 &#xff08;一&#xff09;UI 界面 &#xff08;二&#xff09;单引号问题&#xff1a;Expecting property name enclosed in double quotes 1. 原因 2. 解决 五、自定义s…