前端动画渲染引擎pixi.js系列（1）简单介绍及应用

来源：互联网发布：linux db2创建schema 编辑：程序博客网时间：2024/04/30 00:09

做Web端已经有些年头了，最近想写几篇比较热门的前端框架的教学文章，毕竟人需要记忆的东西太多，一是怕自己遗忘了，其次是想分享一下自己的一些总结和经验，希望能帮助到一些前端开发人员能有个门槛快速入门来提升自己，如果是非常厉害的前端大牛，可以省略这些文章。

一.PixiJS简介

本次系列要介绍的前端框架是PixiJS，PixiJS是一个快速的轻量级的2D动画渲染引擎，主要使用了WebGL技术，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡实现在浏览器里更流畅地展示3D场景和模型，还能创建复杂的导航和数据视觉化。

PixiJS的官网地址是：http://www.pixijs.com/

PixiJS的开源地址是：https://github.com/pixijs/pixi.js/tree/master

在什么情况下可以使用PixiJS框架呢？官网是这样解释的：PixiJS是对WebGL的无缝连接支持，在HTML5中主要体现在canvas标签上。使用PixiJS引擎，可以创建出丰富的交互式图形，跨平台的应用程序和游戏，而不必学习WebGL API或处理浏览器和设备的兼容性。

简单说，需要展现复杂丰富的2D动画效果如骨骼动画，可以使用PixiJS框架。截止目前，PixiJS最新版本是v4.4.4，所以该系列文章的Demo都默认使用v4.4.4版本，所需的js文件都可以在官网上可以下载。下面是一个简单的源码例子：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>基础DEMO</title><script type="text/javascript" src="./libs/pixi.js"></script></head><body><script>var app = new PIXI.Application(800, 600, {backgroundColor: 0x1099bb,transparent: false //背景是否设为透明 });document.body.appendChild(app.view);var bunny = PIXI.Sprite.fromImage('./img/bunny.png')bunny.anchor.set(0.5); //设置原点位置//显示精灵X轴位置bunny.x = app.renderer.width / 2;//显示精灵Y轴位置bunny.y = app.renderer.height / 2;//将显示精灵添加进舞台app.stage.addChild(bunny);//每次渲染的监听函数app.ticker.add(function(delta) {bunny.rotation += 0.1;});</script></body></html>

展示效果：舞台中绘制了长为800px，宽为600px且背景色为0x1099bb的画布，画布中展示了图片精灵bunny在中心位置旋转。

二.创建画布和添加显示精灵的新旧写法

由于在写这篇文章的时候，正好Pixi正在新旧版本的交替中，所以下面标注一下两种创建渲染舞台的新旧写法的区别：

1.在v4.4.2后的新写法

//创建var app = new PIXI.Application(w, h, {backgroundColor: 0x1099bb, transparent: false //背景是否设为透明 });//添加显示对象sprite及每次渲染的监听函数app.stage.addChild(sprite);app.ticker.add(function(delta) {});document.body.appendChild(app.view);

2.在v4.4.2前的旧写法(新版本有实现兼容)

//创建var renderer = PIXI.autoDetectRenderer(w, h, {backgroundColor: 0x1099bb,transparent: true //背景是否设为透明 });document.body.appendChild(renderer.view);//舞台添加显示对象sprite及每次渲染的监听函数var stage = new PIXI.Container();stage.addChild(sprite);animate();function animate() {renderer.render(stage);requestAnimationFrame(animate);}

（注）以上两种写法都可以创建画布和添加显示精灵，若使用v4.4.2版本后，建议使用新写法。

在上例Demo中，创建显示精灵的代码是：

var bunny = PIXI.Sprite.fromImage('./img/bunny.png')

这种写法是直接向显示精灵PIXI.Sprite传入资源路径，还有一种创建的写法是先将资源传入纹理对象PIXI.Texture，再创建显示精灵如下：

var texture = PIXI.Texture.fromImage('../img/bunny.png'); //创建纹理var sprite = new PIXI.Sprite(texture); //创建显示精灵

（注）Texture纹理对象可以理解成贴图、皮肤之类的显示对象，而Sprite则是一种显示容器，只可用于装载Texture。

（注）两种创建方法最终效果是一样的，可以根据实际需要使用相应的创建方法。

本篇主要简单介绍了PixiJS的概念和展示了一个最基础的Demo，接下的几篇会详细介绍容器Container、显示精灵Sprite的概念和PixiJS框架常用的API。

3 0