如何在react中使用pixi快速做出炫酷的刹车特效！（笔记全，附源码）

2.为了让布局看起来更清爽，加入两个全局变量particles(color)、speed(speed)，后面的代码都在同一层//globalvariablecolorletparticles=[];//全局速度letspeed=03.初始化根pixi应用程序constapp=newPIXI.Application({width:window.innerWidth,height:window.innerHeight,backgroundColor:0xFFFFFFFF,resizeTo:window});4.创建一个loader实例，一个app.loader只能加载一张图片，所以通过newPIXI.Loader()创建一个实例来同时加载constloader=newPIXI.Loader()//stage:inserttheimageintocanvasconststage=app.stage5中的方法。加载图片，这里使用require导入图片。使用import通过变量导入也是可行的。这里使用require看起来更优雅//loadtheimageloader.add("btn_img",require('./images/btn.png'))loader.add("brake_bike",require('./images/brake_bike.png'))loader.add("brake_handlerbar",require('./images/brake_handlerbar.png'))loader.add("brake_lever",require('./images/brake_lever.png'))loader.add("btn_circle",require('./images/btn_circle.png'))//调用loaderloader.load()//加载完成后调用show方法启动页面loader.onComplete.add(()=>{show()})6.Show，这里封装了自行车相关的代码，也会调用粒子效果函数constshow=()=>{//createbrakeletbikeLeverImage=newPIXI.Sprite(loader.resources.brake_lever.texture);//创建框架letbikeContainer=createBikeContainer(bikeLeverImage)stage.addChild(bikeContainer)//创建按钮letactionButton=creatActionButton();actionButton.x=window.innerWidth-200actionButton.y=500;//添加按钮到页面stage.addChild(actionButton)//让按钮具备与用户交互的能力actionButton.interactive=true//小手效果actionButton.buttonMode=true//因为是鼠标事件，所以这里只对PC端生效//鼠标按下actionButton.on("mousedown",()=>{bikeLeverImage.rotation=Math.PI/180*-30;gsap.to(bikeLeverImage,{duration:.6,rotation:Math.PI/180*-30})//当按下鼠标时，粒子运动暂停，速度归零pause()speed=0})//当鼠标离开时actionButton.on("mouseup",()=>{//旋转制动器gsap.to(bikeLeverImage,{duration:.6,rotation:0})//鼠标离开粒子并继续tomovestart()})//创建粒子creatParticle()//粒子启动Sportsstart()}7.创建框架的函数constcreateBikeContainer=(bikeLeverImage)=>{constbikeContainer=newPIXI.Container();bikeContainer.scale.x=bikeContainer.scale.y=0.2//注意：图片放置的顺序会影响图片的层次，先放置的图片在最下面//bikeframeletbikeImage=newPIXI.Sprite(loader.resources.brake_bike.texture);bikeContainer.addChild(bikeImage)//刹车//让bikeLeverImage=newPIXI.Sprite(loader.resources.brake_lever.texture);bikeContainer.addChild(bikeLeverImage)bikeLeverImage.pivot.x=bikeLeverImage.pivot.y=455;bikeLeverImage.x=722;bikeLeverImage。y=900;//handleletbikeHandleBarImage=newPIXI.Sprite(loader.resources.brake_handlerbar.texture);bikeContainer.addChild(bikeHandleBarImage)//监听，让自行车一直出现在屏幕右下角letresize=()=>{bikeContainer.x=window.innerWidth-bikeContainer.widthbikeContainer.y=window.innerHeight-bikeContainer.height}window.addEventListener('resize',resize)resize()returnbikeContainer}8.创建一个动作按钮constcreatActionButton=()=>{letactionButton=newPIXI.Container()//按住按钮和两个圆圈letbtnImg=newPIXI.Sprite(loader.resources.btn_img.texture)letbtnCircle=newPIXI.Sprite(loader.resources.btn_circle.texture)letbtnCircle2=newPIXI.Sprite(loader.resources.btn_circle.texture)actionButton.addChild(btnImg)actionButton.addChild(btnCircle)actionButton.addChild(btnCircle2)btnImg.pivot.x=btnImg.pivot.y=btnImg.width/2btnCircle.pivot.x=btnCircle.pivot.y=btnCircle.width/2btnCircle2.pivot。x=btnCircle2.pivot.y=btnCircle2.width/2btnCircle.scale.x=btnCirclecle.scale.y=0.8//circlegsap加载动画gsap.to(btnCircle.scale,{duration:1,x:1.3,y:1.3,repeat:-1})gsap.to(btnCircle,{duration:1,alpha:0,repeat:-1})returnactionButton}9.创建粒子constcreatParticle=()=>{//创建粒子letpartialContainer=newPIXI.Container()stage.addChild(partialContainer)//添加粒子框旋转35度partialContainer.rotation=35*Math.PI/180//设置框的中心点partialContainer.pivot.x=window.innerWidth/2partialContainer.pivot.y=window.innerHeight/2partialContainer.x=window.innerWidth/2partialContainer.y=window.innerHeight/2//粒子倍数colorscreatParticleColors(partialContainer)}10.粒子颜色创建constcreatParticleColors=(partialContainer)=>{letcolors=[0xf1cf54,0xb5cea8,0xf1cf54,0x8182f]for(leti=0;i<10;i++){letgr=newPIXI.Graphics();gr.beginFill(colors[Math.floor(Math.random()*colors.length)])//绘制小点gr.drawCircle(0,0,10)gr.scale.y=0.4gr.scale.x=0.4gr.endFill()letpItem={sx:Math.random()*window.innerWidth,sy:Math.random()*window.innerHeight,gr:gr}gr.x=pItem.sxgr.y=pItem.sypartialContainer.addChild(gr)particles.push(pItem)}}11。小圆点继续移动，当速度大于20时开始变形。通过改变粒子x和y的大小，调整到线条和视觉的粒度。constloop=()=>{speed+=.5speed=Math.min(speed,20)for(leti=0;i=20){pItem.gr.scale.y=20//颗粒状pItem.gr.scale.x=0.05}//从屏幕返回并继续移动if(pItem.gr.y>window.innerHeight)pItem.gr.y=0}}12。小圆点移动函数conststart=()=>{loop()gsap.ticker.add(loop)}13.鼠标按住时清除循环，onmouseDown事件时触发速度重置0constpause=()=>{gsap.ticker.remove(loop)for(leti=0;i{//将应用挂载到app的div上document.querySelector("#pixiCavas").appendChild(app.view)},[])一开始想到的是npminstallpixi，但是发现没有这个包>>PS：其实我弄错了，我应该这样做：npminstallpixi.js然后在使用pixi的时候@inlet/react-pixi重写，写到一半，就这样了快死了。因为没有找到官方文档，也是参考了别人的方法写的，感觉达不到效果，头发都快没了。后来突然灵机一动，github应该是这么大的一个库，随便搜一下资料，于是直接找了pixi的官方库参考pixi。感受它。从未来的角度来看，现在似乎也没什么大不了的。番外最近也想开始写文章，通过输出来提升自己的能力