Animasyon döngüsü

Question

Basit bir Canvaslibrary için bir çalışma animasyonu yöntemi yarattım Oluşturuyorum, ancak animasyon döngüsünün nasıl yapılacağını tam olarak anlayamıyorum - yöntemin kendisinden bir seçenek sunulur. Bununla demek istediğim, uygulamanın kendisinde nasıl döngü yapılacağını bildiğim, fakat sadece bir loop parametresini geçip, benim için bunu yaparsa, değil. gerçekleştirdiği bir kez, şimdi

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 

ben yönteminde var kod ile:

Şimdi

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

, burada yöntemin kendisinin dışındaki döngü çalışması yapmak zorunda code var: İşte animasyon snippet'ine İlk animasyon, animasyondan önce tüm özelliklerine geri döner, ancak sonra pencere tekrar tıklanana kadar orada oturur.

DÜZENLEME: Oh, işte code Şu an işim yok.

Answer 1

Şekil verilmiş. Biraz hata ayıkladıktan sonra problemin options.duration olduğunu farkettim. Tam olarak ne olduğundan emin değil, ama düzgün çalışmıyordu. Temel olarak, seçenekleri [foo] yerine statik bir değerle değiştirdim ve her biri ve başarısız olan tek seferde, options.duration ve statik değer kullanmasaydım denedim. Sorun, her seferinde bir şey görmek için çok yavaş koştururken, her zaman 1000 ile çarpılıyordu. Yine, nedenini tam olarak bilmiyorum, ama mesele ... Ben onu tamir ettim. Code. Aşırı yüksek süreyi düzeltmek için tek yapmam gereken, * 1000'u kaldırarak koddaki diğer değerlerimi dezenfekte etmekti.

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