代码拉取完成,页面将自动刷新
仿明日方舟官网 Logo 粒子动画,拉取后记得yarn install
or npm install
主要使用三个类:Particle、LogoImg、ParticleCanvas
draw
、更新方法update
、替换方法change
particleData
drawCanvas
、改变粒子数组方法changeImg
流程:
ParticleCanvas
对象prtCanvas
clickLogo
时调用prtCanvas.changeImg(particleData)
方法传入其粒子数组信息。这里就已经实现粒子动画了,粒子的生成和移动就不细说了看代码!
然后就是吸引/排斥:
prtCanvas
对应的画布移动时触发mousemove
回调,根据回调参数重新计算鼠标位置mouseX/mouseY
prtCanvas
的绘制画布方法drawCanvas
一直随着事件循环在执行,drawCanvas
中遍历画布粒子数组并调用每一项的update
方法并传入重新计算后的mouseX/mouseY
particle.update
中又根据距离和设置好的引力/斥力重新计算vx/vy
...this.ParticleArr.forEach((particle) => {
particle.update(this.mouseX, this.mouseY);
particle.draw();
});
Particle 的 draw 方法符合面向对象的写法是接收一个 content 上下文参数,图方便就直接读取了 😁
欢迎关注我的掘金主页,一起学习更多前端知识
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。