前端动画渲染引擎pixi.js系列（7）粒子容器、遮罩层和滤镜的应用

一.粒子容器

粒子容器PIXI.particles.ParticleContainer是一个能容纳大量显示精灵的容器，其具有快速、高效的特点，支持容期内显示对象的位置变化、大小缩放和角度旋转；然而出于性能的考虑，同时也屏蔽了容器内显示对象如基色变化、遮罩层等特效功能。粒子容器继承于PIXI.Container。创建方法如下：

new PIXI.particles.ParticleContainer(maxSize, properties, batchSize);

该函数中，maxSize表示最大容纳量；properties表示设置粒子容器的属性；batchSize表示每批渲染对象的数量，默认值与maxSize一样。

创建粒子容器的完整参考代码如下：

//创建粒子容器
var sprites = new PIXI.particles.ParticleContainer(10000, {
	scale: true,
	position: true,
	rotation: true,
	uvs: true,
	alpha: true
});
app.stage.addChild(sprites);

//创建粒子
var totalSprites = app.renderer instanceof PIXI.WebGLRenderer ? 10000 : 100;
for(var i = 0; i < totalSprites; i++) {
	var dude = PIXI.Sprite.fromImage('../img/bunny.png');
	//设置中心点
	dude.anchor.set(0.5);
	//设置不同缩放值
	dude.scale.set(0.8 + Math.random() * 0.3);
	// 随机出现位置
	dude.x = Math.random() * app.renderer.width;
	dude.y = Math.random() * app.renderer.height;
	// 设置不同的颜色
	dude.tint = Math.random() * 0x808080;
	//添加到粒子容器中
	sprites.addChild(dude);
}

效果图：

此案例中快速渲染了10000个显示精灵，然后完全不会感觉到卡顿情况的发生。

二.遮罩层

遮罩层，是指可以将与遮罩层相链接的图形中的图像遮盖起来。用户可以将多个层组合放在一个遮罩层下，以创建出多样的效果。在显示精灵中，遮罩层属性用mask表示，遮罩层mask的赋值参数类型为PIXI.Graphics和PIXI.Sprite，设置遮罩层的对象只有遮罩层区域会显示出来。

遮罩层应用的完整参考代码如下：

app.stage.interactive = true;
//建立显示精灵1
var bGrotate = PIXI.Sprite.fromImage('../img/BGrotate.jpg');
bGrotate.anchor.x = 0.5;
bGrotate.anchor.y = 0.5;
bGrotate.position.x = app.renderer.width / 2;
bGrotate.position.y = app.renderer.height / 2;
//建立显示精灵2
var bgFront = PIXI.Sprite.fromImage('../img/SceneRotate.jpg');
bgFront.anchor.x = 0.5;
bgFront.anchor.y = 0.5;
bgFront.position.x = app.renderer.width / 2;
bgFront.position.y = app.renderer.height / 2;
//建立显示容器
var container = new PIXI.Container();
container.addChild(bGrotate);
container.addChild(bgFront);
app.stage.addChild(container);

//建立画笔
var thing = new PIXI.Graphics();
app.stage.addChild(thing);
thing.position.x = app.renderer.width / 2;
thing.position.y = app.renderer.height / 2;
thing.clear();
thing.beginFill(0x8bc5ff, 0.4);
thing.drawCircle(0, 0, 0);
thing.lineStyle(0);
//设置遮罩层属性后，将会隐藏，只有赋值该属性的对象区域能显示
bgFront.mask = thing;

var r = 0;
app.ticker.add(function() {
	r += 10;
	thing.clear();
	thing.beginFill(0x8bc5ff, 0.4);
	thing.drawCircle(0, 0, r);
	thing.lineStyle(0);
});

效果图：图SceneRotate.jpg(绿色叶子)由圆心向外扩展。

三.滤镜

滤镜主要是用来实现图像的各种特殊效果。在显示对象中用属性filters表示，要移除滤镜只需把此属性设为null即可。系统提供的滤镜有：

BlurFilter
BlurXFilter
BlurYFilter
ColorMatrixFilter
DisplacementFilter
FXAAFilter
NoiseFilter
VoidFilter

详细用法可以查看pixi的api文档。

模糊滤镜应用的完整参考代码如下：

var bg = PIXI.Sprite.fromImage('../img/BGrotate.jpg');
bg.width = app.renderer.width;
bg.height = app.renderer.height;
app.stage.addChild(bg);
var littleDudes = PIXI.Sprite.fromImage('../img/panda.png');
littleDudes.position.x = 100;
littleDudes.position.y = 100;
app.stage.addChild(littleDudes);
var blurFilter1 = new PIXI.filters.BlurFilter();
littleDudes.filters = [blurFilter1];
var count = 0;

app.ticker.add(function() {
	count += 0.01;
	var blurAmount = Math.cos(count);
	blurFilter1.blur = 20 * (blurAmount);
});

效果图：