绕着鼠标画布对象光标

我试图复制这种效果：http://hakim.se/experiments/html5/trail/03/绕着鼠标画布对象光标

我有这样的一个粒子的构造函数：

function Particle(x, y) { 
    this.x = x; 
    this.y = y; 
    this.radius = 4; 
    this.color = '#f0f'; 
    this.speed = 15; 
    this.angle = 0; 
}

而且我用这个循环的动画所有粒子实例：

for (var i = 0, len = particles.length; i < len; i++) { 
    var dx = mouse.x - particles[i].x, 
     dy = mouse.y - particles[i].y, 
     angle = Math.atan2(dy, dx); 

    particles[i].vx = Math.cos(angle) * particles[i].speed; 
    particles[i].vy = Math.sin(angle) * particles[i].speed; 
    particles[i].x += particles[i].vx; 
    particles[i].y += particles[i].vy; 
    particles[i].draw(ctx); 
}

粒子跟随鼠标，但到达光标，并开始在其周围的闪烁，这是不期望的行为。我想围绕光标，如在示例中。有趣的部分是，如果我将particle.speed设置为像30这样的东西，并将角度添加1000，粒子围绕光标旋转，但真的很快，破坏效果...

这里你可以看到一个活生生的例子：http://codepen.io/gbnikolov/pen/EwafI

所有的建议都比较欢迎届时，在此先感谢！

P.S.我知道这个针对性示例的代码很容易找到，但是我对JavaScript比较陌生，而且我不太擅长阅读其他人的代码，并且不太了解它背后的逻辑..

来源

2014-10-31 Georgi B. Nikolov

当前你的粒子的目标是鼠标光标。但这不是你想要的目标。你想要一个围绕你的光标移动的目标。而且你希望每个粒子都有一个不同的目标，所以他们不会把所有的东西都放在同一个地方。

也有一些其他的事情，原来不和你不这样做：在原来

，颗粒速度取决于到目标
的距离似乎都无法改变即时的方向，但改变他们的运动方向相对较慢。

来源

2014-10-31 10:48:38

因此，我应该生成另一组不可见的目标，围绕光标旋转并将它们设置为粒子的目标？我将尽快解决粒子速度和方向的变化，让它们绕光标旋转... – 2014-10-31 10:53:40

是的。目前您的目标是mouse.x/mouse.y。但它应该像mouse.x + Math.cos（时间/因子）* radius/mouse.y + Math.sin（时间/因子）*半径。你可以从requestAnimationFrame回调中获得时间，应该是第一个参数。尝试factor = 2 * Math.PI/4000每4秒轮换一次。我也注意到你根本不用时间，所以实际的速度取决于浏览器的刷新率。您应该确定两次调用之间的时间差，并考虑粒子每帧的速度。 – 2014-10-31 11:03:32

感谢您的评论@Tim，但是您能否更详细地解释这个方程式？我为什么要使用时间和因素？ – 2014-10-31 11:05:54

绕着鼠标画布对象光标

回答

相关问题