从零到一：实现通用一镜到底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