本文先容了增长前端团队自研的Webview框架下透明视频视觉增强决策，该决策在保证对视觉进行高度规复的同期可参预更少的栽植资本情欲印象bt，还能赢得更优的前端性能弘扬。
著作领先分析了市面上动画决策的优错误，然后阻难先容了透明视频的全体瞎想、已毕法式、使用历程和在运营举止中的使用案例。该决策通过在视频中添加透明通谈，利用OpenGL和Canvas已毕了视频动画，同期通过资源的预加载温柔存优化了加载过程，栽植者还可通过叠加svg和css3等其他本领进行氛围增强。但愿给到前端同学在栽植动效方面少量小小启发和助力。
01 配景
天然素人跟着App文娱元素的贬抑加多和交互的日益丰富，动画成果在用户体验中的地位越来越进击。可是，已毕高质料的动画成果需要较高的栽植资本，且当今尚无通用的本领决策。为了料理这一问题，诽谤或摈弃动效相关的研发资本，业界安宁降生了基于afx透明视频的视觉增强前端决策。
02 全体决策瞎想
2.1 常见动画决策及问题
为了在名目中已毕动画成果，当今业界现存的决策有：帧动画、lottie、gif、video等。这些决策中帧动画占用的体积较大，gif只守旧8位颜色，画质比较约略，mp4是不守旧透明配景，canvas/css关于复杂动效已毕比较复杂，而动画引擎对咱们名目来说栽植资本以及瞎想资本皆比较大。
参考百度APP和百度小法式在此场合的探索，更多H5应用场景下的咱们自研了一套可在WebView环境允许，好像无缺规复瞎想稿同期诽谤本领已毕资本和门槛的透明视频决策。
2.2 已毕法式
2.2.1 透明视频
领先情欲印象bt，咱们这边先先容一下样貌通谈和透明通谈的认识。
在视频中，每一帧图像皆不错被理解为多个样貌通谈(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文献。是以，咱们不错通过提前下载资源文献来已毕资源的预加载。
同期，为了资源的缓存，咱们不错利用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透明视频的视觉增强前端决策是一种灵验的规复高质料动画成果的法式。通过使用该决策，咱们不错快速、低资土产货已毕具有透明配景的动画成果，升迁用户体验。同期，该决策还具有资源体积小、性能优等特质，适用于各式场景视觉升迁。在将来，咱们还将贬抑优化该决策情欲印象bt，叠加更多本领才智如css3，svg等进行氛围增强，以更好地丰富视觉成果。