前端动画渲染引擎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);
});

效果图：