js鼠标跟随粒子

在JavaScript中实现鼠标跟随的粒子效果，通常涉及到HTML5的Canvas API来绘制粒子，并使用JavaScript来更新粒子的位置，使其跟随鼠标移动。以下是这个效果的基础概念、优势、类型、应用场景以及实现方法：

基础概念

Canvas API: HTML5提供的用于在网页上绘制图形的接口。
粒子系统: 由大量微小的粒子组成的系统，每个粒子都有自己的属性，如位置、速度、大小、颜色等。
鼠标事件: 如mousemove，用于获取鼠标在页面上的位置。

优势

视觉吸引力: 粒子效果可以创造出流畅、动态的视觉效果，增强用户体验。
交互性: 鼠标跟随效果增加了页面的交互性，使用户感觉更加参与。
灵活性: 粒子系统可以轻松调整参数，创造出不同的视觉效果。

类型

自由流动粒子: 粒子在屏幕上自由移动，不受鼠标影响。
鼠标吸引粒子: 粒子被鼠标位置吸引，形成围绕鼠标的流动效果。
鼠标拖拽粒子: 粒子直接跟随鼠标移动，形成拖拽效果。

应用场景

网站背景: 为网站背景添加动态粒子效果，提升视觉效果。
游戏开发: 在游戏中作为特效使用，如魔法效果、爆炸效果等。
数据可视化: 用于表示数据的流动或分布。

实现方法

以下是一个简单的鼠标跟随粒子效果的实现示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mouse Follow Particles</title>
<style>
  canvas {
    display: block;
    background: #000;
  }
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

class Particle {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.vx = Math.random() * 2 - 1;
    this.vy = Math.random() * 2 - 1;
    this.size = Math.random() * 3 + 1;
    this.color = `rgba(255, 255, 255, ${Math.random()})`;
  }

  update(mouse) {
    let dx = mouse.x - this.x;
    let dy = mouse.y - this.y;
    let distance = Math.sqrt(dx * dx + dy * dy);
    let forceDirectionX = dx / distance;
    let forceDirectionY = dy / distance;
    let force = (2000 - distance) / 2000;
    let directionX = forceDirectionX * force * 0.6;
    let directionY = forceDirectionY * force * 0.6;

    if (distance < 100) {
      this.vx -= directionX;
      this.vy -= directionY;
    }

    this.x += this.vx;
    this.y += this.vy;

    if (this.size > 0.2) this.size -= 0.1;
  }

  draw() {
    ctx.fillStyle = this.color;
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
    ctx.fill();
  }
}

let particles = [];
let mouse = { x: undefined, y: undefined };

canvas.addEventListener('mousemove', (event) => {
  mouse.x = event.x;
  mouse.y = event.y;
});

canvas.addEventListener('mouseout', () => {
  mouse.x = undefined;
  mouse.y = undefined;
});

function init() {
  particles = [];
  for (let i = 0; i < 100; i++) {
    let x = Math.random() * canvas.width;
    let y = Math.random() * canvas.height;
    particles.push(new Particle(x, y));
  }
}

function animate() {
  requestAnimationFrame(animate);
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  particles.forEach((particle, index) => {
    if (particle.size <= 0.3) {
      particles.splice(index, 1);
      particles.push(new Particle(Math.random() * canvas.width, Math.random() * canvas.height));
    }
    particle.update(mouse);
    particle.draw();
  });
}

init();
animate();

window.addEventListener('resize', () => {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  init();
});
</script>
</body>
</html>

解释

Particle类: 定义了粒子的属性和方法，包括位置、速度、大小、颜色、更新位置和绘制粒子。
update方法: 更新粒子的位置，使其受到鼠标位置的影响。
draw方法: 在Canvas上绘制粒子。
init函数: 初始化粒子系统。
animate函数: 使用requestAnimationFrame进行动画循环，更新和绘制所有粒子。
事件监听: 监听鼠标移动和窗口大小变化事件，以更新鼠标位置和重置粒子系统。

这个示例展示了如何创建一个简单的鼠标跟随粒子效果，你可以根据需要调整参数，创造出不同的视觉效果。

页面内容是否对你有帮助？

有帮助

没帮助

质量中心视图中的移动对象

、、

我目前的解决方案是简单地跟踪粒子的“中心”，找到x和y's的最小/最大值，并使视口的中间跟随这一点。它工作得很好(不需要找到真正的质量中心)。这里有一个视觉：我的问题是，我试图添加手动拖动粒子的能力，用鼠标。我还没有找到一个优雅的方法来做这件事。问题是视口坐标和模拟坐标之间的转换是不断变化的，因为视口跟随粒子的中心。当我鼠标移动到一个粒子上时，我希望它在模拟中有一个固定的位置(它忽略了上面的所有力)。当我按下按钮移动<e

浏览 4提问于2009-07-03得票数 3

回答已采纳

1回答

如何将我的粒子引擎/发射器放置在弹跳球上？

、、

我有一个粒子引擎，它在我的鼠标位置产生一个发射器。现在，我如何使发射器/粒子跟随球呢？

浏览 3提问于2013-07-26得票数 0

回答已采纳

3回答

如何使粒子物体跟随鼠标运动

、

我想要粒子物体简单地跟随mouseX和mouseY的移动位置。我可以用mouseX和Y来代替“原点”值吗？

浏览 4提问于2019-10-22得票数 1

回答已采纳

2回答

鼠标移动时粒子跟随光标移动(Javascript - Canvas)

、、

我正在尝试创建一个简单的动画，其中一些粒子动画跟随光标，但我遇到了问题。现在，我的粒子出现了，但当您将光标移动到该截面上时，它们会突然消失。

浏览 29提问于2020-02-10得票数 0

回答已采纳

1回答

用three.js提取3D点的2D屏幕位置

、、

我正在使用three.js生成一些雪花，这些雪花慢慢地落在屏幕上。我最初写的脚本只是一个2d画布动画，并添加了鼠标交互，这样你就可以通过鼠标移动来吹雪了。它工作得很好，但是当切换到webgl时，雪花现在被表示为3D点，并且获得鼠标到每个粒子的距离会使粒子更远离屏幕中心，因为透视的原因，粒子的行为是不受欢迎的。

浏览 3提问于2015-12-11得票数 0

1回答

OpenGl获取鼠标位置

、、、

我有一个在3d空间中用鼠标坐标创建矢量的函数。如果我将z位置设置为0，代码会工作得很好，但是当我旋转场景时，点不会跟随鼠标的光标。但是如果我将上面的代码设置为vector.z，粒子开始向我移动，然后它们就消失了(即它们在视点后面)。当z轴指向我时，我希望我的点仅在x/y轴上跟随鼠标；当y轴指向我时，我希望我的点跟随x/z轴；当x轴指向我时，我希望我的点跟随y/z轴。或者，如何将z位置设置为与视点之间的固定距离？

浏览 4提问于2013-12-16得票数 1

1回答

b2Body之后的Cocos2D粒子？

、、

我可以在cocos2d中实现粒子系统，现在我想用动态b2Body附加粒子，这样，它就可以跟随身体。我在这个网站上找到了一个关于跟随b2Body的Cocos2D粒子的教程。但不理解“如何使用”一节。谁能告诉我，我怎样才能把我的粒子附加到我的b2Body上？

浏览 0提问于2012-04-30得票数 0

1回答

通过Particles.js使用悬停

、、、、

并在粒子js div中提供了一个标题。但是现在我不能用头1:悬停。我已经试过了但这不起作用。

浏览 0提问于2017-09-10得票数 0

回答已采纳

2回答

粒子Js出现在悬停状态

、、

我正在尝试将粒子js设置为我的网站的背景。我正在尝试应用以下内容：我试着将它的css设置为：position: fixed; z-index: -10;，因为我想让它固定在我想要的位置，我需要即使我向下滚动也能看到粒子。粒子不再跟随光标。一旦我向下滚动更多，粒子就消失了。我还试图将其设置为iframe背景，但一旦我移动光标通过div就停止工作，粒子就停留在那里。

浏览 0提问于2019-12-05得票数 0

2回答

在SpriteKit中使用SKEmitterNode和粒子创建轨迹

、、、

我试着让它，这样每当玩家移动的时候，我做的一个粒子就会跟随玩家。我试图复制的效果就像你在一个网站上，他们有一组对象跟随着你的鼠标。我试图通过让粒子移动到玩家所做的量来做到这一点，但它不能再现预期的效果。有什么建议吗？我的代码：NSString *myParticlePath = [[NSBundle mainBundle] pathForResource:@"trail" ofType:@"sks"];

浏览 1提问于2013-12-22得票数 8

1回答

在背景中添加图像后，反应粒子在悬停时不相互作用？

、

我有正常的反应粒子代码，它工作得很好，但在添加一个图像到背景后，粒子不再在悬停时相互作用。图像位于x.js文件中加载的y.js文件中，该文件中存在react粒子代码 number: { }, repulse:{ duration: 0.4 }

浏览 1提问于2019-09-07得票数 1

1回答

是否可以使用particles.js创建此动画

、、、

我一直在尝试制作类似于的动画，但到目前为止，我使用particles.js所能实现的只有。 particlesJS("particles-js", { number: { densitystats.domElement.style.top = "0

浏览 1提问于2020-02-20得票数 0

1回答

Cocos2d:发射的粒子在屏幕上不能正确平移

、、、

我已经设置了一个粒子发射器来显示一个发光的球体，它看起来很棒(由下面的代码添加)。唯一的问题是，当我在关卡周围平移时，已经创建的粒子也会平移，而不是停留在发射器位置的局部；发射器本身会正确地平移，并从正确的位置发射新粒子。orb.plist"];[self addChild: orb]; 要确保发射的粒子也随屏幕平移

浏览 1提问于2012-03-21得票数 0

回答已采纳

1回答

无实际运动的粒子发射器的运动(彗星尾)效应

、、

我有一个雪碧在我的场景和有一个粒子发射器在这个精灵。因此，当我移动雪碧(使用MoveTo动作)，然后我可以看到移动动画，雪碧和粒子发射器。MoveTo动画没有受到旧粒子的影响(这些粒子是在动画启动前发出的)，我可以看到像尾巴一样的东西，比如彗星。所以一切都很好。所以，这意味着发射的粒子不属于精灵，而是属于其他的东西。那么，我的问题是:在没有实际移动的情况下，如何才能使“彗星尾巴”移动到屏幕上呢？或者想象一下，我有一个带有太阳发射器的图层。在某种程度上，我将决定移动这个层(滚动它)，我的太阳发射器也会随层

浏览 3提问于2014-10-10得票数 1

1回答

Three.js -如何确定网格和粒子系统之间的交点？

、、

我有一个使用精灵的粒子系统，它是一个类似于three.js中“交互式/点”示例的Object3D，以及一个跟随光标的基本球面网格。 https://threejs.org/examples/?我希望能够用球体推动粒子，但首先我需要一个“球体内部”的点数组。谢谢!

浏览 14提问于2019-01-03得票数 0

1回答

如何使粒子跟随我的鼠标在游戏中

、、

我试着确保当我点击鼠标时产生的粒子跟随我的鼠标。出于某种原因，粒子就跟着我到左上角。有人能告诉我我做错了什么吗？

浏览 1提问于2020-08-14得票数 2

回答已采纳

1回答

处理:为什么我的粒子系统在跟随鼠标时在不同的位置绘制了两次？

、、

我是一个处理新手，我想让我的粒子系统跟随我的鼠标。目前，它在鼠标后面(我想这很好)，但它也在绘制它两次。这是我到目前为止所做的:我还有一个' star‘类，我没有包括它，它画了一个跟随鼠标的简单的星形。

浏览 17提问于2020-04-13得票数 2

回答已采纳

1回答

粒子跟随纹理

、、

我在three.js中创建了一个由粒子组成的球体，它工作得很完美。现在我想把这些粒子放在模拟3D星球的世界地图的纹理上，我搜索了互联网，但是我没有找到任何关于如何去做的信息，当我把纹理放在外面的时候，它最终会进入每个粒子，我怎么能做到呢？知道吗？

浏览 2提问于2018-03-20得票数 2

回答已采纳

1回答

使粒子跟随spriteKit中的路径

、、、、

我已经创建了一个粒子，当我在Xcode的属性窗口上测试它的移动时，它看起来像这样：我已经将这个粒子添加到一个场景中，做了一个圆圈，并使用以下命令迫使粒子运行这个圆圈：我用虚线表示了一个圆，这样你就可以看到它所走的路径……有什么想法吗？谢谢

浏览 35提问于2013-09-24得票数 17

回答已采纳

1回答

粒子ID和在Three.js中检索多个ID

、

我正在尝试用three.js创建粒子，目前是一个粒子系统。该项目的目标是创建具有定义的位置和唯一ID的粒子，并添加一个选项以选择多个粒子并检索其ID。我做了一些研究，但只找到了检测鼠标点击位置的方法。首先:是否有一个选项可以将Is分配给单个粒子(像数字一样简单)？第二:有没有办法选择多个粒子并在(弹出)窗口中查看它们的in？PS:我发现，您可以将I分配给THREE.ParticleDOMMaterial

浏览 1提问于2011-12-12得票数 0

点击加载更多