PixiJs系列课程研究猿

在h5中制作一镜到底时，需要设定一个独特的参数名为页面间距。页面间距指的是两个h5页面之间在z轴上所产生的距离，如下图所示： 在制作一镜到底时，最重要的目的就是营造空间感，而一镜到底中的空间感，完全由页面间距进行控制。因此，正确的控制页面间距，是制作一镜到底做重要的一步。 la…

1、新建项目——新建合成。 2、选择工具栏中的圆角矩形工具，在舞台（画布）上画一个矩形。 3、选择工具栏中的向后平移（锚点）工具，把刚刚画好的矩形图锚点移到图中间位置。 5、选中缩放，取消约束比例，并将值改为0。 6、移动时间指示器，移至01：00f，继续添加缩放关键帧，并将缩…

欢迎进入 PixiJs系列课程 最初编写这套课程的原因，是因为无意中在网上翻看到了一个H5场景动画的页面，名字是逃不掉的四字咒怨，就被这种动画形式所吸引，随后的一段时间一直在网上查找资料，发现这类页面学名叫一镜到底 。 通过上面的资料整理了一套做一镜到底的方法，这就把经验写在上…

1.安装插件2.运动方式语法解释to到哪里from设置终点位置，往回运动fromTo从设置好的开始位置，移动到设置好的结束位置3.运动属性语法解释width宽度height高度left左right右a

PixiJs系列课程第一堂课开始啦，第一步来搭建PixiJs所需要的必备工具吧，本套课堂采用vscode作为编辑器，配合着它的live-server本地服务器（带自动刷新功能）。 好了，到此为止第一堂课结束。

这一章是做好一镜到底最关键的一课，打开vscode，确保文件夹和文件的结构跟我本地是否一致，然后开始live-server启动vscode本地服务器。 到这里就结束啦，下一章解决横竖适配问题，在下一章分享如何通过滑动结合时间控制动画。

我们这套课程，完全是为了更好的理解TweenMax如何实现动画才创建的，希望可以给大家有多一点的启发。 1. 计算算法与常用语法总结 2. 小案例1，进入状态

这一章解决横竖屏保持横排显示的方案，打开vscode，启动项目走起。 第三章结束，下一章我们来解决滑动如何控制时间轴的问题。

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