如何减缓动画速度？

Question

我有一个动画矩形 jsFiddle演示

如何减缓动画并使其更加稳定？

我尝试使用循环延迟，但延迟循环和requestAnimationFrame之间存在冲突。

我不想改变参数window.setTimeout(f, 1e3 / 60);

因为还有更多需要良好偏好设置的代码块。

非常感谢。

循环延迟：

for (i = 0; i < 10; i++) {
        (function (i) {
            window.setTimeout(function () {}, i * 2000);
        }(i));
    }

我的代码：

var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
var my_gradient = ctx.createLinearGradient(0, 0, 0, 300);

    window.requestAnimationFrame = function() {
    return window.requestAnimationFrame ||
      window.webkitRequestAnimationFrame ||
      window.mozRequestAnimationFrame ||
      window.msRequestAnimationFrame ||
      window.oRequestAnimationFrame ||
      function(f) {
        window.setTimeout(f,1e3/60);
      }
  }();


  window.cancelAnimationFrame = function() {
    return window.cancelAnimationFrame ||
      window.webkitCancelAnimationFrame ||
      window.mozCancelAnimationFrame ||
      window.msCancelAnimationFrame ||
      window.oCancelAnimationFrame ||
      function(f) {
        window.setTimeout(f,1e3/60);
      }
  }();  
var randompos = {};
RandomPosition();

function DrawBackround() {
    ctx.globalAlpha = 1;
    ctx.clearRect(0, 0, 200, 200);
    my_gradient.addColorStop(0, '#002EB8');
    my_gradient.addColorStop(1, '#4D6DCD');
    ctx.fillStyle = my_gradient;
    ctx.fillRect(0, 0, 200, 200);
}

function get_random_color() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++) {
        color += letters[Math.round(Math.random() * 15)];
    }
    return color;
}

function RandomPosition() {
    DrawBackround();
    ctx.globalAlpha = 0.5;
    var dt = 10;
    for (i = 0; i < 3; i++) {
        n = Math.floor(Math.random() * 8) + 1;
        switch (n) {
            case 1:
                randompos.x = 0;
                randompos.y = dt; //12
                break;
            case 2:
                randompos.x = dt;
                randompos.y = dt; //1
                break;
            case 3:
                randompos.x = dt;
                randompos.y = 0; //3
                break;
            case 4:
                randompos.x = dt;
                randompos.y = -dt; //4
                break;
            case 5:
                randompos.x = 0;
                randompos.y = -dt; //6
                break;
            case 6:
                randompos.x = -dt;
                randompos.y = -dt;
                break;
            case 7:
                randompos.x = -dt;
                randompos.y = 0;
                break;
            case 8:
                randompos.x = -dt;
                randompos.y = dt;
                break;
            default:
        }
        ctx.fillStyle = get_random_color();
        ctx.fillRect(randompos.x + 50, randompos.y + 50, 100, 100);
    }
    window.requestAnimationFrame(RandomPosition);

    for (i = 0; i < 10; i++) {
        (function (i) {
            window.setTimeout(function () {}, i * 2000);
        }(i));
    }
}

- user2015930

---

为什么要使用 1e3/60 的 setTimeout，而不是直接使用 8？ - Hugo Delsing

同类型的问题在这个链接中：https://dev59.com/3V_Va4cB1Zd3GeqPSFDi - Sunil Rk

因为还有更多的代码块需要良好的偏好设置。 - user2015930

我会告诉你我的代码和stackoverflow.com/questions/之间的区别。我使用requestAnimationFrame，因为我的动画代码更复杂，而不是那些不需要良好优化偏好的短代码。 - user2015930

请查看此链接。 - Amol

Answer 1

减缓函数运行速度的一种方法是只在每X帧中运行一次。

将RandomPosition()修改为以下内容，使其每10帧运行一次：

var counter=0;
function RandomPosition() {
    if(++counter % 10){
        window.requestAnimationFrame(RandomPosition);
        return false;
    }

http://jsfiddle.net/jaibuu/kHvaX/1/

- Jaibuu

Answer 2

使用这个：

setInterval(code, milliseconds);

它返回一个数字，你需要保存它以便停止代码。因此我们可以写成：

 var interval = setInterval(function() {
     clock();
     x++;
     if (x > 90) clearInterval(interval);
 }, 30);

这段代码创建了一个每30毫秒执行一次的函数。

每30毫秒，调用clock()函数，增加x的值，如果x大于90，则调用clearInterval并传入我们调用setInterval返回的数字。这确保代码总共只会运行90次。

- Amrendra

---

我不知道该怎么做，因为setInterval是循环，requestAnimationFrame也是循环。我必须将一个循环放入另一个循环中，然后问题就出现了，冲突是循环内部的循环内部的循环等等...... - user2015930