自行车动起来——初次使用Pixi.js+Gsap.js的分享 | 猿创营

最近加入了猿创营，原本只是打算看别人装B、看看有没有体力活挣点辣条钱的，万万没想到我一个万年白嫖党，竟然也跟着做案例，更没想到竟然也可以在社区分享我写的代码（虽然是跟着大帅敲的）。

PixiJS 是一个基于WebGL 2D渲染引擎，类似于CreateJS，历史悠久，可靠且易用。GSAP是GreenSock提供的一个制作动画的成熟的JavaScript库，该库源于Flash的动画。

准备工作

0. 初始项目 ( github.com/ezshine/YCY… )
1. 配合老师的视频讲解 ( www.bilibili.com/video/BV1q3… )
2. 案例效果 ( vanmoof )

开撸

使用 PixiJs 来搭建场景

• 创建Application并添加到Dom中

  class BrakeBanner {
      constructor(selector){
          this.app = new PIXI.Application({
              width: window.innerWidth,
              height: window.innerHeight,
              backgroundColor: 0xffffff,
              resizeTo: window
          });
          this.stage = this.app.stage;
      }
  }
  

• 创建Sprite并添加到stage中

  loadMaterials() {
      this.loader.add("btn", "./images/btn.png");
      this.loader.add("btn_circle", "./images/btn_circle.png");
      this.loader.load();
      this.loader.onComplete.add(() => {
          this.createActionButton(); // 加载完素材后创建
          this.resize();
      });
  }
  ​
  createActionButton() {
      this.stage.addChild(this.actionButton);
      const btnImage = new PIXI.Sprite(this.loader.resources.btn.texture);
      const btnCircle = new PIXI.Sprite(
          this.loader.resources.btn_circle.texture
      );
      const btnCircle2 = new PIXI.Sprite(
          this.loader.resources.btn_circle.texture
      );
      this.changePivot(btnImage, btnImage.width / 2, btnImage.height / 2);
      this.changePivot(btnCircle, btnCircle.width / 2, btnCircle.height / 2);
      this.changePivot(btnCircle2, btnCircle2.width / 2, btnCircle2.height / 2);
      this.actionButton.addChild(btnImage);
      this.actionButton.addChild(btnCircle);
      this.actionButton.addChild(btnCircle2);
      btnCircle.scale.x = btnCircle.scale.y = 0.5;
      gsap.to(btnCircle.scale, { duration: 1, x: 1.3, y: 1.3, repeat: -1 });
      gsap.to(btnCircle, { duration: 1, alpha: 0, repeat: -1 });
  }
  

  一个按钮就添加好了

2. 使用GSAP添加动效

createActionButton() {
    gsap.to(btnCircle.scale, { duration: 1, x: 1.3, y: 1.3, repeat: -1 });
    gsap.to(btnCircle, { duration: 1, alpha: 0, repeat: -1 });
}

这样这个Button就动起来了

案例完整代码在 Github ( github.com/LeonWhite/Y… ) 上

总结

PixiJs和GSAP第一次用，跟着视频敲了一遍，感觉很好上手。

我想说的是猿创营这种模式，各种前端牛人在一个群里，共同学习，共同进步，努力又优秀，这是很多年都没有过的氛围，希望有更多的JSer加入。

在公众号里搜 大帅老猿 ，在他这里可以学到很多东西。