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

寫在前面

整個2023年都被工作支配，文章自17年就斷更了，每次看到有訊息提示過往的文章被收藏，或者有人點讚，都不勝唏噓。不過，凡事要始終保持積極的心態，現在回歸為時未晚。最近有專案要做一鏡到底，那就稍作研究吧。

一鏡到底是什麼？

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

那麼運用到h5上面，是怎樣的表現？網上案例也有很多，這裡推薦數英的一篇文章，應用盡有：一鏡到底h5大合集：一口氣看盡乙個h5的套路(

主要表現形式為以下幾類：

體驗方式主要有：

技術需求分析

提取要點，要實現乙個一鏡到底h5，通常會有以下技術需求：

繪製畫面：這裡我們一般選用基於canvas的庫，效能會更好，也方便實現效果。

新增動畫：其中包括過渡、幀動畫，因此需要乙個動畫庫。

有了需求，我們就可以相應去找解決方案了。繪圖有用3d的threejs的，動畫有人用*****.js，各有所好，能實現需求就行。

實現步驟要點

用pixi建立場景，加入到想要加入的dom容器當中。

用pixi.loader載入精靈圖。

將精靈圖、背景及文字等元素繪製出來。

用timelinemax建立乙個總的timeline，初始設定paused為true，可以設定整條timeline的長度為1。

用alloytouch建立滾動監聽，並設定好滾動高度，例如1000。

監聽alloytouch的change事件，用當前滾動值 / 滾動高度得到當前頁面的進度。

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

示例專案

簡單寫了個demo，如果感興趣的朋友可以拉下來自己把玩一下。

點此檢視倉庫：

點此檢視demo：

展望這裡只實現了乙個一鏡到底h5的主要效果部分，距離完成還有很多任務作：

新增乙個載入介面

新增**音效（用過howler，感覺不錯）

可能需要的生成海報（html2canvas，生成海報easy job）

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

最後也希望能認識到更多在h5領域有研究的小夥伴，可以互相交流，甚至一起工作！

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