序列幀&一鏡到底H5開發實現分析

什麼是序列幀類H5

咱們遇到的一類H5，其中包括「強動畫」效果，UI設計提供的是一系列序列幀的素材時，前端將序列幀素材還原成動畫進行展現的H5.

幾種實現方法

gif

採用gif格式的圖片來展現序列幀動畫，會存在圖片文件大，移動端失真以及安卓端卡頓，以及循環播放狀況下有時只會播放一次的狀況。只能做爲零碎的點綴素材時使用，不推薦複雜動畫使用gif來實現。

canvas基本實現

經過canvas畫布中經過drawImage方法動態改變序列幀圖片，根據時間間隔，重複進行畫布的清除和重繪，清除前一幀畫面內容，建立後一幀畫面。

改方法只適用於簡單的動畫元素，且頁面不該該有動做和動畫關聯，好比點擊切換動畫，此時因爲頻繁的重繪，會阻塞js的其餘的處理，好比計時器等。

相關案例 聖誕跑H5.

解決阻塞問題的方法：針對計時器等計算操做，能夠經過web worker線程進行計算，和主線程進行通知。

vFramePlayer序列幀圖片播放插件

該插件是一款序列幀圖片播放插件，支持經過canvas\img播放，可控制播放速度，可循環播放、倒序播放，設置循環播放及監聽事件等功能。在canvas的處理狀況下已經進行了優化處理。

使用該插件須要注意的是，提早預加載全部的序列幀圖片，而且將其做爲數組參數傳給插件。

CreateJs

CreateJS是基於HTML5開發的一套模塊化的庫和工具。經過結合一些經常使用的庫如 EaselJs、TweenJs等能夠很是快捷的開發基於HTML5的動畫和交互應用。

在 Adobe Animate 使用HTML5標籤元素的功能，建立接口，動畫，和資源庫，並能夠直接導出可讀性強的，高效的 CreateJS 代碼。

ZOë是一個AIR應用出口SWF動畫做爲EaselJS spritesheets用於畫布和CSS。保持幀標籤、重用類似幀及更多功能!

該庫在微信小遊戲的開發中較常見。

PixiJS

Pixi.js 是一個開源的HTML5 2D 渲染引擎，使用 WebGL 實現，不支持的瀏覽器會自動下降到 Canvas 實現。能幫助展現、驅動和管理富有交互性的圖形、製做遊戲。使用JavaScript以及其餘HTML5技術，結合PixiJS引擎，能夠建立出豐富的交互式圖形，跨平臺的應用程序和遊戲。PixiJS 的目標是提供一個快速且輕量級的2D庫，並能兼容全部設備。此外，讓開發者無需瞭解WebGL，就能夠感覺到硬件加速的力量。

PixiJS針對頁面中全部的動畫元素均可以獨立進行相關設置和操做、增長事件，方便咱們根據須要來實現對應的展現和交互。

基本的使用方法是：

建立一個場景；

在場景中建立舞臺（stage）和渲染器（render）；

畫面中的元素是以建立精靈（sprite）的方式來實現；

以後進行展現和動畫的播放；

針對序列幀素材，咱們能夠經過建立雪碧圖（CSS Sprite，是一種CSS圖像合併技術，該方法是將小圖標和背景圖像合併到一張圖片上，而後利用css的背景定位來顯示須要顯示的圖片部分）的形式來減小加載資源請求，此處推薦Texturepacker工具，堪稱PixiJS開發的輔助神器。

不只僅序列幀可以放到雪碧圖裏面，其餘的素材也能夠根據實際狀況放到雪碧圖中，這樣可以有效下降頁面資源請求數

Texturepacker能夠根據選擇的對應框架，來生成PixiJS所須要的雪碧圖素材以及相關的json文件，方便使用PixiJs的開發。經過其loader功能加載素材獲取資源信息。

案例：

微業貸抽籤H5(其中的抽籤動做和光效)

H5場景小動畫實現之PixiJs實戰

優勢：便於UI設計根據設計狀況直接輸出序列幀素材，經過前端開發可以相關完整的還原其動畫效果

Phaser

Phaser 是一款快速、免費以及開源 HTML5 遊戲框架，它支持 WebGL 和 Canvas 兩種渲染模式，能夠在任何 Web 瀏覽器環境下運行，遊戲能夠經過第三方工具轉爲 iOS、Android 支持的 Native APP，容許使用 JavaScript 和 TypeScript 進行開發。和上面提到的PixiJS相似。具體的使用方法你們自行參考吧，只做爲引入。

Egret

Egret是一套HTML5遊戲開發解決方案，產品包含Egret Engine，Egret Wing，EgretVS，Res Depot，Texture Merger，TS Conversion，Egret Feather，Egret Inspector等 ...

什麼是一鏡到底

一鏡到底，是指拍攝中沒有cut狀況，運用必定技巧將做品一次性拍攝完成。

表現形式

• 畫中畫（例如：網易-《娛樂畫傳》， 縮放同時平移）
• 時空穿梭（例如：天貓-《穿越時空的邀請函》， 以中心縮放）
• 滾動動畫（例如：網易-《愛的形狀》，平移爲主，期間播放其餘動畫）
• 視頻（這個好像沒什麼好說的...跟本文無關）

實現方法

技術需求

1. 繪製畫面：這裏咱們通常選用基於canvas的庫，性能會更好，也方便實現效果。（如上面提到的CreateJs、PixiJs、Egret等）
2. 添加動畫：其中包括過渡、幀動畫，所以須要一個動畫庫。（如 TweenMax等）
3. 進度控制：要實現經過用戶操做，來控制整個H5的前進、後退、暫停等，咱們會須要進度控制相關的庫。（如TimelineMax）
4. 用戶操做：一鏡到底的H5通常都須要用戶操做以「播放」，按住或滑動，按住比較簡單，用原生事件實現就好，滑動相對複雜一點，涉及阻尼運動，所以須要一個滑動相關的庫。（如 AlloyTouch等）

實現基本流程

1. 用Pixi建立場景，加入到想要加入的DOM容器當中。
2. 用Pixi.loader加載精靈圖。
3. 將精靈圖、背景及文本等元素繪製出來。
4. 用TimelineMax建立一個總的Timeline，初始設置paused爲true，能夠設定整條Timeline的長度爲1。
5. 用TweenMax建立好過渡動畫，而後將TweenMax加入到Timeline中，duration好比是佔10%的話，就設定爲0.1，從滾動到30%開始播放動畫的話，delay就設置爲0.3。
6. 用AlloyTouch建立滾動監聽，並設置好滾動高度，例如1000。
7. 監聽AlloyTouch的change事件，用當前滾動值 / 滾動高度 獲得當前頁面的進度。
8. 調用總Timeline的seek方法，尋找到當前頁面進度的地方，能夠簡單理解成撥動視頻播放器的進度條滑塊。
9. 至此就能夠經過用戶滑動操做，控制頁面元素的動畫播放、後退了。

總結

經過上面針對序列幀和一鏡到底的簡單梳理，既可以讓前端比較好的還原設計給出的動畫過程，還可以以此來輔助相關類型的H5的開發，知足更多的場景需求的開發。

---

參考資源：

從零到一：實現通用一鏡到底 H5