好习惯：先看效果

最终效果.gif

前言

摸金校尉里面的大佬们在老师的带领下一周兼职2W

对于这种事情你问我怎么看？我给眼皮扇扇子。为啥？眼热呗！

大帅老师给我们的眼热患者整了一副良药，脱敏之后带我们全员参与。XDM，开卷！！

不愧是你.webp

技能&文档

开发步骤

基础环境

创建一个HTML文件；引入PIXI及GSAP的线上JS文件以及brakebanner.js

<html>
    <head>
        <title>猿创营</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,minimum-scale=1.0,user-scalable=no">
        <style type="text/css">
            html,
            body {
                margin: 0;
                padding: 0;
            }
            div {
                width: 100%;
            }
        </style>
    </head>
    <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>
</html>

BrakeBanner文件编写

class BrakeBanner{
    constructor(selector){
        // todo-创建动画
    }
}

一：PIXI应用创建

在this上面声明一个app是PIXI的容器，设置大小为视口宽高

constructor(selector){
    this.app = new PIXI.Application({
            width: window.innerWidth,
            height: window.innerHeight,
            // backgroundColor: '0xff0110'
    })
    document.querySelector(selector).appendChild(this.app.view);
    this.loader = new PIXI.Loader();
    let ImgList = ['btn.png','btn_circle.png','brake_bike.png','brake_handlerbar.png','brake_lever.png'];
    // 添加图片资源（遍历数组）
    this.addImg(ImgList)
    this.loader.load()
    // 渲染图片
    this.loader.onComplete.add(()=> {
        this.showImg(ImgList)
    })
}

二：加载图片资源

声明一个静态图片资源list，然后进行遍历渲染


addImg(ImgList) {
    for(let i of ImgList){
      this.loader.add(`${i}`,`images/${i}`)
    }
}
showImg(ImgList) {
    for(let index in ImgList){
        let DOM = new PIXI.Sprite(this.loader.resources[ImgList[index]].texture);
        this.app.stage.addChild(DOM)
      }
}

嗨害嗨！这不就实现了吗。一个字：简简单单

这才哪到哪，路漫漫其修远兮！

清醒点啊.gif

而且我们所有的照片都在左上角的一个位置；并且后添加的图片会压在先添加图片的上面。所以需要对资源位置进行一个调整，到我们想要展示的样子

调整位置

在封装的showImg方法中进行对位置以及动效的设置


showImg(ImgList) {
    let actionBtn = new PIXI.Container();
    this.stage.addChild(actionBtn)
    for(let index in ImgList){
        let imgName = ImgList[index].split('.')[0]
        let domName = new PIXI.Sprite(this.loader.resources[ImgList[index]].texture);
        if (['btn', 'btn_circle'].includes(imgName)) {
            // 设置圆心
            domName.pivot.x = domName.width / 2
            domName.pivot.y = domName.width / 2
            actionBtn.addChild(domName)
            // 添加GSAP动效；动起来了
            if (imgName === 'btn_circle') {
                domName.scale.x = domName.scale.y = 0.8
                gsap.to(domName.scale, {duration: 1, x: 1.1, y: 1.1, repeat: -1})
            }
        } else {

        }
    }
    // 定义容器的位置
    actionBtn.x = actionBtn.y = 400
}

添加GSAP动效

按钮动起来

动起来-gsap.gif

刹车动起来：给按住按钮添加事件，控制刹车的旋转角度；旋转的过程使用gsap.to产生缓慢的动态效果

刹车动效.gif

速度粒子

创建粒子

// 创建粒子
let particleContainer =  new PIXI.Container()
this.stage.addChild(particleContainer)
let particles = []
for (let index = 0; index < 10; index++) {
        let gr = new PIXI.Graphics()
        gr.beginFill(0xccff63)
        gr.drawCircle(0,0,6)
        gr.endFill()
        gr.x = Math.random()*window.innerWidth;
        gr.y = Math.random()*window.innerHeight;

        particleContainer.addChild(gr)
}

创建粒子.jpg

粒子动效

let speed = 0
function loop() {
        speed+=.5
        speed = Math.min(speed,20)
        for (let index = 0; index < particles.length; index++) {
                let pItem = particles[index]
                pItem.gr.y += speed
                // 创建由慢到快的效果
                if(speed>=20) {
                        // 拉伸Y轴，使小球出现线的感觉
                        pItem.gr.scale.y = 40
                        pItem.gr.scale.x = 0.03
                }
                if(pItem.gr.y>window.innerHeight)pItem.gr.y = 0
        }
}
gsap.ticker.add(loop)// 添加gasp使粒子动起来

粒子动起来.gif

倾斜粒子

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

粒子倾斜效果.gif

拉伸粒子，产生线的效果

// 改造loop方法，出现线的感觉
function loop() {
        speed+=.5
        speed = Math.min(speed,20)
        for (let index = 0; index < particles.length; index++) {
                let pItem = particles[index]
                pItem.gr.y += speed
                // 创建由慢到快的效果
                if(speed>=20) {
                        // 拉伸Y轴，使小球出现线的感觉
                        pItem.gr.scale.y = 40
                        pItem.gr.scale.x = 0.03
                }
                if(pItem.gr.y>window.innerHeight)pItem.gr.y = 0
        }
}

还原粒子效果.gif

缩小x，出现颗粒感

在loop方法中设置粒子的x缩放；既： pItem.gr.scale.x = 0.03

停止时候设置回弹

添加按下松开事件，移除loop效果，并且使用gsap加上线性运动效果产生回弹。

// 添加按下松开事件，移除loop效果，并且使用gsap加上线性运动效果产生回弹。
function pause() {
        gsap.ticker.remove(loop)

        for (let index = 0; index < particles.length; index++) {
                let pItem = particles[index]
                pItem.gr.y += speed
                pItem.gr.scale.y = 1
                pItem.gr.scale.x = 1
                gsap.to(pItem.gr,{duration:.6,x:pItem.sx, y:pItem.sy, ease:'elastic.out'})
        }
}

OKK，把这两个start、pause函数和咱们按钮的按下和松开事件关联上。大功告成。

最终效果.gif