likes
comments
collection
share

如何在react中使用pixi快速的做一个的炫酷的刹车特效!(全注释,附源码)

作者站长头像
站长
· 阅读数 37

如何在react中使用pixi快速的做一个的炫酷的刹车特效!(全注释,附源码)

思考

因为之前跟着视频学了一下pixi写自行车刹车的实战案例,只不过是原本的是html原生开发。后面自己也想换个环境进行一下尝试。所以就有了在react项目中进行的重写。

源码地址

进入github

步骤

  1. 利用react脚手架创建项目,react版本为17.0.2,将多余的代码删除掉。就可以run起来了。然后先在app.js引入PIXI,gsap这两个包

    import * as PIXI from 'pixi.js'
    import { gsap } from 'gsap'

    然后在此文件中创建一个id名为pixiCavas的div盒子。在页面初始化的时候将画布给append进去。以后的步骤都是在app.js这个文件中进行操作。

     <div id="pixiCavas">
     </div>

    2.为了让布局看起来更清爽,添加两个全局变量particles(颜色),speed(速度),之后的代码都是同一级的

     // 全局变量颜色
      let particles = [];
      // 全局的速度
      let speed = 0

    3.初始化根pixi应用

    const app = new PIXI.Application(
     {
       width: window.innerWidth,
       height: window.innerHeight,
       backgroundColor: 0xFFFFFFFF,
       resizeTo: window
     }
      );

    4.创建加载器实例,一个app.loader只能加载一个图片,所以通过new PIXI.Loader()创建一个实例来实现同时加载

    const loader = new PIXI.Loader()
    // stage:将图片插入到画布中的方法
    const stage = app.stage

    5.加载图片,这里引入图片利用了require。尝试过用import通过变量的形式来导入,也是可行的。这里使用require看起来更清秀点

     // 加载图片
      loader.add("btn_img", require('./images/btn.png'))
      loader.add("brake_bike", require('./images/brake_bike.png'))
      loader.add("brake_handlerbar", require('./images/brake_handlerbar.png'))
      loader.add("brake_lever", require('./images/brake_lever.png'))
      loader.add("btn_circle", require('./images/btn_circle.png'))
      // 调用加载器
      loader.load()
      // 加载完毕的时候调用show方法来开始页面
      loader.onComplete.add(() => {
     show()
      })

    6.展示,这里是将自行车相关的代码封装起来的,里面还会调用粒子的效果函数

    const show = () => {
     // 创建刹车
     let bikeLeverImage = new PIXI.Sprite(loader.resources.brake_lever.texture);
     //  创建车架
     let bikeContainer = createBikeContainer(bikeLeverImage)
     stage.addChild(bikeContainer)
     // 创建按钮
     let actionButton = creatActionButton();
     actionButton.x = window.innerWidth - 200
     actionButton.y = 500;
     // 将按钮添加到页面
     stage.addChild(actionButton)
     // 使按钮具备和用户交互的能力
     actionButton.interactive = true
     // 小手效果
     actionButton.buttonMode = true
     // 因为是鼠标事件,这里只对pc端生效
     // 鼠标按下
     actionButton.on("mousedown", () => {
       bikeLeverImage.rotation = Math.PI / 180 * -30;
       gsap.to(bikeLeverImage, { duration: .6, rotation: Math.PI / 180 * -30 })
       // 鼠标按下粒子运动暂停,speed归0
       pause()
       speed = 0
     })
     // 鼠标离开
     actionButton.on("mouseup", () => {
       // 旋转刹车
       gsap.to(bikeLeverImage, { duration: .6, rotation: 0 })
       // 鼠标离开粒子继续运动
       start()
     })
    
     // 创建粒子
     creatParticle()
     // 粒子开始运动
     start()
      }

    7.创建车架的函数

    const createBikeContainer = (bikeLeverImage) => {
    const bikeContainer = new PIXI.Container();
    bikeContainer.scale.x = bikeContainer.scale.y = 0.2
    // 注意: 图片放至的顺序会影响图片的层级,先放的图片在底层
    // 自行车架
    let bikeImage = new PIXI.Sprite(loader.resources.brake_bike.texture);
    bikeContainer.addChild(bikeImage)
    // 刹车
    // let bikeLeverImage = new PIXI.Sprite(loader.resources.brake_lever.texture);
    bikeContainer.addChild(bikeLeverImage)
    bikeLeverImage.pivot.x = bikeLeverImage.pivot.y = 455;
    bikeLeverImage.x = 722;
    bikeLeverImage.y = 900;
    // 手把
    let bikeHandleBarImage = new PIXI.Sprite(loader.resources.brake_handlerbar.texture);
    bikeContainer.addChild(bikeHandleBarImage)
    // 监听,让自行车一直出现在画面右下角
    let resize = () => {
      bikeContainer.x = window.innerWidth - bikeContainer.width
      bikeContainer.y = window.innerHeight - bikeContainer.height
    }
    window.addEventListener('resize', resize)
    resize()
    return bikeContainer
     }

    8.创建行为按钮

    const creatActionButton = () => {
    let actionButton = new PIXI.Container()
    //  按住按钮以及两个圈
    let btnImg = new PIXI.Sprite(loader.resources.btn_img.texture)
    let btnCircle = new PIXI.Sprite(loader.resources.btn_circle.texture)
    let btnCircle2 = new PIXI.Sprite(loader.resources.btn_circle.texture)
    
    actionButton.addChild(btnImg)
    actionButton.addChild(btnCircle)
    actionButton.addChild(btnCircle2)
    
    btnImg.pivot.x = btnImg.pivot.y = btnImg.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加载动效
    gsap.to(btnCircle.scale, { duration: 1, x: 1.3, y: 1.3, repeat: -1 })
    gsap.to(btnCircle, { duration: 1, alpha: 0, repeat: -1 })
    return actionButton
     }

    9.创建粒子

    const creatParticle = () => {
    // 创建粒子
    let partialContainer = new PIXI.Container()
    stage.addChild(partialContainer)
    // 将粒子盒子旋转35度
    partialContainer.rotation = 35 * Math.PI / 180
    // 设置盒子的中心点
    partialContainer.pivot.x = window.innerWidth / 2
    partialContainer.pivot.y = window.innerHeight / 2
    partialContainer.x = window.innerWidth / 2
    partialContainer.y = window.innerHeight / 2
    // 粒子多个颜色
    creatParticleColors(partialContainer)
     }

    10.粒子颜色创建

    const creatParticleColors = (partialContainer) => {
    let colors = [0xf1cf54, 0xb5cea8, 0xf1cf54, 0x8182f]
    for (let i = 0; i < 10; i++) {
      let gr = new PIXI.Graphics();
      gr.beginFill(colors[Math.floor(Math.random() * colors.length)])
      // 绘制小圆点
      gr.drawCircle(0, 0, 10)
      gr.scale.y = 0.4
      gr.scale.x = 0.4
      gr.endFill()
      let pItem = {
        sx: Math.random() * window.innerWidth,
        sy: Math.random() * window.innerHeight,
        gr: gr
      }
      gr.x = pItem.sx
      gr.y = pItem.sy
      partialContainer.addChild(gr)
      particles.push(pItem)
    }
     }

    11.小圆点持续移动,并且在速度大于20的时候开始变形,通过改变粒子的x,y的大小来调整为线条和视觉的颗粒感

    const loop = () => {
    speed += .5
    speed = Math.min(speed, 20)
    for (let i = 0; i < particles.length; i++) {
      let pItem = particles[i]
      pItem.gr.y += speed
      if (speed >= 20) {
        pItem.gr.scale.y = 20
        // 颗粒感
        pItem.gr.scale.x = 0.05
      }
      // 超出边界后从画面里面回来继续移动
      if (pItem.gr.y > window.innerHeight) pItem.gr.y = 0
    }
     }

    12.小圆点移动的函数

    const start = () => {
    loop()
    gsap.ticker.add(loop)
     }

    13.按住鼠标时清除loop,并且在onmouseDown事件时触发让speed重新为0

    const pause = () => {
     gsap.ticker.remove(loop)
     for (let i = 0; i < particles.length; i++) {
     let pItem = particles[i]
     pItem.gr.scale.y = .3
     pItem.gr.scale.x = .3
     // ease: 'elastic.out'回弹效果
     gsap.to(pItem.gr, { duration: .6, x: pItem.sx, y: pItem.sy, ease: 'elastic.out' })
     }
    }

    14.最重要的一点,将画布append到div中,我是这样写的,有小伙伴有其他好方法可以分享哦

      useEffect(() => {
     // 将应用挂载到app的div上
     document.querySelector("#pixiCavas").appendChild(app.view)
      }, [])

    感悟

    刚开始的时候想着npm install pixi的,发现没有这个包>>PS:其实是搞错了,应该这么干: npm install pixi.js。然后使用pixi时@inlet/react-pixi进行的重新,写到一半快不行了。因为没有找到官方文档,也是参考别人的方法来进行书写,感觉也实现不了效果,头发都快薅光了。后面突然灵感来了,github这么大的库应该可以搜到资料,所以就直接找到了pixi的官方库进行参考pixi.js.现在看起来还好,但当真真切切的自己动手时又是另外的感觉了。用未来的眼光看现在好像也不是什么大事。

    番外

    • 最近也在想开始写文章,通过输出来提升自己的能力