織物js動畫速度變化，同時動畫

我想動畫物體開始慢速，變得更快，然後回到慢速。模擬的是什麼，我想才達到：織物js動畫速度變化，同時動畫

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/

來源

2015-11-12 kobe

這裏有幾個問題 - 主要之一（一個可能讓你從計算出來你自己）是你電話緩解功能而不是參考它。對初學者來說這是一個非常常見的錯誤，特別是在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。

來源

2015-11-12 15:25:05

這很完美，我會繼續學習，謝謝。 – kobe

所以區別在於'fabric.util.ease.easeInOutCubic'而不是'fabric.util.ease.easeOutCubic（）' – kobe

這是最重要的區別。但請注意，通過使用緩動函數，您不需要擁有所有額外的代碼來反覆調用animateWheel函數。只需在前面設置總旋轉次數，它將是一個長動畫，而不是像以前那樣在每次旋轉後重新開始。 –

織物js動畫速度變化，同時動畫

回答

相關問題