Зацикливание анимации

Question

Я создал рабочий метод анимации для простого Canvaslibrary Я создаю, но я не могу понять, как сделать цикл анимации - из самого метода, заданного опцией. Я имею в виду, что я знаю, как его зацикливать в самом приложении, но не только, если я, скажем, передаю метод a 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 

С кодом я имею в методе сейчас, когда он выполняет первоначальная анимация, она возвращается к всем ее свойствам перед анимацией, но затем сидит там, пока окно не будет нажато снова.

EDIT: О, и вот 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(); 
     } 
    } 
    }()); 
};