Javascript 慢速画布粒子动画

我找到了这个代码笔并对其进行了修改：

在第30行中，有可变“速度”。因此，我可以做任何事情，但鼓励更快，而不是更慢

如何降低动画的速度？ 应该只有非常慢的动画

    var canvas = document.createElement('canvas');
    canvas.width = document.body.clientWidth;
    canvas.height = document.body.clientHeight;
    document.body.appendChild(canvas);

    var ctx = canvas.getContext('2d');

    var mousePos = { x: 0, y: 0 };

    function distanceFromCenter() {
      return Math.sqrt(Math.pow(mousePos.x - (canvas.width / 2), 2) + Math.pow(mousePos.y - (canvas.height / 2), 2));
    }

    function Particle() {
      /* set dot size */
      var dotSize = Math.random() * 60;

      this.theta = Math.random() * Math.PI * 2;
      this.radius = (Math.random() * ((canvas.width > canvas.height) ? canvas.width : canvas.height) * 0.33) + 4;
      this.maxRadius = (Math.random() * ((canvas.width > canvas.height) ? canvas.width : canvas.height) * 0.45);
      this.radialChange = Math.random() * 0.1 *  (Math.random() > 0.5) ? 1 : -1;
      this.opacity = Math.random();
      this.size = Math.round(Math.random() * 6) + dotSize;
      this.speed = Math.round(Math.random() * 4) - 1;
      this.direction = (Math.random() > 0.5) ? 1 : -1;
      this.x = 0;
      this.y = 0;
      /* Controls how many dots are connected. If the value is less than 0.75, each point is connected to each other */
      this.connected = (0.5 < 0.75);
    }

    Particle.prototype.update = function() {
      this.theta += this.speed / 750 * this.direction;
      this.x = (canvas.width / 2) + (Math.cos(this.theta) * this.radius) * (distanceFromCenter() / this.maxRadius);
      this.y = (canvas.height / 2) + (Math.sin(this.theta) * this.radius) * (distanceFromCenter() / this.maxRadius);
      this.radius += this.radialChange;

      if (Math.abs(this.radius) > this.maxRadius) {
        this.radialChange *= -1;
      }
    };

    Particle.prototype.render = function() {
      ctx.save();
      ctx.beginPath();
      ctx.fillStyle = '#666'; /* dot color */
      ctx.strokeStyle = '#999'; /* dot border */
      ctx.globalAlpha = this.opacity;
      ctx.arc(this.x, this.y, this.size / 2, 0, 2 * Math.PI, false);
      ctx.fill();
      ctx.stroke();
      ctx.restore();
    };

    var particles = [],
        particlesQuantity = 100, //**  quantity of particles
        bgColor = '#fff', //** backgroundcolor of canvas
        strokeColor = '#000'; //** line color

    for(var i = 0; i < (Math.random() * 50) + particlesQuantity; i++) {
      particles.push(new Particle());
    }


    requestAnimationFrame(demo = function() {
      ctx.save();
      ctx.fillStyle = bgColor;
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      ctx.restore();

      particles.forEach(function(particle, i) {     
        ctx.lineTo(particle.x, particle.y);
          particle.update();
          particle.render();
          if (particle.connected) {
            var p2 = particles[i + 1];
            if (p2) {
              //** stroke styling and positions
              ctx.save();
              ctx.beginPath();
              ctx.strokeStyle = strokeColor;
              ctx.globalAlpha = particle.opacity * 0.33;
              ctx.moveTo(particle.x, particle.y);
              ctx.lineTo(p2.x, p2.y);
              ctx.stroke();
              ctx.restore();
            }
          }    
      });

      requestAnimationFrame(demo);
    });

var canvas=document.createElement（'canvas'）；
canvas.width=document.body.clientWidth；
canvas.height=document.body.clientHeight；
document.body.appendChild（画布）；
var ctx=canvas.getContext（'2d'）；
var mousePos={x:0，y:0}；
函数距离中心（）{
返回Math.sqrt（Math.pow（mousePos.x-（canvas.width/2），2）+Math.pow（mousePos.y-（canvas.height/2，2））；
}
函数粒子（）{
/*设置网点大小*/
var dotSize=Math.random（）*60；
this.theta=Math.random（）*Math.PI*2；
this.radius=（Math.random（）*（（canvas.width>canvas.height）？canvas.width:canvas.height）*0.33）+4；
this.maxRadius=（Math.random（）*（（canvas.width>canvas.height）？canvas.width:canvas.height）*0.45）；
this.radialChange=Math.random（）*0.1*（Math.random（）>0.5）？1:-1；
this.opacity=Math.random（）；
this.size=Math.round（Math.random（）*6）+dotSize；
this.speed=Math.round（Math.random（）*4）-1；
this.direction=（Math.random（）>0.5）？1:-1；
这个.x=0；
这个。y=0；
/*控制连接的点数。如果该值小于0.75，则每个点都相互连接*/
这是连接的=（0.5<0.75）；
}
Particle.prototype.update=函数（）{
this.theta+=this.speed/750*this.direction；
this.x=（canvas.width/2）+（Math.cos（this.theta）*this.radius）*（distanceFromCenter（）/this.maxRadius）；
this.y=（canvas.height/2）+（Math.sin（this.theta）*this.radius）*（distanceFromCenter（）/this.maxRadius）；
this.radius+=this.radialChange；
if（Math.abs（this.radius）>this.maxRadius）{
此.radialChange*=-1；
}
};
Particle.prototype.render=函数（）{
ctx.save（）；
ctx.beginPath（）；
ctx.fillStyle='#666'；/*点颜色*/
ctx.strokeStyle='#999'；/*点边框*/
ctx.globalAlpha=此值为不透明度；
ctx.arc（this.x，this.y，this.size/2,0,2*Math.PI，false）；
ctx.fill（）；
ctx.stroke（）；
ctx.restore（）；
};
变量粒子=[]，
颗粒数量=100，//**颗粒数量
bgColor='#fff'，//**画布的背景色
strokeColor='#000'；/**线条颜色
对于（var i=0；i<（Math.random（）*50）+particlesQuantity；i++）{
粒子。推（新粒子（））；
}
requestAnimationFrame（演示=函数（）{
ctx.save（）；
ctx.fillStyle=bgColor；
ctx.fillRect（0，0，canvas.width，canvas.height）；
ctx.restore（）；
forEach（函数（粒子，i）{
ctx.lineTo（particle.x，particle.y）；
particle.update（）；
particle.render（）；
if（粒子连接）{
var p2=粒子[i+1]；
如果（p2）{
//**笔划样式和位置
ctx.save（）；
ctx.beginPath（）；
ctx.strokeStyle=strokeColor；
ctx.globalAlpha=particle.opacity*0.33；
ctx.moveTo（particle.x，particle.y）；
ctx.lineTo（p2.x，p2.y）；
ctx.stroke（）；
ctx.restore（）；
}
}    
});
requestAnimationFrame（演示）；
});

我认为requestAnimationFrame以每秒60帧的速度运行。可以检查fps并跳过渲染某些帧以更改速度

var fps = 30;
var frameMs = 1000 / fps;
var lastFrame = (new Date()).getTime();


requestAnimationFrame(demo = function() {
  var now = (new Date()).getTime();
  if ((now - lastFrame) < frameMs) {
    requestAnimationFrame(demo);
    return;
  }
  lastFrame = now;
...
});

var fps=30；
var frameMs=1000/fps；
var lastFrame=（新日期（））.getTime（）；
requestAnimationFrame（演示=函数（）{
var now=（new Date（））.getTime（）；
如果（（现在-最后一帧）

如果要减少一个数字。。。分开它！！！在这里，在

this.speed=..

行之后，写

this.speed=this.speed/4！！！不，那不行。数字越大，动画速度越慢。所以这个理论。。。问题是，从某个值（750）开始，动画不再减速。这里有两个速度：径向速度（=
radialChange
）和旋转速度（=
speed
）。注释
this.theta+=…
行或
this.radius+=update
方法中的code>行查看行为。