前言

在过去的一至两年当中，动画类的 H5 很受欢迎，其中滑屏视差类的 H5 自己就做了不少，这其中主要归功于 PixiJS ，自己也借助 PixiJS 实现了多种类别的 H5。本文将简单介绍 PixiJS 的基础知识与实现流程，希望对大家有所帮助。

版本说明

本文使用 PixiJS 的版本为 4.8.5 。

项目实例

以下列举几个自己用 PixiJS 实现的项目，可以扫码预览。

视差滑屏类 H5

画中画类 H5

自定义场景类 H5

动画类 H5 与小游戏类 H5

PixiJS 简单介绍

在了解 PixiJS 之前，我们先来了解一下硬件加速，这也是为什么使用 PixiJS 制作的动画很流畅的原因之一。

为什么要使用 PixiJS

CSS3 中诸如 translate3d 、rotate3d 、scale3d 、skew3d 、matrix3d 、will-change 等一些属性开启了硬件加速来提升页面性能，使动画更加流畅的展现给用户，我们也经常借助 CSS3 的动画来丰富我们的页面效果。但是有一些需求，我们可能需要借助 Canvas 画布来实现，Canvas 其实也可以开启硬件加速。

Canvas 开启硬件加速的方法

var ctx = canvas.getContext(‘webGL’);

从上面的代码可以看出， Canvas 通过使用 webGL 的方式来开启硬件加速。我们再来看看官网对 PixiJS 是怎么介绍的。

什么是 PixiJS

官网是这样介绍的： PixiJS 是 HTML5 创建引擎，使用最快最灵活的 2D WebGL 渲染。
也就是说： PixiJS 是使用 2D 的 WebGL 来渲染的。
再简单的来说： PixiJS 是普通 Canvas 的加速版。这也正是 PixiJS 的优势之一。

PixiJS 有什么优势

渲染速度快
灵活
API丰富

通过以上分析，如果要制作复杂动画的页面，使用 PixiJS 可以帮助我们加速渲染页面，从而使动画更加流畅。

PixiJS 怎么用

了解了 PixiJS 的优势，如果你想使用 PixiJS 做一个自己的项目，可以先来看一下 PixiJS API 中的一些常见名称。

常见名称

Application -> 初始化，创建画布
Sprite -> 精灵，基础
Texture -> 纹理，精灵的基础
Container -> 类似 DIV 嵌套/数组
AnimatedSprite -> 序列帧
Loader -> 预加载函数
Ticker -> 每秒让画布重新渲染 60 次
Mask -> 遮罩
Graphics -> 基础图形

参考 Canvas 的绘制来理解

我们在使用 Canvas 制作页面的时候，首先会创建一个画布，然后把一些基础图形或者 图片元素 绘制到画布，这个时候就可以看到页面了。如果需要添加动画或者交互，只需要通过 setTimeout 或者 requestanimationframe1 重复绘制页面就可以了。

在使用 PixiJS 制作页面的时候，与 Canvas 类似，我们用 Application 创建画布，然后把精灵绘制到画布，如果要添加动画，通过内置的 Ticker 或者 requestanimationframe 重复绘制页面就可以了。

接下来，参考 Canvas 的绘制过程，我们来用 PixiJS 实现：

画布 -> Application

Application 会自动创建一个Canvas：

let app = new PIXI.Application({ 
	width: 256, // default: 800 
	height: 256, // default: 600
	transparent: false, // default: false
}) ;
document.body.appendChild(app.view); // 把画布添加到页面

drawImage -> 精灵(Sprite)

var sprite = PIXI.Sprite.fromImage(imageUrl) // 创建一个精灵
app.stage.addChild(sprite); // 把精灵添加到画布
// app.stage 为画布的根容器

requestanimationframe -> Ticker

使用 Ticker 可以在 1 秒钟绘制 60 次画布。

let ticker = new PIXI.ticker.Ticker();
ticker.add(()=>{
	sprite.rotation += Math.PI/180; // 给精灵添加旋转的动画
});
ticker.start();

总结

以上，就可以简单的理解 PixiJS 的绘制过程了，理解了实现过程，可以学习一下官方的示例与 API，再结合项目的实际需求，就可以制作出流畅的动画了。

常见问题与开发技巧

<Canvas> 旋转后，点击位置会发生偏移，建议通过 旋转画布内的元素 来实现效果；
纹理（Texture）只有在 loader 之后才可以读取宽高等信息；
使用 webGL 渲染时，如果想要使用 toDataURL 导出图片,需添加如下代码：gl = canvas.getContext("experimental-webgl", {preserveDrawingBuffer: true});)
使用图片蒙版时，黑色和透明均视为透明；
anchor 与 pivot 属性使改变圆心的位置，position 加上相同的值既可以恢复到原来的位置。