OpenHarmony-基于ArkUI(JS)实现移动粒子效果背景

2.创建一个粒子中学，我们知道两点连成一条线。页面上的线条其实就是点与点之间的连接，粒子的移动会引起线条的移动，所以第一步是用一个数组来存储页面上的这些粒子。x和y表示粒子的坐标位置，xa和ya分别表示粒子在水平方向和垂直方向移动的速度，max表示粒子成直线的最小距离条件。exportdefault{data:{dots:[],//用于存储粒子对象的数组},//创建粒子并将其存储在数组中drawBackground(){//创建粒子并将其存储在数组中for(leti=0;i<180;i++){//粒子的位置letx=Math.random()*360lety=Math.random()*780//水平运动的速度，垂直运动的速度letxa=Math.random()*0.5letya=Math.random()*0.5this.dots.push({x,y,xa,ya,max:3600})}},}3.手指web端的touch事件效果是跟随鼠标的移动。如果移动端没有鼠标，那么我们会让粒子靠近手指移动的地方。使用手指触摸事件来模拟鼠标移动事件。x代表手指触屏的横坐标，y代表手指触屏的纵坐标，max代表粒子接近手指触屏的最小距离条件。handleMove事件的作用是在手指触摸屏幕时更新手指的坐标位置。exportdefault{data:{mouse:{//手指位置x:null,y:null,max:3200}},handleMove(e){this.mouse.x=e.touches[0].localXthis.mouse.y=e.touches[0].localY}}4.粒子运动我们已经准备好了粒子对象数组dots和模拟鼠标的手指对象，下面就要开始重头戏了。我们设置一个函数来接收画布上下文对象，该对象用于指定粒子的运动和绘制粒子之间的线条。我们新建一个数组nDots来存放手指对象和所有粒子对象，然后遍历所有粒子来指定粒子的运动。当粒子移动到画布的边界时，我们需要做边界处理，让粒子向相反的方向移动。使用上下文对象绘制粒子。为了使连线不显眼，粒子颜色也设置为背景色。然后开始遍历nDots数组，如果遍历到同一个粒子，则直接进入下一个循环。使用勾股定理计算粒子之间的距离dDistance。当dDistance小于粒子间的最小距离时，绘制粒子间的线；如果是手指物体，当dDistance小于接近手指位置的最小距离时，粒子会向手指触摸位置靠近。最后，我们删除比较过的粒子对象。绘制（ctx）{constself=this;//清除整个画布ctx.clearRect(0,0,360,780);//粒子与鼠标的结合，将鼠标数组添加到粒子数组中constnDots=[this.mouse,...this.dots];//粒子运动this.dots.forEach(function(dot){dot.x+=dot.xa;dot.y+=dot.ya;//粒子运动bounds(canvas),bouncedot.xa*=(dot.x>360||dot.x<0)?-1:1;dot.ya*=(dot.y>780||dot.y<0)?-1:1;//绘制粒子ctx.fillRect(dot.x,dot.y,1,1);ctx.fillStyle="#282828";//connectionfor(leti=0;id.max/2){点.x-=dx*0.03;点.y-=dy*0.03;}//画线ctx.beginPath();ctx.lineWidth=0.7;ctx.strokeStyle='rgba(80,130,189,0.9)';//开始位置ctx.moveTo(dot.x,dot.y);//结束位置ctx.lineTo(d.x,d.y);ctx.stroke();ctx.closePath();}}//删除比较的粒子nDots.splice(nDots.indexOf(dot),1);})},5.显示背景最后，看看是否生效。在onShow方法中调用drawBackground方法点亮背景导出默认值{onShow(){this.drawBackground();},drawBackground(){//创建粒子并将它们存储在数组中for(leti=0;i<180;i++){//粒子位置letx=Math.random()*360;让y=Math.random()*780;//水平移动速度，垂直移动速度letxa=Math.random()*0.5;让ya=Math.random()*0.5;this.dots.push({x,y,xa,ya,max:3600});//两个相互吸引的粒子之间的最小距离}constcan=this.$refs.canvas1;constctx=can.getContext('2d');setInterval(()=>{this.draw(ctx);},1000/60);}}总结在处理粒子向手指物体运动时，为了保持速度不至于太快，加入条件dDistance>d.max/2。当粒子在边界上运动时，需要给定粒子以相反方向的速度。canvas的dom在onInit生命周期中获取不到，需要在onShow方法中获取。粒子运动的速度看起来不是很柔和，需要调整参数。了解更多开源知识，请访问：开源基础软件社区https://ost.51cto.com。