|
开始之前大家可以先体验效果
进入
这种动态效果只能说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
|