我想为开始速度较慢、速度变快、然后恢复速度较慢的对象制作动画。 模拟我想要达到的目标:
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/
最佳答案
这里有几个问题 - 主要的一个(可能让您无法自行解决的问题)是您调用缓动函数而不是引用 它。对于初学者来说,这是一个非常常见的错误,尤其是在 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 .
关于javascript - Fabric js动画速度在动画时变化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33673822/