Javascript 设置动画时,Fabric js动画速度会发生变化
我想动画对象开始缓慢的速度,变得更快,然后回到慢速。 模拟我想要实现的目标:Javascript 设置动画时,Fabric js动画速度会发生变化,javascript,fabricjs,Javascript,Fabricjs,我想动画对象开始缓慢的速度,变得更快,然后回到慢速。 模拟我想要实现的目标: 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, duratio
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开始,并且存在“跳跃”,这不是平滑的,请参见代码示例:
这里有几个问题-主要的问题(可能让你无法自己解决的问题)是你调用了缓和函数,而不是引用它。对于初学者来说,这是一个非常常见的错误,尤其是在Javascript中 当Fabric已经内置了很好的放松功能来做您想要做的事情时,您的大部分代码所做的就是重新设计轮子 试试这个():
现在,animateWheel将采用两个参数-您希望它旋转多少次,以及旋转的持续时间。剩下的就用布料了。如果你不喜欢它的加速和减速方式,可以尝试另一种。因此,区别在于
fabric.util.ease.easeInOutCubic
而不是fabric.util.ease.easeOutCubic()
这是最重要的区别。但是请注意,通过使用easing函数,您不需要所有额外的代码来重复调用animateWheel函数。只需在前面设置旋转的总数,它将是一个较长的动画,而不是像以前那样在每次旋转后重新开始。
function animateWheel(i, j) {
obj.animate('angle', 360 * i, {
duration: j,
onChange: canvas.renderAll.bind(canvas),
easing: fabric.util.ease.easeInOutCubic
});
}
animateWheel(10, 2500);