PixiJs系列课程研究猿

哈喽大家好，今天给大家带来 简弹钢琴入门课程，通过课程的知识 瞬间拿下一首 完整的歌曲弹唱，让大家可以学以致用。     由于干货很多，请大家要克制一下，不要在评论里发表太多赞美之词，因为老师并不是为

第一天我们没有过多的讲什么，只是初步了解网页、搭建网页的开发环境，还有一个小例子来看看网页的基本制作过程，下一课我们来综合做一个小布局。

大家早期是不是用flash做过动画，感觉就是可视化的界面很好操作。 这节课咱们来说一下如何用ae来制作动画导出到h5里使用，只是动画，如果想交互的话只能在h5添加一些元素来控制了。 如何安装如何破解在下面的网址里有很详细的步骤，这里就不赘述了。 这节课就到这里了，到此为止如果你…

今天这节课涉及到了Alloytouch.js，TimelineMax.js，TimelineMax..js，用户需要通过用手上下滑动触发时间轴来改变精灵的变化,这就是一镜到底的播放方式。 到此在上下滑动屏幕的时候，小人就会从透明度0到1了。

这节课涉及到了让小人精灵动起来，做下一个案例做铺垫。 这时候，舞台和进度就都有了。 这节课没有涉及到场景，只是让大家对搭建基本结构精灵动画有更深入的认识，下一个案例分析如何用手指滑动来控制动画的播放。

这一章没有什么难点，就是一个测试h5移动端的简单有效的方法。

采用的是Pixi的Graphics来绘制。

首先在精灵里绑定这个文字，然后加入场景，在动画中应用之前的机制让他动，最后在结合着时间轴让他运动起来。 下节课怎么就实战一个小例子，结合着上面所有的语法制作一个简单版一镜到底。

这一章决定了动画与时间轴通过滑动触发的核心代码。先看一下Alloytouch.js滑动库的基础基础代码 vertical: vertical,竖方向：true，横方向：false,找到resources.js，在横竖屏的时候判断了一下初始化滑动方向。 然后就是通过滑动的值除以（…