PixiJs实战课程-全网最全课程

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、基础篇

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.案例

• 武术小人动画》》进入课程《《（2019-08-02，更新完成）
• 滑动屏幕武术小人淡入淡出》》进入课程（2019-08-06，更新完成）《《

2、实战篇

• 咱们毕业了
• 上班的一天
• 吉他弹唱

3、技巧篇

• 如何适配横竖屏
• 分析设计稿
• 如何结合vue实现一镜到底
• 分享经常使用的loading效果
• 经常使用的精灵动画计算公式

4、扩展篇

• Swiper + TweenMax
• PC端页面 + TweenMax 更新中
• PixiJsDiY场景
• PixiJs游戏入门
• AE制做h5动画进入课程》》（2019-08-07，更新完成）《《

5、精简语法篇

• PixiJS
• TweenMax （完成更新）
• AlloyTouch

结语

• 每篇都会有github代码做为指引；[github地址：空]
• 为了让你们学习的更加快速，我还录制了短小精炼的视频；[视频地址：空]
• 废话很少说了，开始敲代码了。