利用pixi.js制作复杂动画

作者： 文章来源：

本文原地址：https://www.mimiwuqi.com/webqianduan/197225.html

1. PixiJsJs
• 1、创建舞台、画布
• 2、把画布挂载到 DOM 上
• 3、创建精灵
• 4、将精灵添加到舞台
• 5、操作精灵
2. PixiJs 实践
• 1、搭建舞台、画布
• 2、设置蓝天背景
• 3、添加小鸟精灵
• 4、拖拽小鸟舞动
• 5、总体效果图
3. 总结
4. 参考资料

前言

此篇文章源于前段时间商业有个项目需求，要实现一个比较复杂的 H5 交互动画。那说到动画常用的技术方案无非是下面几种：

• gif 图
• css3 动画属性
• 原生 Javascript 实现
• Canvas
• WebGL

gif图和css3动画属性显然只能实现展示型动画，而通过原生代码实现交互动画又是很复杂的，同时还得考虑动画的兼容性和性能问题。WebGL因为可提供硬件加速渲染，其渲染性能肯定是高于canvas的，但考虑到canvas与WebGL兼容性对比（如下图所示）及综合我们的项目要求，最初方案选定了用Canvas实现。

pixi 功能很强大，是好多人制作复杂动画和小游戏的首选，但学习 pixi 的中文资料不多，更复杂些的功能需要查看官方英文文档和研究源码了解，欢迎大家一起研究、探讨 pixi 的更多更好玩的功能！

参考资料

Pixi 官方文档

pixi_github

更多 建站教程 请访问 https://www.mimiwuqi.com/webqianduan/