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

我们创建之后并把它挂载到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=.5actionbtn.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;}//计算改变Ymaluliney.y+=(Math.cos(35*Math.PI/180))*speed;//计算改变Xmaluliney.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.让马路一直循环动起来

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

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

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

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

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

实战pixi+gsap，仿刹车动画相关推荐

前端canvas动效实战，PIXI+GSAP仿写vanmoof刹车动效 | 猿创营
前言事情是这样的,上个月接了一个活儿.客户要我们模仿一个国外的网站 https://www.vanmoof.com/en-NL/s3?color=dark 为他们做几个展示动效. 确实很酷!这个项目 ...
关东升的《iOS实战：图形图像、动画和多媒体卷（Swift版）》上市了
关东升的<iOS实战:图形图像.动画和多媒体卷(Swift版)>上市了承蒙广大读者的厚爱我的<iOS实战:图形图像.动画和多媒体卷(Swift版)>京东上市了,欢迎广大读者提 ...
canvas实战之酷炫背景动画（二）
系列文章 canvas实战之酷炫背景动画(一) canvas实战之酷炫背景动画(二) canvas实战之酷炫背景动画(三) canvas实战之酷炫背景动画(四) canvas实战之酷炫背景动画(五) ...
canvas实战之酷炫背景动画（三）
系列文章 canvas实战之酷炫背景动画(一) canvas实战之酷炫背景动画(二) canvas实战之酷炫背景动画(三) canvas实战之酷炫背景动画(四) canvas实战之酷炫背景动画(五) ...
仿联想商城laravel实战---1、仿联想商城需求和数据库设计（lavarel如何搭建项目）...
仿联想商城laravel实战---1.仿联想商城需求和数据库设计(lavarel如何搭建项目) 一.总结一句话总结: composer引入lavarel.配置域名.配置apache 1.项目名 le ...
使用gsap javascript进行动画和React
If there's one thing I've learned from showing my websites to non-technical friends and family it's ...
视频教程-C# 实战项目——制作仿QQ软件-C#
C# 实战项目--制作仿QQ软件专注编程领域,拥有多年开发经验王小科 ¥49.00 立即订阅扫码下载「CSDN程序员学院APP」,1000+技术好课免费看 APP订阅课程,领取优惠,最少立减5元 ...
canvas实战之酷炫背景动画（一）
系列文章 canvas实战之酷炫背景动画(一) canvas实战之酷炫背景动画(二) canvas实战之酷炫背景动画(三) canvas实战之酷炫背景动画(四) canvas实战之酷炫背景动画(五) ...
canvas实战之酷炫背景动画（七）
系列文章 canvas实战之酷炫背景动画(一) canvas实战之酷炫背景动画(二) canvas实战之酷炫背景动画(三) canvas实战之酷炫背景动画(四) canvas实战之酷炫背景动画(五) ...
canvas实战之酷炫背景动画（五）
系列文章 canvas实战之酷炫背景动画(一) canvas实战之酷炫背景动画(二) canvas实战之酷炫背景动画(三) canvas实战之酷炫背景动画(四) canvas实战之酷炫背景动画(五) ...

实战pixi+gsap，仿刹车动画