老规矩，先给大家看一下最终效果！
看到这种效果，大家是不是觉得很酷炫！肯定会有人觉得这个效果一定很难实现，我一开始也是那么认为的，可是在我学习了 gsap 之后，只想说一句话，就这！！
下面我们就来看看是如何实现的
我们先看一看需要用到的库
现在我们直入主题，上代码
- 引入需要使用的库（
index.html）
引入对应的库后，我们在 js/brakebanner.js 中定义一个 class 类，用于处理我们的动画函数
- 按钮按下及松开效果
创建完 PIXI 对象后，我们需要加载一下我们的图片资源，具体如下：
因为涉及到了图片的加载，所以我们其他的方法肯定是要在图片加载完成后再调用，所以这里我们就需要使用 onComplete 方法
现在我们已经将图片引入完成了，接下来我们看看 show 方法做了些什么
我们可以看到 show 方法中有调用了一个 createActionButton 方法，这个方法其实就是封装的创建按钮的方法，让我们来看一下他做了些什么（注释都已经写好）
此时，按钮已经创建完毕了，我们还需要将自行车其他部分导入进去，同样是在 show 方法中
到这里，车身的其他部位也已经导入进去，下边来做按钮的按下及松开效果
好了，此时按钮的效果已经实现了
- 流线效果
现在来到了最后一步，那就是加上流动的线，这样使车子更有速度感，那么问题来了，因为车子是斜向运动的，所以我们的线也应该是斜的，但是这个斜线的算法比较麻烦。
我们换一种思路，就是让线在容器中上下运动，之后旋转整个容器，也可以实现对应的效果。
此时，点已经加上，并且容器旋转完成，下一步就是想办法让线运动起来。
OK！到此就已经搞定了
在公众号里搜 大帅老猿，在他这里可以学到很多东西
