PIXI与GSAP动画实现刹车动效 | 猿创营

7月猿创营实践# PIXI+GSAP仿写vanmoof刹车动效，跟着视频敲完项目，内心都变得平静了

实现效果

准备工作

• fork仓库
• VScode安装Live Preview扩展

开发

• 创建应用

//创建PIXI应用
this.app = new PIXI.Application({
    width: window.innerWidth,
    height: window.innerHeight,
    backgroundColor: 0xffffff,
    // 跟随窗口调整
    resizeTo: window
})
document.querySelector(selector).appendChild(this.app.view);

• 添加资源

this.stage = this.app.stage;

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_bike.png", "images/brake_bike.png");
this.loader.add("brake_handlerbar.png", "images/brake_handlerbar.png");
this.loader.add("brake_lever.png", "images/brake_lever.png");

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

• 显示图片资源

//添加车子
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 bikeLevelrImage = new PIXI.Sprite(this.loader.resources["brake_lever.png"].texture);
bikeContainer.addChild(bikeLevelrImage);

//设置车把刹车把手拼接到车把上
bikeLevelrImage.pivot.x = 455;
bikeLevelrImage.pivot.y = 455;
//设置车把位置
bikeLevelrImage.x = 722;
bikeLevelrImage.y = 900;

const bikeHandlerBarImage = new PIXI.Sprite(this.loader.resources["brake_handlerbar.png"].texture);
bikeContainer.addChild(bikeHandlerBarImage);

• 添加按钮

//添加按钮
let actionBtn = this.createActionBtn();
actionBtn.x = actionBtn.y = 300;
this.stage.addChild(actionBtn);
//添加按钮点击事件
actionBtn.interactive = true;
actionBtn.buttonMode = true;
//鼠标按下事件
actionBtn.on("mousedown",()=>{
// bikeLevelrImage.rotation = Math.PI/180*-30;
gsap.to(bikeLevelrImage, {duration:.6, rotation: Math.PI/180*-30});
    pause();
})
//松开鼠标
actionBtn.on("mouseup",()=>{
    // bikeLevelrImage.rotation = 0;
    gsap.to(bikeLevelrImage, {duration:.6, rotation: 0});
    start();
})

• 添加粒子

//创建粒子
//添加粒子容器
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 = [];
let colors = [0xf1cf54, 0xb5cea8, 0xf1cf54, 0x818181, 0x00000];
//创建10个粒子
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,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;
    particleContainer.addChild(gr);
    particles.push(pItem);
}

• 让粒子动起来

//粒子移动
let speed = 0;
function 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 = 40;
            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 i=0; i<particles.length; i++) {
        let pItem = particles[i];

        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'});
    }
}
start();

源代码地址

附上全部代码地址，如果对你有帮助，麻烦给个star哈

结语

拖了好久才跟着大帅的视频把demo完整的敲出来了，大帅的思路太清晰了，跟着敲的时候脑袋布灵布灵的。视频看文章开头哈，建议大家都去看看。希望以后能多动手，多学点技能，多写文章。

最后，在 「公众号」 里搜 大帅老猿，在他这里可以学到很多东西！快来和我一起学习！