实战pixi+gsap，仿刹车动画

开始之前大家可以先体验效果

进入

这种动态效果只能说yyds

我们这之前需要先考虑这个页面都有哪些元素以及交互

1.那些是静态资源

2.那些是动态元素

3.动态元素实现思路

4.按钮如何绑定动态

一，创建画布导入静态资源

我们创建之后并把它挂载到dom元素上面

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_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.add("malu.png","images/malu.png");
		this.loader.add("malu_line.png","images/malu_line.png");
		this.loader.load();

由于我们的动画是基于图片的，我们应该想到在图片加载完成之后再去加载动画效果。我们需要用到onComplete中去调用loader这是容器

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

我们图片尺寸非常大所以我们要对初始图片尺寸及位置进行配置

createAction(){
		//创建一个容器，存放按钮
		let actionbtn = new PIXI.Container();
		this.stage.addChild(actionbtn);
		//创建按钮
		let btni = new PIXI.Sprite(this.loader.resources['btn.png'].texture);
		//按钮边上的圆
		let btnc = new PIXI.Sprite(this.loader.resources['btn_circle.png'].texture);
		let btnc2 = new PIXI.Sprite(this.loader.resources['btn_circle.png'].texture);
		//添加到画布渲染
		actionbtn.addChild(btni);
		actionbtn.addChild(btnc);
		actionbtn.addChild(btnc2);
		//调整位置
		btni.pivot.x = btni.pivot.y = btni.width/2;
		btnc.pivot.x = btnc.pivot.y = btnc.width/2;
		btnc2.pivot.x = btnc2.pivot.y = btnc2.width/2;
		//调整大小缩放
		btnc.scale.x = btnc.scale.y = 0.8;
		//动画效果
		gsap.to(btnc.scale,{duration:1,x:1.3,y:1.3,repeat:-1});
		gsap.to(btnc,{duration:1,alpha:0,repeat:-1});
		return actionbtn;
	}

 创建开始结束时间并绑定按钮

let actionbtn = this.createAction();
		// 调整坐上边距
		actionbtn.x=window.innerWidth/2+400;
		actionbtn.y = 400;
		actionbtn.scale.y=actionbtn.scale.x=.5
		actionbtn.interactive = true;
		actionbtn.buttonMode = true;
		// 按下效果
		actionbtn.on("mousedown",()=>{
			//按下执行刹车把的动画
			gsap.to(bikeLever,{duration:.6,rotation:Math.PI/180*-30});
			pause();
		})
		// 松开效果
		actionbtn.on("mouseup",()=>{
			//松开执行刹车把松开动画
			gsap.to(bikeLever,{duration:.6,rotation:0});
			start();
		})

事件完成后即可通过按钮来进行车子的刹车和启动

速度效果

这里呢我们先是在y轴创建随机的点，在y轴竖向流动，再将画布进行旋转。

ps：这方法比较简单，正常斜线运动是要通过算法。

let particle = new PIXI.Container(); 
		this.stage.addChild(particle);
		//调整中心点
		particle.pivot.x = window.innerWidth/2;
		particle.pivot.y = window.innerHeight/2;
		//调整位置
		particle.x = window.innerWidth/2;
		particle.y = window.innerHeight/2;
		//调整角度（旋转）
		particle.rotation = 35*Math.PI/180;
		//新建一个数组存储点位
		let particlelist = [];
		// 循环创建点
		for (let i = 0; i < 10; i++) {
			let gr = new PIXI.Graphics();
			// 取色
			gr.beginFill(this.setColor4());
			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;
			particle.addChild(gr);
			particlelist.push(pitem);
		}

创建完点之后我们旋转y轴

let speed = 0;
		//判断是开始还是暂停
		let status = true;
		// 运动
		function loop(){
			
			if(status){
				speed+=.2;
			}else{
				
				speed-=.4;
			}
			//设置加速最大值
			speed = Math.min(speed,30);
			//设置减速最小值
			speed = Math.max(speed,0);
			//循环改变点的位置
			for (let i = 0; i < particlelist.length; i++) {
				const pitem = particlelist[i];
				pitem.gr.y+=speed;
				pitem.sy = pitem.gr.y;
				
				if(speed>=20){
					pitem.gr.scale.y=40;
					pitem.gr.scale.x=0.03;
				}
				//超出屏幕重置位置
				if(pitem.gr.y>window.innerHeight)pitem.gr.y=0;
			}
			//计算改变Y
			maluliney.y+=(Math.cos(35*Math.PI/180))*speed;
			//计算改变X
			maluliney.x-=(Math.sin(35*Math.PI/180))*speed;
			//超出重置
			if(maluliney.y>400)maluliney.y=-100,maluliney.x=720;
		}

最后一步让公路动起来

1.引入马路并旋转合适角度

//马路
		let maluliney = new PIXI.Container(); 
		maluliney.pivot.x = window.innerWidth/2;
		maluliney.pivot.y = window.innerHeight/2;
		//位置
		maluliney.x = window.innerWidth/2;
		maluliney.y = window.innerHeight/2;
		this.stage.addChild(maluliney);
		//旋转
		maluliney.rotation = 35*Math.PI/180;
		//引入马路
		let malu = new PIXI.Sprite(this.loader.resources['malu.png'].texture);

2.在窗口大小发生改变时重置马路位置

// 监听窗口变化
		let resize =  () => {
			bikeContainer.x = window.innerWidth - bikeContainer.width-1000;
			bikeContainer.y = window.innerHeight - bikeContainer.height-1000;
                //刹车时车的顿感
			malu.x = window.innerWidth - bikeContainer.width-600;
			malu.y = window.innerHeight - bikeContainer.height-750;
		}

3.让马路一直循环动起来

//计算改变Y
			maluliney.y+=(Math.cos(35*Math.PI/180))*speed;
			//计算改变X
			maluliney.x-=(Math.sin(35*Math.PI/180))*speed;

到这里就大功告成了，可以欣赏我们的成果了。

ps：灵感以及技术学习来自 大帅老猿 ,一个编程三十多年的老程序猿猴！

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

源码地址 : https://github.com/QZ-WangXianRen/YCY-TrainingCamp-S1