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

寫在前面

整個2018年都被工做支配，文章自17年就斷更了，每次看到有消息提示過往的文章被收藏，或者有人點贊，都不勝唏噓。不過，凡事要始終保持積極的心態，如今迴歸爲時未晚。最近有項目要作一鏡到底，那就稍做研究吧。

一鏡究竟是什麼？

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

那麼運用到H5上面，是怎樣的表現？網上案例也有不少，這裏推薦數英的一篇文章，應用盡有：

一鏡到底H5大合集：一口氣看盡一個H5的套路

主要表現形式爲如下幾類：

• 畫中畫（例如：網易-《娛樂畫傳》）
• 時空穿梭（例如：天貓-《穿越時空的邀請函》）
• 滾動動畫（例如：網易-《愛的形狀》）
• 視頻（這個好像沒什麼好說的...跟本文無關）

體驗方式主要有：

• 按住
• 滑動

技術需求分析

如上圖的《愛的形狀》，用戶滑動屏幕，方塊滾動，而且用戶能控制播放進度；期間方塊上面的紋理一直在變化，意味着動畫一直在播放。

提取要點，要實現一個一鏡到底H5，一般會有如下技術需求：

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

有了需求，咱們就能夠相應去找解決方案了。繪圖有用3D的threejs的，動畫有人用anime.js，各有所好，能實現需求就行。

最終針對以上需求，我選用了AlloyTouch、TimelineMax、Pixi.js、TweenMax這幾個庫來實現通用的一鏡到底。各個框架的優勢這裏就不贅述了，想了解詳情的能夠自行搜索，幾乎都有中文資料，也很容易使用。

實現步驟要點

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. 至此就能夠經過用戶滑動操做，控制頁面元素的動畫播放、後退了。

你可能會問那怎樣實現上面說的幾種類型的一鏡到底？實際上，幾種類型的不一樣只是動畫變換方式不同而已。

• 畫中畫（縮放同時平移）
• 時空穿梭（以中心縮放）
• 滾動動畫（平移爲主，期間播放其餘動畫）

示例項目

簡單寫了個demo，若是感興趣的朋友能夠拉下來本身把玩一下。

點此查看倉庫

點此查看demo

（注：項目中素材來源於網絡，僅供交流學習使用，切勿商用！）

展望

這裏只實現了一個一鏡到底H5的主要效果部分，距離完成還有不少工做：

• 微信分享設置及引導
• 添加一個加載界面
• 添加音樂音效（用過howler，感受不錯）
• 可能須要的生成海報（html2canvas，生成海報easy job）
• ...

結語

此次沒有用太多篇幅鋪開來說細節，主要是運用幾個庫組合來實現，而實際操做上還有不少地方要注意的，例如幀動畫的實現，滑動的速度控制，滑到頂部、底部的處理等等。實際應用上還要繼續打磨，畢竟一個漂亮的H5，是要花不少精力去構思，去優化體驗的。

最後也但願能認識到更多在H5領域有研究的小夥伴，能夠互相交流，甚至一塊兒工做！

email: vincent@shikehuyu.com