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

男娘i 2021-09-12 05:22 1530阅读 0赞

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

## 一.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在中心位置旋转。  
![Center][]

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

由于在写这篇文章的时候，正好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。

[smile.gif]: /images/20210813/9cea6ef042534df692c7f0165994c1f0.png
[Center]: /images/20210813/9e0176295e38471b88e04d482a9b2429.png