Question

我找到了这个Codepen并对其进行了改编：

在第30行，有变量“Speed”。所以我可以做任何事情，但鼓励更快，而不是更慢。

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

    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);
    });

Answer 1

我认为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;
...
});

慢画布粒子动画

1 个答案: