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

2021-09-23 01:40:58 字數 1225 閱讀 3942

寫在前面

整個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 一鏡到底 從零到一 實現通用一鏡到底 H5

寫在前面 整個2018年都被工作支配,文章自17年就斷更了,每次看到有訊息提示過往的文章被收藏,或者有人點讚,都不勝唏噓。不過,凡事要始終保持積極的心態,現在回歸為時未晚。最近有專案要做一鏡到底,那就稍作研究吧。一鏡到底是什麼?一鏡到底,是指拍攝中沒有cut情況,運用一定技巧將作品一次性拍攝完成。那...

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

寫在前面 整個2018年都被工作支配,文章自17年就斷更了,每次看到有訊息提示過往的文章被收藏,或者有人點讚,都不勝唏噓。不過,凡事要始終保持積極的心態,現在回歸為時未晚。最近有專案要做一鏡到底,那就稍作研究吧。一鏡到底是什麼?一鏡到底,是指拍攝中沒有cut情況,運用一定技巧將作品一次性拍攝完成。一...

H5實現掃一掃(二)

主要 如下 複製即可調起攝像頭 function function else qrcode.prototype getimgfile function if rfilter.test ofile.type 讀取成功後執行的 ofreader.onload function ofrevent ofre...