模拟类似于尘埃粒子的运动

我尝试了一个带有css和animate的setInterval循环。 两种移动方式都包括来自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左右。