PixiJs系列实战课程
欢迎进入 PixiJs系列课程 最初编写这套课程的原因，是因为无意中在网上翻看到了一个H5场景动画的页面，名字是逃不掉的四字咒怨，就被这种动画形式所吸引，随后的一段时间一直在网上查找资料，发现这类页面学名叫一镜到底 。
相关案例参考汇总
具有参考价值的案例汇总了一下，地址如下：
- 1） 逃不掉的四字咒怨
- 2） 实战万圣节主题横版
- 3） 实现通用一镜到底H5
- 4） 实现图片波浪化的效果
- 下面几个链接需要用谷歌浏览器f12切换移动端看，当然也可以用手机设备看
- 5） 我在通话里遇到你的时光
- 6） 让世界听见你
- 7）避暑的108种姿势
- 8）新旧交替 太岁换班
- 9）场景小动画实现
- 10）构建一个视差滚动器
课程安排
通过上面的资料整理了一套做一镜到底的方法，这就把经验写在上面，让大家可以快速的学习这个玩具，如有不严谨的地方也希望大家多多包涵和纠正。
| 课程名称 | 章节 | 备注 |
|---|---|---|
| 基础篇 | 9篇 | 主要是讲大家搭建实战规模的基础结构，便于实战应用 |
| 实战篇 | 300篇 | 实战中我打算选3个代表性的案例，一行一行给大家分享 |
| 技巧总结篇 | 100篇 | 以上用到的动画片段、功能性的代码、常用语法都会总结到这里 |
涉及框架
| 框架名称 | 备注 |
|---|---|
| PixiJS | 绘图，其中包括舞台、场景、普通精灵、动画精灵、平铺精灵 |
| TweenMax | 制作过渡动画 |
| TimelineMax | 管理整个舞台的动画播放进度 |
| AlloyTouch | 实现滑动效果，监听用户滑动 |
一、基础篇
1.准备（2019-07-23，更新完成）
- 装node.js
- 装cnpm淘宝镜像
- 装vscode开发工具
- 装vscode本地服务器
- 下载js插件文件
- 搭建项目文件的基本架构
- 》》进入课程《《
2.初始化阶段（2019-07-24，更新完成）
- 初始化舞台
- 初始化资源
- 制作简易loading
- 初始化场景
- 初始化精灵
- 初始化动画
- 》》进入课程《《
3.解决移动端适配（2019-07-26，更新完成）
- 适配横竖舞台大小
- 适配横竖舞台的内容大小
- 》》进入课程《《
4.如何滑动触发时间轴（2019-07-27，更新完成）
- 引入滑动机制
- 计算出时间数值
- 解决场景滑动时触发背景音
- 》》进入课程《《
5.常用功能补充（还会继续追加新的知识点）
- 制作字幕 》》进入课程《《 （2019-07-29，更新完成）
- 制作遮罩
- 绘制基本图形 》》进入课程《《（2019-07-31，更新完成）
- 如何拖拽
- 制作微信分享
- 生成海报
- 页面测试 》》进入课程《《（2019-08-01，更新完成）
- 打包压缩
6.案例
二、实战篇
- 我们毕业了
- 上班的一天
- 吉他弹唱
三、技巧篇
- 如何适配横竖屏
- 分析设计稿
- 如何结合vue实现一镜到底
- 分享常用的loading效果
- 常用的精灵动画计算公式
四、扩展篇
- Swiper + TweenMax
- PC端页面 + TweenMax 更新中
- PixiJsDiY场景
- PixiJs游戏入门
- AE制作h5动画进入课程》》（2019-08-07，更新完成）《《
五、精简语法篇
- PixiJS
- TweenMax （完成更新）
- AlloyTouch
结语
- 每篇都会有github代码作为指引；[github地址：空]
- 为了让大家学习的更加快速，我还录制了短小精炼的视频；[视频地址：空]
- 废话不多说了，开始敲代码了。
