循環動畫

Question

我創建了一個簡單的工作動畫方法Canvaslibrary我正在創建，但我無法完全弄清楚如何使動畫循環 - 從方法本身給出選項。我的意思是我知道如何在應用程序本身中循環它，但不僅僅是如果我通過方法loop參數，然後它爲我做。這裏的動畫片段：

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。不確定它到底是什麼，但它沒有正常工作。基本上我用一個靜態值替換了選項[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(); 
     } 
    } 
    }()); 
};