什麼是序列幀類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(其中的抽籤動作和光效)
優點：便於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情況，運用一定技巧將作品一次性拍攝完成。
表現形式
- 畫中畫（例如：網易-《娛樂畫傳》， 縮放同時平移）
- 時空穿梭（例如：天貓-《穿越時空的邀請函》， 以中心縮放）
- 滾動動畫（例如：網易-《愛的形狀》，平移為主，期間播放其他動畫）
- 視訊（這個好像沒什麼好說的...跟本文無關）
實現方法
技術需求
- 繪製畫面：這裡我們一般選用基於canvas的庫，效能會更好，也方便實現效果。（如上面提到的CreateJs、PixiJs、Egret等）
- 新增動畫：其中包括過渡、幀動畫，因此需要一個動畫庫。（如 TweenMax等）
- 進度控制：要實現通過使用者操作，來控制整個H5的前進、後退、暫停等，我們會需要進度控制相關的庫。（如TimelineMax）
- 使用者操作：一鏡到底的H5一般都需要使用者操作以“播放”，按住或滑動，按住比較簡單，用原生事件實現就好，滑動相對複雜一點，涉及阻尼運動，因此需要一個滑動相關的庫。（如 AlloyTouch等）
實現基本流程
- 用Pixi建立場景，加入到想要加入的DOM容器當中。
- 用Pixi.loader載入精靈圖。
- 將精靈圖、背景及文字等元素繪製出來。
- 用TimelineMax建立一個總的Timeline，初始設定paused為true，可以設定整條Timeline的長度為1。
- 用TweenMax建立好過渡動畫，然後將TweenMax加入到Timeline中，duration比如是佔10%的話，就設定為0.1，從滾動到30%開始播放動畫的話，delay就設定為0.3。
- 用AlloyTouch建立滾動監聽，並設定好滾動高度，例如1000。
- 監聽AlloyTouch的change事件，用當前滾動值 / 滾動高度 得到當前頁面的進度。
- 呼叫總Timeline的seek方法，尋找到當前頁面進度的地方，可以簡單理解成撥動視訊播放器的進度條滑塊。
- 至此就可以通過使用者滑動操作，控制頁面元素的動畫播放、後退了。
總結
通過上面針對序列幀和一鏡到底的簡單梳理，既能夠讓前端比較好的還原設計給出的動畫過程，還能夠以此來輔助相關型別的H5的開發，滿足更多的場景需求的開發。
參考資源：