從零到一：實現通用一鏡到底H5
寫在前面
整個2018年都被工作支配，文章自17年就斷更了，每次看到有訊息提示過往的文章被收藏，或者有人點贊，都不勝唏噓。不過，凡事要始終保持積極的心態，現在迴歸為時未晚。最近有專案要做一鏡到底，那就稍作研究吧。
一鏡到底是什麼？
一鏡到底，是指拍攝中沒有cut情況，運用一定技巧將作品一次性拍攝完成。
那麼運用到H5上面，是怎樣的表現？網上案例也有很多，這裡推薦數英的一篇文章，應用盡有：
主要表現形式為以下幾類：
- 畫中畫（例如：網易-《娛樂畫傳》）
- 時空穿梭（例如：天貓-《穿越時空的邀請函》）
- 滾動動畫（例如：網易-《愛的形狀》）
- 視訊（這個好像沒什麼好說的…跟本文無關）
體驗方式主要有：
- 按住
- 滑動
技術需求分析
如上圖的《愛的形狀》，使用者滑動螢幕，方塊滾動，並且使用者能控制播放進度；期間方塊上面的紋理一直在變化，意味著動畫一直在播放。
提取要點，要實現一個一鏡到底H5，通常會有以下技術需求：
- 繪製畫面：這裡我們一般選用基於canvas的庫，效能會更好，也方便實現效果。
- 新增動畫：其中包括過渡、幀動畫，因此需要一個動畫庫。
- 進度控制：要實現通過使用者操作，來控制整個H5的前進、後退、暫停等，我們會需要進度控制相關的庫。
- 使用者操作：一鏡到底的H5一般都需要使用者操作以“播放”，按住或滑動，按住比較簡單，用原生事件實現就好，滑動相對複雜一點，涉及阻尼運動，因此需要一個滑動相關的庫。
有了需求，我們就可以相應去找解決方案了。繪圖有用3D的threejs的，動畫有人用anime.js，各有所好，能實現需求就行。
最終針對以上需求，我選用了AlloyTouch、TimelineMax、Pixi.js、TweenMax這幾個庫來實現通用的一鏡到底。各個框架的優點這裡就不贅述了，想了解詳情的可以自行搜尋，幾乎都有中文資料，也很容易使用。
實現步驟要點
- 用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方法，尋找到當前頁面進度的地方，可以簡單理解成撥動視訊播放器的進度條滑塊。
- 至此就可以通過使用者滑動操作，控制頁面元素的動畫播放、後退了。
你可能會問那怎樣實現上面說的幾種型別的一鏡到底？實際上，幾種型別的不同只是動畫變換方式不一樣而已。
- 畫中畫（縮放同時平移）
- 時空穿梭（以中心縮放）
- 滾動動畫（平移為主，期間播放其他動畫）
示例專案
簡單寫了個demo，如果感興趣的朋友可以拉下來自己把玩一下。
（注：專案中素材來源於網路，僅供交流學習使用，切勿商用！）
展望
這裡只實現了一個一鏡到底H5的主要效果部分，距離完成還有很多工作：
- 微信分享設定及引導
- 新增一個載入介面
- 新增音樂音效（用過 howler ，感覺不錯）
- 可能需要的生成海報（ html2canvas ，生成海報easy job）
結語
這次沒有用太多篇幅鋪開來講細節，主要是運用幾個庫組合來實現，而實際操作上還有很多地方要注意的，例如幀動畫的實現，滑動的速度控制，滑到頂部、底部的處理等等。實際應用上還要繼續打磨，畢竟一個漂亮的H5，是要花很多精力去構思，去優化體驗的。
最後也希望能認識到更多在H5領域有研究的小夥伴，可以互相交流，甚至一起工作！
email: [email protected]