/ark-particle-animation

canvas+vue3+ts 仿明日方舟Logo粒子动画

Primary LanguageVue

Vue 3 + TypeScript + Vite

仿明日方舟官网 Logo 粒子动画，拉取后记得yarn install or npm install

主要使用三个类：Particle、LogoImg、ParticleCanvas

  1. Particle：记录粒子位置、颜色、大小、动画耗时 和 x/y 方向上的移动速度，提供绘制粒子方法draw、更新方法update、替换方法change
  2. LogoImg：记录图片解析后的粒子数组信息particleData
  3. ParticleCanvas：记录目标画布、画布中的粒子数组和鼠标在画布中的位置，提供绘制画布方法drawCanvas、改变粒子数组方法changeImg

流程：

  • 实例化一个ParticleCanvas对象prtCanvas
  • 点击某个图片clickLogo时调用prtCanvas.changeImg(particleData)方法传入其粒子数组信息。
    • 首次 changeImg，直接赋值
    • 非首次，对比粒子数组 移除/生成粒子，并随机映射

这里就已经实现粒子动画了，粒子的生成和移动就不细说了看代码！

然后就是吸引/排斥：

  • 鼠标在实例对象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 上下文参数，图方便就直接读取了 😁

欢迎关注我的掘金主页，一起学习更多前端知识