实现通用 一镜到底 H5 --storyScroll

什么是一镜到底

一镜到底，是指拍摄中没有cut情况，运用一定技巧将作品一次性拍摄完成。

表现形式

画中画（例如：网易-《娱乐画传》， 缩放同时平移）

时空穿梭（例如：天猫-《穿越时空的邀请函》， 以中心缩放）

滚动动画（例如：网易-《爱的形状》，平移为主，期间播放其他动画）

视频（例如：世界名画去巴黎）

实现方法

滚动、长按、自动播放

技术需求

绘制画面：这里我们一般选用基于canvas的库，性能会更好，也方便实现效果。（如CreateJs、PixiJs、Egret等如性能要求不高的话 可以使用ScrollMagic）

添加动画：其中包括过渡、帧动画，因此需要一个动画库。（如 TweenMax等）

进度控制：要实现通过用户操作，来控制整个H5的前进、后退、暂停等，我们会需要进度控制相关的库。（如TimelineMax）

用户操作：一镜到底的H5一般都需要用户操作以“播放”，按住或滑动，按住比较简单，用原生事件实现就好，滑动相对复杂一点，涉及阻尼运动，因此需要一个滑动相关的库。（如 AlloyTouch，iscroll等）

我选用了Pixi.js、TweenMax、iscroll这几个库封装 storyScroll 实现通用的一镜到底。

示例项目

梦想列车

参考资源：

从零到一：实现通用一镜到底 H5