使用pixi和gsap制作刹车动效 | 猿创营

第一步，来看一下效果

那么这个动效是如何制作的呢？首先看一下代码结构：

index.html是入口文件，images是需要的资源，breakbanner.js中是主要的代码逻辑。

有了基本的结构，我们来看一下是如何实现的。

index.html中，我们需要引入所需资源，并调用我们的主要逻辑代码：

<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>

接下来就是重头戏，在breakbanner.js的BrakeBanner类编写所需要的全部逻辑。

首先创建canvas并使用loader加载所需图片资源：

constructor(selector){
    this.app = new PIXI.Application({
        width: window.innerWidth,
        height: window.innerHeight,
        backgroundColor: 0xffffff,
        resizeTo: window
    })
    this.stage = this.app.stage
    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_handlebar.png","images/brake_handlerbar.png")
    this.loader.add("brake_bike.png","images/brake_bike.png")

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

使用粒子运动的背景动画来展示车运动和松开的效果：

let particContainer = new PIXI.Container()
    this.stage.addChild(particContainer)
    particContainer.pivot.x = window.innerWidth/2
    particContainer.pivot.y = window.innerHeight/2
    particContainer.x = window.innerWidth/2
    particContainer.y = window.innerHeight/2
    particContainer.rotation = 35*Math.PI/180
    let particles = []
    for(let i = 0;i<10;i++) {
        let gr = new PIXI.Graphics();
        gr.beginFill(0x333333)
        gr.drawCircle(0,0,6)
        gr.endFill()

        let pItem = {
                sx: Math.random()*window.innerWidth,
                sy: Math.random()*window.innerHeight,
                gr: gr,
        }
        gr.x = pItem.sx
        gr.y = pItem.sy
        particContainer.addChild(gr)
        particles.push(pItem)
    }

定义按钮，并确定位置：

creatActionButton() {
    let actionButton = new PIXI.Container()
    let btnImage = new PIXI.Sprite(this.loader.resources['btn.png'].texture)
    btnImage.width = btnImage.width/2
    btnImage.height = btnImage.height/2
    actionButton.addChild(btnImage)
    btnImage.pivot.x = btnImage.width
    btnImage.pivot.y = btnImage.width*8

    return actionButton;
}

加载车身的各个部位

const bikeContainer = new PIXI.Container()
this.stage.addChild(bikeContainer)
bikeContainer.scale.x = bikeContainer.scale.y = 0.3
const bikeImage = new PIXI.Sprite(this.loader.resources['brake_bike.png'].texture)
bikeContainer.addChild(bikeImage)

const bikelever = new PIXI.Sprite(this.loader.resources['brake_lever.png'].texture)
bikeContainer.addChild(bikelever)
bikelever.pivot.x = 455
bikelever.pivot.y = 455
bikelever.x = 722
bikelever.y = 900

const bikehandlebar = new PIXI.Sprite(this.loader.resources['brake_handlebar.png'].texture)

刹车按钮的逻辑，松开的逻辑也类似：

actionButton.on("mousedown", () => {
    gsap.to(bikelever,{duration:.6,rotation:Math.PI/180* - 30})
    pause() // 停止粒子运动
})

完成！

—————————一个分割线—————————

在公众号里搜 大帅老猿，一个编程好多年的老程序猿！在他这里可以学到很多东西