前段时间跟着大帅学自行车刹车的动效，感觉非常酷！做为初入门的前端小白，一下子被这效果惊呆了，也坚定了学前端的决心，大前端真是未来的方向！闲话少叙，先看自行车实现的思路：
完成整个项目主要需要三个步骤：
一. 首先是页面布局
1.导入静态资源，加载btn.png,btn_circle.png,brake_bike.png,brake_handlerbar.png,brake_lever.png等图片。
2.显示静态资源，在窗口的合适位置放置静态资源。
二. 增加PIXI效果
PIXI官网
需要PIXI效果地方有两个：
1.按键的外面圆圈的动态效果，按键外面有两个圆，内圆设置为静态，外圆是动态向外变化，并且颜色逐渐变浅。
2.粒子运动的动态效果，按下按键粒子停止，并且有刹车的动效；松开按键粒子有个加速的过程。
三. 增加GSAP效果 GSAP官网
GSAP的全名是GreenSock Animation Platform，它的确是一个从flash时代一直发展到今天的专业动画库。GSAP在动画的基础上增加过渡效果，让动画更加自然。
1.在车闸上使用GSAP效果，控制车闸的动效时间，更加接近现实中的场景。
2.在粒子上使用GSAP效果，粒子在运动后改变粒子的形状，通过粒子的变形实现真实的动态效果。
最后看一下完整代码：
【 在公众号里搜 大帅老猿，在他这里能学到很多东西 】
