アニメーションをループする

Question

簡単なアニメーションメソッドを作成しました。作成中ですが、オプションを指定すると、メソッド自体からアニメーションループを作成する方法を理解できません。私がそれを意味するのは、アプリケーション自体でループする方法を知っていますが、私が言うところのメソッドloopを渡して、それが私のために行うのではありません。ここでは、アニメーションの抜粋です：

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 

私は今の方法を持っているコードを使用すると、それが実行した後：

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です最初のアニメーションは、アニメーションの前にすべてのプロパティに戻りますが、ウィンドウが再びクリックされるまでそこに座ります。

編集：ああ、ここには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(); 
     } 
    } 
    }()); 
};