織物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

這里有幾個問題 - 主要問題（可能讓你無法自己解決問題的那個問題）就是你正在調用緩動函數而不是引用它。 對於初學者來說這是一個非常常見的錯誤，特別是在Javascript中。

大多數代碼正在做的是重新發明輪子，當Fabric已經內置了很好的緩動函數來做你想做的事情。

試試這個（ 在這里小提琴 ）：

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將采用兩個參數 - 您希望它旋轉多少次，以及旋轉的持續時間。 面料將處理其余部分。 如果您不喜歡它加速和減速的方式，請嘗試其他進/出緩和功能 。