不管全世界所有人怎么说，我都认为自己的感受才是正确的。无论别人怎么看，我绝不打乱自己的节奏。喜欢的事自然可以坚持，不喜欢的怎么也长久不了。
只要活着，就要不断学习，永无止境。 因为生活永远有你的盲区，不断学习，可以把盲区缩小那么一点点。 见识，是见识不完的，但是还是要出去见识。 你才有可能过的比别人好一点点。 不止学习，更要用心，心在哪里，结果就在哪里。
在这个夏天不如跟我一起学习兼职必备技能，丰富了技能又能获得“钞”能力，感兴趣的可以看看Pixijs安装和使用简介上手简单，你确定不试试？ 先介绍下背景为什么要学习Pixijs,也是最近在跟大帅老师那了解到的“钞”能力，居然简简单单的就多了一项技能，而且还能有外快，何乐而不为呢？
制作自行车刹车特效实战 使用Pixijs号称是性能最高, 最快速的html5创意引擎, webgl2d的图形渲染引擎 gsap 是老牌引擎, 经历过flash, 从flash过度而来的引擎. 通过以上技术来实现vanmoof刹车动效2, 3D交互的感觉.
最终演示效果 文章结尾附完整源码
开始实战 一步一步搭建
开始前准备工作
推荐使用 vscode 下载 live preview 提供服务，预览实施效果
下载插件
思路
- 由那几个部分组成
- 如何进行交互运动
- 运动如何绑定
从界面上就可以看到，需要
- 一个按钮（来控制按下的操作）
- 一个自行车的图片（自行车，以及车把的图片，因为要按下的时候刹车，所以需要一个单独的刹车图片）
- 公路（底层的公路）
- 运动线条
一、初始化页面，创建PIXI应用
constructor(selector){
// 创建
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();
三、绘画出马路、车架和刹车把手
//马路
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);
//缩放
malu.pivot.x = malu.pivot.y = 0.5;
maluliney.addChild(malu);
//车
let bikeContainer = new PIXI.Container();
this.stage.addChild(bikeContainer);
bikeContainer.scale.x = bikeContainer.scale.y = 0.3;
let bikeImage = new PIXI.Sprite(this.loader.resources['brake_bike.png'].texture);
bikeContainer.addChild(bikeImage);
let bikeLever = new PIXI.Sprite(this.loader.resources['brake_lever.png'].texture);
bikeContainer.addChild(bikeLever);
bikeLever.pivot.x = 455;
bikeLever.pivot.y = 455;
bikeLever.x = 722;
bikeLever.y = 900;
let bikeHand = new PIXI.Sprite(this.loader.resources['brake_handlerbar.png'].texture);
bikeContainer.addChild(bikeHand);
四、实现按钮效果
//调用创建按钮
let actionbtn = this.createAction();
// 调整坐上边距
actionbtn.x = actionbtn.y = 500;
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();
})
五、车辆启动的粒子效果
//新建点的容器
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);
大功告成！感谢大帅的支持！
PS：灵感以及技术学习来自 大帅老猿 ,一个编程“三十多年”经验的老程序猿猴！
在公众号里搜 大帅老猿，在他这里可以学到很多东西！快来和我一起学习！卷！
