前言

这是我作为一个刚开始接触前端的小白的第一个比较好玩的前端设计。使用的是PIXI和GSAP去进行页面的渲染，这两个插件的使用对于小白来说是很容易上手的。Pixi是一个超快的2D渲染引擎，通过Javascript和Html技术创建动画或管理交互式图像。再通过GSAP去进行一些动画的渲染，两个插件的配合会让人感觉的很舒服。

本文将简单的去介绍两者是怎样使用的。

在页面添加库函数路径

首先第一步 我们需要先将两个库函数的使用路径添加到我们的前端页面上。方法如下：

添加好两个库函数后我们就可以开始进行下一步的操作了

创建一个PIXI的画布面板

在我们的JS工程文档中去创建一个PIXI的画布对象

将画布创建好以后我们就要将所需要的图像文件内容一一添加上去，这里每一个图像我们都应该创建一个图像容器给他进行存放我们所需要的内容：

然后我们将这些东西封装到一个函数里面，这样我们直接调用这个函数就能将所有的东西渲染到我们的页面上来;

做完这一步我们将得到一下的画面效果：

这样我们的页面内容就做好了，接下来我们需要做的事情是让这个按钮能够进行交互

按钮的交互控制功能

首先 我们再创建一个函数，将按钮所需的功能封装起来：

其中

这一部分的函数是让按钮有一个渐变的过程，在视觉效果上进行一些简单的优化，我们通过GSAP库来进行操作就很简单了。 接着我们在上面已经建好的SHOW函数里面将我们按钮的函数添加进去

到这里我们添加好了以后，当我们按下按钮后，刹车手把就会出现一个刹车的动作动画。为了能够更好的提现这个刹车效果，我们需要添加一些粒子效果出来做对比，在视觉上有一种刹车的 感觉。

创建粒子

这里的程序是将所需要的粒子放到容器里面，将他们的位置固定到画面的中间出现， 然后我们在写一个for函数来控制粒子数量的大小，以及颜色等;

接下来我们就要让这些粒子去动起来。要让它们动起来，首先要给一个速度，要往哪里动，我们要给一个方向，这里我们做一个循环的函数，让粒子循环动作起来：

到这里后我们的工程基本也要完成了，最后要做的就是当按钮按下来后，我们粒子运动的效果要停下来，松开后粒子能够继续运动,这里我们封装两个函数，用来实现这个效果:

将这两个函数放到按钮事件中;

这样当我们按下按钮后，粒子就会停止，松开后继续运动。 到这里我们的工程就结束了。

小结

这么好用PIXI原生动效制作，希望能打开你的视野并帮助到你，快快学起来吧。

在公众号里搜 大帅老猿，找他做技术外包很靠谱