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

在这段代码中，我指定了一个常量持续时间和一个线性立方贝塞尔曲线，它一点也不像轮子的真实旋转。给定旋转中的一些变化，我如何最好地使这种变化动画化，以便对车轮旋转的物理模型进行建模，然后摩擦使车轮在最后的旋转角度停止？

Answer 1

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