H5一镜到底——初步了解01

一、涉及的知识点：

1) PixiJS: 绘图，其中包括舞台、场景、普通精灵、动画精灵、平铺精灵、定时器等。

2) TweenMax：制作过渡动画

3) TimelineMax：管理整个舞台的动画播放进度

4) AlloyTouch：实现滑动效果，监听用户滑动

二、参考文档

1) PixiJS英文api网站

2) PixiJS中文api网站

三、参考案例

demo1在线浏览

demo1源代码

demo2源代码

四、实现思路

用Pixi创建场景，加入到想要加入的DOM容器当中。

1）用Pixi.loader加载精灵图。

2）将精灵图、背景及文本等元素绘制出来。

3）用TimelineMax创建一个总的Timeline，初始设置paused为true，可以设定整条Timeline的长度为1。

4）用TweenMax创建好过渡动画，然后将TweenMax加入到Timeline中，duration比如是占10%的话，就设定为0.1，从滚动到30%开始播放动画的话，delay就设置为0.3。

5）用AlloyTouch创建滚动监听，并设置好滚动高度，例如1000。

6）监听AlloyTouch的change事件，用当前滚动值 / 滚动高度 得到当前页面的进度。

7）调用总Timeline的seek方法，寻找到当前页面进度的地方，可以简单理解成拨动视频播放器的进度条滑块。

8）至此就可以通过用户滑动操作，控制页面元素的动画播放、后退了。