Имитирует движение, похожее на частицы пыли

Question

Я пробовал цикл setInterval с CSS и анимацией. Оба способа перемещения состоят из крошечного движения из oldpos1 -> newpos1 без случайного движения кривой, однако замедление происходит с анимированным jQuery, но только между случайно сгенерированными 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 или около того.