Fabric 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开始并且"jumps"不流畅，请看代码示例： https://jsfiddle.net/o7ohgayw/

Answer 1

这里有几个问题 - 主要问题（可能让您无法自行解决的问题）是您调用缓动函数而不是引用它。这对初学者来说是一个很常见的错误，尤其是在 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 将采用两个参数 - 您希望它旋转多少次，以及旋转的持续时间。 Fabric 会处理剩下的事情。如果您不喜欢它加速和减速的方式，请尝试其他 In/Out Easing Functions.

Fabric js动画速度在动画时变化

Fabric js animation speed change while animating

javascript

fabricjs