背景
隨著日益增長(zhǎng)的需求，直播領(lǐng)域各個(gè)場(chǎng)景對(duì)動(dòng)效資源的要求也越來(lái)越高。動(dòng)效資源是直播領(lǐng)域一個(gè)十分重要的表現(xiàn)形式。動(dòng)效資源可應(yīng)用在很多的場(chǎng)景下，例如禮物動(dòng)效、玩法動(dòng)效等。
禮物動(dòng)效也經(jīng)歷了不同的幾個(gè)階段 ： 原生動(dòng)效? ---> 序列幀 --->? 自研基于矢量動(dòng)畫(huà)的Lottie/SVGA ---> 視頻動(dòng)畫(huà)。
有一天，產(chǎn)品大佬需要技術(shù)在一個(gè)禮物動(dòng)效上增加用戶(hù)和主播的昵稱(chēng)、頭像，由于禮物動(dòng)效有很多粒子效果，3D效果，用原來(lái)的SVGA/Lottie方案十分難實(shí)現(xiàn)；但是用MP4動(dòng)效，又不支持在視頻指定幀上，插入文字和頭像動(dòng)畫(huà)。因此，自研一套可支持動(dòng)態(tài)插入業(yè)務(wù)元素的混合MP4方案十分必要。
本章主要介紹目前最新的可支持動(dòng)態(tài)插入業(yè)務(wù)元素的混合MP4方案（YYEVA）的整體框架。文章末尾有YYEVA開(kāi)源的地址，希望大家給YYEVA團(tuán)隊(duì)給個(gè)Star
YYEVA項(xiàng)目介紹
? YYEVA的目標(biāo)是 提供 一套全新的動(dòng)畫(huà)解決方案，滿(mǎn)足靜態(tài)MP4可插入動(dòng)態(tài)業(yè)務(wù)元素，并實(shí)現(xiàn)一套完整的工具鏈，覆蓋設(shè)計(jì)側(cè)的Adobe After Effects動(dòng)畫(huà)輸出工具，到客戶(hù)端渲染SDK。降低設(shè)計(jì)師的使用成本和業(yè)務(wù)接入成本，賦能上游業(yè)務(wù)營(yíng)收。目前已開(kāi)源相關(guān)代碼。請(qǐng)點(diǎn)擊?YYEVA 了解相關(guān)信息
?1. YYEVA是一個(gè) 輕量級(jí)、高性能、跨平臺(tái)、動(dòng)態(tài)的MP4資源解決方案
2.? YYEVA包含一套從設(shè)計(jì)工具AE插件、在線(xiàn)預(yù)覽工具、客戶(hù)端渲染SDK的完整工具鏈
3.? 基于仿射矩陣運(yùn)算，得到圖層每一幀的位置信息
4.? 集成了MP4（avc/hevc）封裝協(xié)議等相關(guān)功能
5. 高度可擴(kuò)展性，可還原設(shè)計(jì)師的全部細(xì)節(jié)
6. 支持 Web、Android、iOS等
YYEVA工作流程
YYEVA為設(shè)計(jì)師開(kāi)發(fā)了一個(gè)AE插件，用戶(hù)為設(shè)計(jì)側(cè)輸出一個(gè)符合YYEVA規(guī)范的MP4資源，設(shè)計(jì)師在拿到資源后，可以在插件提供的預(yù)覽工具，查看在不同端的展示效果，可以及時(shí)調(diào)整。最終確認(rèn)資源后，輸出一個(gè)YYEVA的MP4資源，給產(chǎn)品配置到線(xiàn)上，移動(dòng)端拿到資源后，就可以解析、加載、設(shè)置元素、渲染。工作流程如下圖所示：
?插入什么樣的元素
?元素的形狀和大小
?插入在屏幕上的位置
都應(yīng)該有設(shè)計(jì)師來(lái)指定?？蛻?hù)端拿到資源后，只需要按照設(shè)計(jì)師指定的規(guī)則，插入相應(yīng)的業(yè)務(wù)元素即可，而無(wú)需關(guān)心任何的內(nèi)在實(shí)現(xiàn)。因此，為了降低設(shè)計(jì)師的使用成本和業(yè)務(wù)接入成本，YYEVA為設(shè)計(jì)師制作了一個(gè)AE擴(kuò)展(YYConverterMP4),以及支持渲染該資源的渲染SDK播放器（YYEVAPlayer）。
?YYEVA特色優(yōu)勢(shì)
?體積小
? Json描述信息使用了zlib壓縮，再通過(guò)base64寫(xiě)入MP4中，首先對(duì)MP4無(wú)任何的影響，同時(shí)Json數(shù)據(jù)體積得到大大壓縮。
? 擴(kuò)展性高
? 插件基于Adobe After Effects的擴(kuò)展開(kāi)發(fā)，可讀取AE所有特性。對(duì)于新的AE特性，可以及時(shí)對(duì)插件進(jìn)行開(kāi)發(fā)支持。因?yàn)镴son信息都是基于結(jié)果動(dòng)畫(huà)來(lái)開(kāi)發(fā)的，只會(huì)把動(dòng)態(tài)元素的位置信息寫(xiě)入，所以無(wú)需客戶(hù)端sdk再進(jìn)行支持。
? 完善的工具鏈
? 目前插件測(cè)內(nèi)部擴(kuò)充了AE無(wú)法直接導(dǎo)出MP4的能力，也支持導(dǎo)出動(dòng)態(tài)元素視頻，同時(shí)在插件內(nèi)部，還支持預(yù)覽視頻，設(shè)計(jì)師無(wú)需跳轉(zhuǎn)使用其他工具，十分便捷。渲染SDK目前已支持 iOS、Android、iOS的接入。
目前YYEVA已經(jīng)開(kāi)源,請(qǐng)大家為YYEVA團(tuán)隊(duì)點(diǎn)擊寶貴的Star
