javascript - 在 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);

在此片段中，我指定了恒定的持续时间和线性三次贝塞尔曲线，这与轮子的真实旋转完全不同。考虑到旋转的一些变化，我怎样才能最好地动画化这种变化，以便模拟车轮旋转的物理原理，然后通过摩擦力使车轮在最终旋转 Angular 停止？

Answer 1

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