Изменение скорости анимации ткани js при анимации

Question

Я хочу одушевить объект, который начинает медленную скорость, становясь быстрее, а затем возвращается к медленной скорости. моделирование того, что я хочу для того чтобы достигнуть:

sec: 1, duration: 5000, sec: 2, duration: 4000, 
sec: 3, duration: 3000, sec: 4, duration: 2000, 
sec: 5, duration: 1000, sec: 6, duration: 2000, 
sec: 7, duration: 3000, sec: 8, duration: 4000, 
sec: 9, duration: 5000 

я попытался следующий код:

var rand = fabric.util.getRandomInt(4, 7); 

function animateWheel(i) { 
    if (i == rand) 
     return; 
    var _duration = (rand -i) * 1000; 
    obj.animate('angle', 360 * i, { 
     duration: _duration, 
     onChange: canvas.renderAll.bind(canvas), 
     onComplete: function() { animateWheel(i + 1); }, 
     easing: fabric.util.ease.easeOutCubic() 
    }); 
} 
animateWheel(1); 

, но проблема в том, что каждая анимация начинают со скоростью 0 и есть «скачки» не гладкий, смотрите пример кода: https://jsfiddle.net/o7ohgayw/

Answer 1

Там есть пара проблем здесь - главная один (тот, который, вероятно, держал вас от выяснить это самостоятельно), что вы вызова ing функция ослабления вместо ссылка it. Это очень распространенная ошибка для новичков, особенно в Javascript.

Что большая часть вашего кода делает, это изобретать колесо, когда у Fabric уже есть приятные функции облегчения, встроенные для того, чтобы делать то, что вы хотите.

Попробуйте вместо (fiddle here):

function animateWheel(i, j) {  
    obj.animate('angle', 360 * i, { 
     duration: j, 
     onChange: canvas.renderAll.bind(canvas), 
     easing: fabric.util.ease.easeInOutCubic 
    }); 
} 

animateWheel(10, 2500); 

Теперь animateWheel будет принимать два параметра - сколько раз вы хотите, чтобы повернуть, а длительность вращения. Ткань справится с остальными. Если вам не нравится способ ускорения и замедления, поэкспериментируйте с другим In/Out Easing Functions.