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

问题描述

我尝试过使用css和animate的 setInterval 循环。两种移动方式都包括来自oldpos1的微小移动 - > newpos1，没有随机曲线移动，但是随着jQuery动画的出现缓和但仅在随机生成的1-3像素之间，这不是我想要的
。
问题出在 setInterval 的时钟，其中只有线性时间单位流？

I've tried a setInterval loop with css and animate. Both ways of movement consists of tiny movement from oldpos1 -> newpos1 with no random curve movement, easing however occured with jQuery animate but only between randomly generated 1-3 pixels, which is not what I want.Does the problem lies in setInterval's clock, where only linear time units flow?

我应该从哪里开始，在jQuery中存在以下图片？

我想做什么：

1. 道奇行为：

1. Dodge behaviour:

A，B - 粒子

AB1 - 常见躲闪区域，只有一定数量

AB1 - common dodge area, only certain amount

2运动：

Av，Bv - 随机循环运动

Av, Bv - random circular movement

Aacc，Bacc - 发生微小的随机加速度（在图像上标记为更加相称的虚线）

Aacc, Bacc - where the tiny random acceleration occurs (on image marked as more condenced dashed lines)

推荐答案

我不会依赖jQuery的 animate ，因为你的情况比较特殊......相反，请使用游戏循环模式：有一个游戏对象，它保存一组粒子，这些粒子被移动（和碰撞......），然后定期绘制。

I would not rely on jQuery's animate for this as your case is rather special ... instead, use the "game loop pattern": Have a game object which keeps a collection of particles, which are moved (and collided ...) and then drawn in regular intervals.

这是一个基本结构：

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 左右。

Then you can manipulate speed and direction of particles as you like, maybe by introducing additional members d_speed (acceleration) and d_direction or so.

这篇关于模拟类似于尘埃粒子的运动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！