Question

我正在尝试复制此效果：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相对较新，而且我不太擅长阅读其他人的代码，并且不能完全理解它背后的逻辑。

Answer 1

目前，粒子的目标是鼠标光标。但那不是你想要的目标。你想要一个在光标周围移动的目标。而且你希望每个粒子都有不同的目标，所以它们不会在同一个地方盘旋。

原作还有其他一些事情，你没有：

在原始中，粒子速度取决于到目标的距离
似乎他们不能立即改变方向，而是相对缓慢地改变他们的运动方向。

围绕鼠标光标旋转画布对象

1 个答案: