共计 1632 个字符，预计需要花费 5 分钟才能阅读完成。
写在前面
整个 2018 年都被工作支配，文章自 17 年就断更了，每次看到有消息提示过往的文章被收藏，或者有人点赞，都不胜唏嘘。不过，凡事要始终保持积极的心态，现在回归为时未晚。最近有项目要做一镜到底，那就稍作研究吧。
一镜到底是什么？
百度百科 - 一镜到底一镜到底，是指拍摄中没有 cut 情况，运用一定技巧将作品一次性拍摄完成。
那么运用到 H5 上面，是怎样的表现？网上案例也有很多，这里推荐数英的一篇文章，应用尽有：
一镜到底 H5 大合集：一口气看尽一个 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，如果感兴趣的朋友可以拉下来自己把玩一下。
点此查看仓库
点此查看 demo
（注：项目中素材来源于网络，仅供交流学习使用，切勿商用！）
展望
这里只实现了一个一镜到底 H5 的主要效果部分，距离完成还有很多工作：
微信分享设置及引导
添加一个加载界面
添加音乐音效（用过 howler，感觉不错）
可能需要的生成海报（html2canvas，生成海报 easy job）
…
结语
这次没有用太多篇幅铺开来讲细节，主要是运用几个库组合来实现，而实际操作上还有很多地方要注意的，例如帧动画的实现，滑动的速度控制，滑到顶部、底部的处理等等。实际应用上还要继续打磨，毕竟一个漂亮的 H5，是要花很多精力去构思，去优化体验的。
最后也希望能认识到更多在 H5 领域有研究的小伙伴，可以互相交流，甚至一起工作！
email: vincent@shikehuyu.com
