PIXI&GSAP实现刹车特效 | 猿创营

前言

记一次使用PIXI&GSAP实现刹车特效

效果

实现

创建html, 引入js

<html>
  <head>
    <title>猿创营</title>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width,minimum-scale=1.0,user-scalable=no"
    />
    <body>
      <div id="brakebanner"></div>
    </body>
    <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>
    <script src="./js/brakebanner.js"></script>
    <script>
      window.onload = init;
      function init() {
        let banner = new BrakeBanner("#brakebanner");
      }
    </script>
  </head>
</html>

初始化PIXI 添加到DOM中

this.app = new PIXI.Application({
  width: window.innerWidth,
  height: window.innerHeight,
  backgroundColor: 0xffffff,
  resizeTo: window,
});
document.querySelector(selector).appendChild(this.app.view);

创建加载器,并添加图片

this.loader = new PIXI.Loader()

this.loader.add('btn.png', 'images/btn.png')
this.loader.add('btn_circle.png', 'images/btn_circle.png')
this.loader.add('brake_lever.png', 'images/brake_lever.png')
this.loader.add('brake_bike.png', 'images/brake_bike.png')
this.loader.add('brake_handlerbar.png', 'images/brake_handlerbar.png')

this.loader.load()

this.loader.onComplete.add(() => {
  this.show()
})

加入按钮,实现水波涟漪特效

  creatActionButton() {
    let actionButton = new PIXI.Container();
    let btnImage = new PIXI.Sprite(this.loader.resources["btn.png"].texture);
    let btnCircle = new PIXI.Sprite(
      this.loader.resources["btn_circle.png"].texture
    );
    let btnCircle2 = new PIXI.Sprite(
      this.loader.resources["btn_circle.png"].texture
    );
    actionButton.addChild(btnImage);
    actionButton.addChild(btnCircle);
    actionButton.addChild(btnCircle2);
      
    btnImage.pivot.x = btnImage.pivot.y = btnImage.width / 2;
    btnCircle.pivot.x = btnCircle.pivot.y = btnCircle.width / 2;
    btnCircle2.pivot.x = btnCircle2.pivot.y = btnCircle2.width / 2;

    btnCircle.scale.x = btnCircle.scale.y = 0.8;
    gsap.to(btnCircle.scale, { duration: 1, x: 1.3, y: 1.3, repeat: -1 });
    gsap.to(btnCircle, { duration: 1, alpha: 0, repeat: -1 });
    
    actionButton.x = actionButton.y = 300;
    return actionButton;
  }

加载自行车

 createBike(actionButton) {
  let bikeContainer = new PIXI.Container()

  this.stage.addChild(bikeContainer)

  bikeContainer.scale.x = bikeContainer.scale.y = 0.3

  const bikeImage = this.loadSprite('brake_bike.png')
  const bikeHandlerImage = this.loadSprite('brake_handlerbar.png')
  const bikeLeverImage = this.loadSprite('brake_lever.png')

  bikeContainer.addChild(bikeImage)
  bikeContainer.addChild(bikeLeverImage)

  bikeLeverImage.pivot.x = 455
  bikeLeverImage.pivot.y = 455

  bikeLeverImage.x = 722
  bikeLeverImage.y = 900

  bikeContainer.addChild(bikeHandlerImage)


  actionButton.interactive = true
  actionButton.buttonMode = true

  actionButton.on('mousedown', () => {
   gsap.to(bikeLeverImage, {
    duration: 0.8,
    rotation: Math.PI / 180 * -30 
   })

   this.pauseLineMove()
   
   gsap.to(bikeContainer, {
    duration: 0.8,
    y: bikeContainer.y + 20
   })
  })

  actionButton.on('mouseup', () => {
   gsap.to(bikeLeverImage, {
    duration: 0.5,
    rotation: 0
   })

   this.startLineMove()

   gsap.to(bikeContainer, {
    duration: 0.8,
    y: bikeContainer.y - 20
   })
  })


  this.stage.addChild(actionButton)

  let resize = () => {
   bikeContainer.x = window.innerWidth - bikeContainer.width
   bikeContainer.y = window.innerHeight - bikeContainer.height
  }

  window.addEventListener('resize', resize)

  resize()


  return bikeContainer
 }

创建粒子点实现交互

 createParticleAndLine() {
  let particleContainer = new PIXI.Container()
  this.stage.addChild(particleContainer)

  particleContainer.pivot.x = window.innerWidth / 2
  particleContainer.pivot.y = window.innerHeight / 2


  particleContainer.x = window.innerWidth / 2
  particleContainer.y = window.innerHeight / 2

  particleContainer.rotation = 35 * Math.PI / 180

  let particles = []

  const colors = [0xf1cf54, 0xb5cea8, 0xf1cf54, 0x818181, 0x000000]

  for (let i = 0; i < 15; i++) {
   let gr = new PIXI.Graphics()

   gr.beginFill(colors[Math.floor(Math.random() * colors.length)])

   gr.drawCircle(0, 0, 6)

   gr.endFill()

   let pItem = {
    sx: Math.random() * window.innerWidth,
    sy: Math.random() * window.innerWidth,
    gr: gr
   }

   gr.x = pItem.sx
   gr.y = pItem.sy

   particleContainer.addChild(gr)

   particles.push(pItem)
  }


  let speed = 0
  function loop() {
   speed += 0.5
   speed = Math.min(speed, 20)

   for (let pItem of particles) {
    pItem.gr.y += speed

    pItem.gr.scale.y = 24
    pItem.gr.scale.x = 0.03

    if (pItem.gr.y > window.innerHeight) {
     pItem.gr.y = 0
    }
   }
  }

  function start() {
   speed = 0
   gsap.ticker.add(loop)
  }

  function pause() {
   gsap.ticker.remove(loop)

   for (let pItem of particles) {
    pItem.gr.scale.y = 1
    pItem.gr.scale.x = 1

    gsap.to(pItem.gr, {
     duration: 0.6,
     x: pItem.sx,
     y: pItem.sy,
     easy: 'elastic.out'
    })
   }
  }

  start()

  this.startLineMove = start

  this.pauseLineMove = pause

 }

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