velocity.js 动画两个属性时的持续时间不同

Question

我正在尝试为元素的缩放和旋转设置动画（可行），但缩放动画是在旋转完成之前完成的。 div 保持旋转，而缩放动画在大约 300 毫秒后完成。我还没有找到一种语法，可以在其中为单独的属性指定持续时间（我认为持续时间应该适用于所有指定的属性）。这是代码，任何提示表示赞赏：

$('#el').velocity({
   rotateZ:[ 1440, 'easeInOut', 0 ],
   scale:[ 1, 'spring', 0 ]
},{
    duration:1000
});

Answer 1

从技术上讲，动画不会在 300 毫秒时结束，只是 spring 缓动让它看起来像。 spring 缓动函数在动画的第二阶段不会移动太多。尝试 spring 使用其他一些参数进行缓动，例如：

$('#el').velocity({
  rotateZ:[ 360, 'easeInOut', 0.001 ],
  scale:[ 1, [20,0.2], 0.001 ]
},{
  duration:1000
});

另请注意，velocity 似乎将 0 值作为未定义参数处理，因此我改用 0.001。（它只对后续动画有影响）

velocity.js duration different when animated two properties