循环播放动画

Question

我已经为我正在创建的一个简单的Canvas library 创建了一个有效的动画方法，但我无法完全弄清楚如何制作动画循环——从方法本身，给定一个选项。我的意思是我知道如何在应用程序本身中循环它，但不仅仅是如果我给方法传递一个loop 参数，然后它会为我做。这是动画sn-p：

Canvas.objects.Base.prototype.animate = function (options) {
    options.easing = Canvas.animation.easing[options.easing] || options.easing;
    options.duration = Canvas.animation.durations[options.duration] || options.duration * 1000;
    var start = Date.now(),
      total = start + options.duration,
      old = {},
      id,
      self = this;
    for (var i in options.properties) {
      if (options.properties.hasOwnProperty(i)) {
        old[i] = this[i];
      }
    }
    (function update() {
      var now = Date.now(),
        progress = Math.min((options.duration - (total - now)) / options.duration, 1);
      for (var i in options.properties) {
        if (options.properties.hasOwnProperty(i)) {
          self[i] = options.easing(now - start, old[i], options.properties[i] - old[i], options.duration);
        }
      }
      if (progress < 1) {
        id = requestAnimationFrame(update);
      } else {
        id = cancelAnimationFrame(id);
        if (options.loop) {
          var animate = function () {
            for (var j in options.properties) {
              self[j] = old[j];
            }
            if (!options.callback) {
              self.animate({
                properties: options.properties,
                easing: options.easing,
                duration: options.duration,
                callback: animate
              });
            } else {
              self.animate({
                properties: options.properties,
                easing: options.easing,
                duration: options.duration,
                callback: function() {
                  options.callback();
                  animate();
                }
              });
            }
          };
          options.callback = animate;
        }
        if (options.callback) {
          options.callback();
        }
      }
    }());
  };

现在，这是code 我必须让循环在方法本身之外工作：

var animate = function () {
  circle.x = test.canvas.width / 2;
  circle.y = test.canvas.height / 2;
  circle.animate({
    properties: {
        x: test.canvas.width
    },
    easing: 'easeInOutExpo',
    duration: 1,
    callback: function () {
        circle.animate({
        properties: {
            y: test.canvas.height
        },
        easing: 'easeInOutExpo',
        duration: 1,
        callback: animate
      });
    }
  });
};

// 'animate` is called later on a click

使用我现在在方法中的代码，一旦它执行了初始动画，它会恢复到动画之前的所有属性，但会一直呆在那里直到再次单击窗口。

编辑：哦，这是我现在拥有的 code，但它不起作用。

Answer 1

想通了。经过一番调试，我意识到问题出在 options.duration 上。不确定它到底是什么，但它运行不正常。基本上，我用静态值替换了 options[foo] 并尝试了每个选项，唯一失败的是我使用 options.duration 而不是静态值。问题是每次运行时间都被乘以 1000 使它运行得太慢而看不到任何东西。再说一次，我不知道为什么，但重点是……我修好了。 Code。为了解决过高的持续时间，我所要做的就是删除 * 1000 并清理代码中的其他值。

Canvas.objects.Base.prototype.animate = function(options) {
  options.easing = Canvas.animation.easing[options.easing] || options.easing;
  options.duration = Canvas.animation.durations[options.duration] || options.duration;
  var start = Date.now(),
    total = start + options.duration,
    old = {},
    id,
    self = this;
  for (var i in options.properties) {
    if (options.properties.hasOwnProperty(i)) {
      old[i] = this[i];
    }
  }
  if (options.loop) {
    var animate = function() {
      for (var j in options.properties) {
        self[j] = old[j];
      }
      console.log(options.duration);
      self.animate({
        properties: options.properties,
        easing: options.easing,
        duration: options.duration,
        callback: animate
      });
    };
    options.callback = animate;
  }
  (function update() {
    var now = Date.now(),
      progress = Math.min((options.duration - (total - now)) / options.duration, 1);
    for (var i in options.properties) {
      if (options.properties.hasOwnProperty(i)) {
        self[i] = options.easing(now - start, old[i], options.properties[i] - old[i], options.duration);
      }
    }
    if (progress < 1) {
      id = requestAnimationFrame(update);
    } else {
      id = cancelAnimationFrame(id);
      if (options.callback) {
        options.callback();
      }
    }
  }());
};