模拟类似于灰尘颗粒的运动

Question

我尝试过使用 css 和 animate 进行 setInterval 循环。两种运动方式都由 oldpos1 -> 的微小运动组成。 newpos1 没有随机曲线移动，但是 jQuery animate 发生了缓动，但仅在随机生成的 1-3 个像素之间发生，这不是我想要的 。 问题是否出在 setInterval 的时钟上，其中只有线性时间单位流动？

我应该从哪里开始，让下面的图像存在于 jQuery 中？

我想要做什么：

1. 躲避行为：

   A、B - 粒子

   AB1 - 普通闪避区域，仅限一定量

2 运动：

Av、Bv - 随机圆周运动

Aacc、Bacc - 发生微小随机加速度的位置（在标记为更浓缩的虚线的图像上）

Answer 1

我不会依赖 jQuery 的 animate 来实现这一点，因为你的情况相当特殊......相反，使用“游戏循环模式”：有一个游戏对象，它保存一组移动的粒子（并碰撞......）然后定期绘制。

这是一个基本结构：

function Particle(x, y) {
    this.x = x;
    this.y = y;
    this.speed = 0; // in pixels per second
    this.direction = 0; // in radians per second
}

Particle.prototype.move = function(d_time) {
    this.x += Math.cos(this.direction) * this.speed;
    this.y += Math.sin(this.direction) * this.speed;
}

Particle.prototype.draw = function() {
    // either set the position of a DOM object belonging to this particle
    // or draw to a canvas
}

function Game() {
    this.particles = Array();

    this.MS_PER_FRAME = 20; // in milliseconds
    this.D_TIME = 1000.0 / this.MS_PER_FRAME;
}

Game.prototype.tick = function() {
    $.each(this.particles, function(_, particle) {
        particle.move(this.D_TIME);
        particle.draw();
    })
}

Game.prototype.go = function() {
    setInterval(this.tick, this.MS_PER_FRAME)
})

然后您可以根据需要操纵粒子的速度和方向，也许可以通过引入附加成员d_speed（加速度）和d_direction等。