寫在前面
整個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，如果感興趣的朋友可以拉下來自己把玩一下。
