虛擬禮物是主播和觀眾互動的重要道具，也是主播很大一部分的收入來源。當刷滿足夠禮物數量時，直播間就會飛出炫酷的禮物動效，它既能刺激主播更好地直播，也能滿足用戶在虛擬世界的榮譽感，越有誠意的禮物會觸發越精彩的禮物動效，這也加深了主播和用戶之間的羈絆。

隨著直播平臺的發展，設計人員不斷創作出精美的禮物動效，相應的，動效加載時長和文件體積逐漸變大，而開發人員要需要能夠吃下這些負擔，在保證動效播放的高效和順滑的同時，不給用戶機器帶來負擔也不給設計人員的創作帶去局限，這便是我們本文需要考慮的幾個難點。本文將以奇秀PCweb端為例，從動效效果、性能、研發效率、兼容性等多角度談談禮物動效的發展。

演進之路

禮物動效的實現格式可以有很多種，不同文件格式之間各有利弊，從業務角度出發選取相對較優的方案是我們的目的。整條演進路上，我將帶領大家從Flash時代開始了解多種動效格式，希望在了解多種方案后，你能找到適合自己業務的較優方案。

動效格式

●過去的王者：Flash

●動圖：GIF、APNG、Webp

●開源和自研：Lottie、SVGA、IXD(自研)

●視頻：MP4

Flash時代

奇秀平臺剛開始上線的時候，視頻行業在網頁端還是Flash的天下，基于Flash的流媒體播放器幾乎是唯一選擇，拿它實現動效制作也是很自然的事情，對設計師來說使用Adobe Flash CC導出Flash動畫也是常規操作。

沒多久，Flash式微，html5技術飛速發展，替換Flash變成迫切需要做的事情。彼時團隊內部出現兩種實現方向：

●APNG動圖

●自研新的動效方案

APNG動圖

APNG（Animated Portable Network Graphics）誕生于2004年，是一個基于png的位圖動畫格式，擴展方法類似主要用于網頁的GIF 89a，仍對傳統PNG保留向下兼容，2017年主流瀏覽器幾乎都已經支持APNG。由于當時平臺上移動端一直是使用圖片序列生成的APNG/Webp作為動效資源，為了保持多端的統一，PCweb端也開始嘗試使用動圖作為后續的動效格式。

綜合對比文件大小、效果以及瀏覽器兼容性，選擇使用APNG作為新的動效格式。單純使用<img>標簽直接展示APNG會遇到如下幾個問題：

●小部分瀏覽器不支持播放APNG

●為了動效播放連貫性，需要預加載APNG

●APNG播放開始、過程、結束等時間點不受控

為了解決這幾個問題，我們開始研究APNG的文件格式結構，包括PNG的結構和擴展的acTL(動畫控制塊)、fcTL（幀控制塊）、fdAT（幀數據塊）。

基于對APNG的了解，對一些開源方案進行了調研測試，最終決定使用apng-js幫助我們解決上述幾個問題。使用apng-js解析APNG，可以得到APNG的很多信息，包括寬高、幀數、播放時長，以及播放過程中的每一幀畫面，有了這些再配合canvas便可以將APNG繪制和控制起來。下面是設計的播放器參數的結構：

{?src:?string,?// 動效地址selector:?string????????????// dom容器playStart:?()?=>?void,?// 動畫開始playProgress:?(index:?number, totalTime:?number, remainTime:?number) =>?void,?// 動畫過程playEnd:?()?=>?void,?// 動畫結束 };

上述設計以及播放、暫停、重播等使用方法，基本滿足對APNG播放的控制，且在后續業務中也可直接實現支持音效禮物，只要在start處讀配置播放對應的音頻資源，end處刪除音頻即可。為了提高動效播放的連貫性，在解析APNG后會將解析出的數據存入indexedDB，后面在播放同一動效時便可省去下載和格式解析的耗時。

這種方案對于設計來說也很方便，AE做好動畫后，使用格式工具和插件直接導出動圖即可。但是后面也發現了該方案的弊端，平臺對動效的要求越來越高，越酷炫的動效體積越大，很多復雜動效甚至達到5、6M。

自研IXD

后Flash時代，另一部分同學開始了動效自研的路子。APNG的本質是對PNG格式的擴展，除了向下兼容的IDAT（圖像數據塊）塊外，多了很多fdAT(幀數據塊)，每一塊都是完整的圖像，每多一幀就會做一張位圖的大小。如果每一數據塊不是完整位圖，而是圖集素材，且數據塊表示素材的位置、寬高、縮放等各種信息，那么素材復用率會極高，再輔以對應的解析，那么整體文件大小也會降低很多。

按照該思路去實現，封裝了自研的IXD格式，原本10M的PNG序列可以被拆解壓縮到1M以內，動效效果幾乎沒有收到影響。

對于使用端，只需要支持二進制數據和PNG位圖的處理，再按照設定的格式解析數據塊動態去渲染每一幀即可。對于開發人員，我們同步配套了web端SDK。

為了方便設計師生產，也配套開發了動效編輯器，將素材導入到工具中，通過復用素材和組合效果的方式，支持疊加多個圖層，最終導出IXD文件。對于有動態數據的動效，也支持變量占位，開發人員按照占位符取值，使得同一動效不同用戶看到的各不一樣。

同期市面上也出現了Airbnb的Lottie和YY的SVGA方案：

●Lottie需要AE安裝Bodymovin插件導出JSON文件給開發同學使用，有興趣的同學可以去了解下。

●SVGA也提供了AE插件，它做的事情其實和IXD類似。SVGA從AE源文件里提取素材，并將素材在時間軸里的表現（位移、旋轉、縮放等）導出，各端parser負責將這些還原到畫布上。它比IXD優秀的點在于，提供了IOS、Android端的解析SDK。

目前我們有APNG方案和IXD方案，包括市面上的SVGA方案，從播放可控到文件大小都有了一定的解決方案，似乎已經可以告一段落了。但這幾個方案依舊有各自的缺陷：

MP4

有沒有既能盡量保證AE動效，也能保證文件體積小的方案呢？有，用MP4！肯定會有人以為我在開玩笑，MP4都不支持透明，如何能夠用來承擔直播動效呢。我們先了解下透明是什么：圖像的透明使用Alpha通道表示，即RGBA里的A，該通道是一個8位灰度通道，由256級灰度來記錄圖像中的透明信息。說白了透明和RGB一樣都是顏色信息，雖然MP4不支持透明通道，只要想辦法給它展示出來就好了吧！還是canvas技術，只要我們可以用canvas把透明視頻畫出來就可以了。

通過和設計同學溝通，也參考了網絡上的文章和討論，最終決定將動效以上下同步的兩塊視頻拼接而成。上面的視頻保留原始的RGB信息，下面的視頻將A信息用黑白來表示，當MP4播放的時候分別讀取上下兩塊視頻進行拼接，得到完整了RGBA像素信息，然后繪制在目標畫布上。

代碼很簡單，canvas入門的同學應該都可以寫出來：

// 繪制視頻 buffer.drawImage(video,?0,?0, width, height *?2); // 讀取上下視頻圖像數據 let?imageData = buffer.getImageData(0,?0, width, height).data; let?alphaData = buffer.getImageData(0, height, width, height).data; // 塞alpha通道 for?(let?i =?3, len = imageData.length; i < len; i = i +?4) {imageData[i] = alphaData[i-1]; } // 繪制canvas output.putImageData(image,?0,?0,?0,?0, width, height);

本以為一切都特別順利，結果進行性能測試發現動效繪制時CPU暴漲，根本無法投入生產。原因其實看代碼也能發現，在視頻播放過程中密集遍歷處理像素點，計算頻率太高，所以CPU暴漲。既然單純canvas2d不行，我們就打算試試性能更好的WebGL。WebGL(Web Graphics Library)基于OpenGL，可以為HTML5 Canvas提供硬件3D加速渲染，也可以借助系統顯卡來在瀏覽器里更流暢地展示3D場景和模型。WebGL里的概念很多，有scene、camera、texture等，這里不會一一介紹，有興趣的同學可以去了解下。在實現中為了便捷，我們借助Three.js來實現功能，利用THREE.ShaderMaterial自定義的著色器去處理，以下是核心代碼：

gl_FragColor?= vec4(texture2D(texture, vec2(vUv.x,?0.5?+ vUv.y/2.)).rgb,texture2D(texture, vec2(vUv.x, vUv.y/2.)).r );

經過性能測試和對比，動效播放時的CPU使用率顯著降低：

總結

通過對以上各種方案的分析，從實際效果、資源大小、成本的角度我們得出以下表格：

我們的場景主要是直播間的禮物動效，暫時沒有什么動效的用戶交互需要，因此我們選擇讓設計同學充分發揮才能的MP4方案，設計同學無需學習第三方插件，也不用考慮資源大小而被迫抽幀導致降低動效質量。

我們堅持認為在禮物動效制作方面，MP4的是未來的大趨勢，視頻編解碼技術也在不斷發展，H.265、H.266，視頻文件體積將會不斷縮小，用戶等待的時長減少和帶寬節省都是很不錯的收益。

后續我們將繼續深入MP4方案，在格式解析和動態素材占位上下功夫，嘗試參照IXD的方案將配置信息寫到文件中，創建一個新的BOX塞入MP4文件里，播放時候先取這個BOX讀取配置信息，然后和后續的視頻幀播放時結合起來達到實現動態素材的效果。也將繼續研究WebGL，尋求更加高效的渲染方式，爭取進一步提高播放性能。

也許你還想看

干貨 | 奇秀直播連麥技術探索

愛奇藝奇秀直播 - 千萬級黑產風控平臺搭建

?掃一掃下方二維碼，更多精彩內容陪伴你！

總結

以上是生活随笔為你收集整理的从Flash到MP4，爱奇艺奇秀直播礼物特效精进之路的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。