前端canvas动效实战，PIXI+GSAP仿写vanmoof刹车动效 | 猿创营

前言

事情是这样的，上个月接了一个活儿。客户要我们模仿一个国外的网站 https://www.vanmoof.com/en-NL/s3?color=dark
为他们做几个展示动效。

确实很酷！这个项目一共6个动效，客户给的工期是15天，我们实际花在真正写代码上的工期大概一个礼拜左右。报酬2个W。

可能有同学觉得赚得也不多…的确不算多，但接活儿赚钱只是一方面，更重要的是在这个项目里我带着很多同学们一起实战获得了宝贵的项目经验。

并且这种动效开发，很多只会用vue,react写页面的前端同学很少能接触到。

准备好基础环境

https://github.com/ezshine/YCY-TrainingCamp-S1

我也给大家准备好了一个空白项目，大家可以clone这个仓库一步步来实现。

空白项目很简单，引入了两个库，一个叫PIXI，是性能非常优秀的webGL2d渲染引擎。另一个GSAP，是非常优秀的前端动画引擎，这个库非常老牌，从我还在做FLASH的时代就一直用它。

<script src="https://pixijs.download/release/pixi.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>

然后大家安装一下 VSCode 里的 live preview 插件，一定要注意是微软官方出品的，不要装了山寨版。

本教程视频版：https://www.bilibili.com/video/BV1q34y1n7dA

创建PIXI应用

class BrakeBanner{
   
  constructor(selector){
   
    //初始化PIXI应用，将舞台设置为1920x1080
    this.app = new PIXI.Application({
    
        width:window.innerWidth,
        height:window.innerHeight,
        backgroundColor: 0xffffff,
        resizeTo:window
    });
    document.querySelector(selector).appendChild(this.app.view);
    
    this.stage = new PIXI.Container();
    this.app.stage.addChild(this.stage);
  }
}

加载图片资源

 //创建资源加载器
this.loader = new PIXI.Loader();

//向资源加载器添加资源 key,path
this.loader.add('btn.png', 'images/btn.png');
this.loader.add('btn_circle.png', 'images/btn_circle.png');
this.loader.add('brake_bike.png', 'images/brake_bike.png');
this.loader.add('brake_handlerbar.png', 'images/brake_handlerbar.png');
this.loader.add('brake_lever.png', 'images/brake_lever.png');

this.loader.load();

this.loader.onComplete.add(()=>