猿创营 - 前端能力提升:canvas 动效学习 PIXI + GSAP

218 阅读1分钟
  • 刚刚加入了猿创营,初衷就是为了跟着大佬学习,一进来就有好东西学习了,这必须跟着代码敲起来。*

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});
	}
```

到此就基本大功告成,其他就基本是一些优化的。代码部分复制了他人的,本人如果意见可私聊本人删除代码,在此表示感谢

在公众号里搜 大帅老猿 ,在他这里可以学到很多东西。