Pixi.js 是一个 Javascript 的 2D 图像引擎,它采用 WebGL 加速 可实现惊人的绘制效率,并且它对 2D 渲染、动画、特效等进行了封装,十分易于使用,下面我们来一步步用 Pixi 实现游动的鲤鱼的效果。

在 Pixi 中,动画的绘制和 WebGL 一样是通过 requestAnimationFrame 实现的,在每一帧清空整个场景,然后再将对应的精灵绘制到对应位置上即可实现动画效果,首先我们要绘制一条静态的鱼,考虑到后面需要让它动起来,我们将它分为几部分:身体和左右鳍,如图:

demo 1

这里为了示意,将图片设为半透明

然后在渲染函数中根据时间(tick)将左右鳍动起来,这里通过改变 yScale 即可实现鱼鳍划动的效果

demo 2

现在鱼显得有些呆板,现实中的鱼在水中游动时是会扭动身体的,扭动的效果可以通过 PIXI.mesh.Rope 实现, 相关例子:http://pixijs.io/examples/#/basics/textured-mesh.js

对应我们的鱼不需要取那么多控制点,这里只取了 4 个控制点,在扭动的同时,鱼鳍的位置也要跟随改变

demo 3

接下来就是让这个固定的鱼在场景中游动起来了,鱼游动的规律可以根据需要自己建模来模拟,我这里实现了一个 Demo 只是简单的让它们游向随机点。

final live demo