Fabric js animation speed change while animating

Question

i want to animate object that starts slow speed, becoming faster, and then getting back to slow speed. simulation of what i want to achive:

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

i have tried to following code:

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

but the problem is that every animation start with speed 0 and there is "jumps" it is not smooth, please see code example: https://jsfiddle.net/o7ohgayw/

Answer 1

There's a couple problems here - the main one (the one that probably kept you from figuring it out on your own) is that you're calling the easing function instead of referencing it. This is a very common mistake for beginners, especially in Javascript.

What most of your code is doing is reinventing the wheel, when Fabric already has nice easing functions built in to do what you want.

Try this instead ( 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);

Now animateWheel will take two parameters - how many times you want it to rotate, and the duration of the rotation. Fabric will handle the rest. If you don't like the way it speeds up and slows down, experiment with the other In/Out Easing Functions .