- 刚刚加入了猿创营,初衷就是为了跟着大佬学习,一进来就有好东西学习了,这必须跟着代码敲起来。*
PIXI
一个基于 HTML5 创建的 WebGL 2D 渲染引擎。
GSAP
一个强大的 javascript 动效工具集
前期工作
1、大佬的讲解视频 (https://www.bilibili.com/video/BV1q34y1n7dA?spm_id_from=444.41.list.card_archive.click&vd_source=338d9e7c31373890d18dc5b4b26dfbeb)
2、参考案例 (https://www.vanmoof.com/en-NL/s3?color=light)
3、代码资料 (https://github.com/ezshine/YCY-TrainingCamp-S1)
开始工作
1、引入 pixi 并挂载到页面对应位置,同时加载对应资源
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.load();
this.loader.onComplete.add(()=>{
this.show();
});
2、添加背景点
```
// 新建点的容器
let spot = new PIXI.Container();
this.stage.addChild(spot);
//调整中心点
spot.pivot.x = window.innerWidth/2;
spot.pivot.y = window.innerHeight/2;
//调整位置
spot.x = window.innerWidth/2;
spot.y = window.innerHeight/2;
//调整角度(旋转)
spot.rotation = 35*Math.PI/180;
//新建一个数组存储点位
let spotList = [];
// 循环创建点
let colors = [0x333333, 0x999999, 0xb4f4ed]
for (let i = 0; i < 12; 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;
spot.addChild(gr);
spotList.push(pitem);
}
```
3、给点添加动效
```
//设置运动速度
let speed = 0;
//判断是开始还是暂停
let status = true;
// 运动
function loop(){
//如果是开始,则加速慢点
if(status){
speed+=.2;
}else{
//如果是结束,则停止的动画快点
speed-=.4;
}
//设置加速最大值
speed = Math.min(speed,20);
//设置减速最小值
speed = Math.max(speed,0);
//循环改变点的位置
for (let i = 0; i < spotList.length; i++) {
const pitem = spotList[i];
pitem.gr.y+=speed;
pitem.sy = pitem.gr.y;
//当速度大于20时,以固定速度移动并拉伸点,看起来像一条线
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
spot.y+=(Math.cos(35*Math.PI/180))*speed;
// 计算改变X
spot.x-=(Math.sin(35*Math.PI/180))*speed;
// 超出重置
if(spot.y>400)spot.y=-100,spot.x=620;
}
```
4、添加按钮暂停和开始事件
```
function start(){
speed = 0;
status = true;
gsap.ticker.remove(loop);
gsap.to(bicycle,{duration:.6,x:window.innerWidth - bicycle.width,y:window.innerHeight - bicycle.height});
gsap.ticker.add(loop);
}
function pause(){
status = false;
for (let i = 0; i < spotList.length; i++) {
const pitem = spotList[i];
pitem.gr.scale.y=1;
pitem.gr.scale.x=1;
gsap.to(pitem.gr,{duration:.6,x:pitem.sx,y:pitem.sy,case:'elastic.out'});
}
gsap.to(bicycle,{duration:.6,x:window.innerWidth - bicycle.width-50,y:window.innerHeight - bicycle.height +50});
}
```
到此就基本大功告成,其他就基本是一些优化的。代码部分复制了他人的,本人如果意见可私聊本人删除代码,在此表示感谢
在公众号里搜 大帅老猿 ,在他这里可以学到很多东西。