Pixi探索记录

过年的时候朋友分享过来一篇网易荣格H5

https://azi.music.163.com/c/rongge_test/index.html
做的很漂亮，要研究研究实现原理
网易《荣格心理原型》，是今年我见过最棒的测试H5！

看js请求：

逐个js搜索研究；
第一个：Pixijs，一顿搜索发现Pixijs挺强大，感觉都可以做H5小游戏了；

Pixi教程中文版(从零学习)
https://github.com/wangwenjie1314/LearningPixi

同时其借住于TexturePacker 工具可以更棒的处理素材；

通过这篇文章
How to create sprite sheets and animations for PixiJS
你可以学习了解到 精灵元素如何动起来

通过这篇文章
H5场景小动画实现之PixiJs实战
你可以学习了解到 Pixi如何实战到H5项目中

通过这篇文章
pixi.js 移动端H5坑点
你可以学习了解到 Pixi在H5项目中有哪些坑

第二个：
通过Scroller可以有效解决HTML和Canvas的滚屏，上面的实战文章也提到了Scroller，具体看github 不多做介绍
Scroller Accelerated panning and zooming for HTML and Canvas

第三个：
Tweeen 做一些页面中元素过渡动画，他可以很好的和Pixi精灵元素结合；
Tweenjs Animate

例如：

看json、img请求

以https://azi.music.163.com/c/rongge_test/images/animate/guide.json 为例
看完“TexturePacker”工具后对json里面的内容就会很熟悉了：

对应图片素材如下：
https://azi.music.163.com/c/rongge_test/images/animate/guide.png

生成分享图

以https://azi.music.163.com/c/rongge_test/images/end_text2/0.json为例

对应素材图：https://azi.music.163.com/c/rongge_test/images/end_text2/0.png

额外阅读：
借住howler.js 可以实现音频播放
howler.js Javascript audio library for the modern web