在 Raphael.js 中使用三次贝塞尔曲线为纺车制作动画

Question

我使用 Raphael.js 构建了一个“命运之轮”，现在希望将这个轮子设置为任意旋转度数。我使用 Raphael.js 的 animate function 执行此动画：

degrees += 360;
var duration = 1000;

wheel.animate({transform:"r"+degrees+" 250 250"},duration,"cubic-bezier(0,0,1,1)",null);

在这个 sn-p 中，我指定了一个恒定的持续时间和一个线性三次贝塞尔曲线，这与真正的车轮旋转完全不同。考虑到旋转的一些变化，我如何才能最好地为这种变化设置动画，以便模拟车轮旋转的物理特性，然后摩擦使车轮在最终旋转度数处停止？

Answer 1

如果您要求将不同的常量传递给您的cubic-bezier 函数，我建议您查看cubic-bezier.com，它可以让您尝试不同的曲线组合。该站点本身仅将该函数应用于线性运动（而不是旋转），但它应该为您提供一个很好的起点来修改一些不同的值。