我如何使控件/元素随惯性移动?

你说的是两件不同的事。

另一件事是“缓入”和“缓出”动画。这是关于在两个位置之间移动对象时平滑地加速/减速对象,而不仅仅是线性插值。在使用“时间”值在两个位置之间插值对象之前,只需通过sigmoid函数输入“时间”值即可。一个这样的功能是

smoothstep(t) = 3*t*t - 2*t*t*t    [0 <= t <= 1]

这会让你的行为既轻松又轻松。但是,您通常会看到GUI中只使用ease out。也就是说,对象开始快速移动,然后在其最终位置缓慢停止。要实现这一点,只需使用曲线的右半部分即可。

smoothstep_eo(t) = 2*smoothstep((t+1)/2) - 1

Mike F明白了:你可以应用一个时间-位置函数来计算一个物体相对于时间的位置(不要乱动速度;它只在你试图找出你想要使用的算法时才有用。)

Robert Penner's easing equations and demo jQuery demo ,它们直观地展示了缓和的效果,但它们也会给你一个位置-时间图,让你了解它背后的方程式。

你要找的是 interpolation . 粗略地说,有些函数在0到1之间变化,当缩放和转换时,会创建漂亮的运动。这在Flash中非常常用,有很多例子:(注:在Flash中,插值取了“tweening”这个名字,最流行的插值类型称为“easing”。)

查看此图,以直观地了解运动类型: SparkTable: Visualize Easing Equations .

当应用于运动、缩放、旋转和其他动画时,这些方程可以提供动量、摩擦、反弹或弹性的感觉。例如,当应用于动画时,请查看 Robert Penners easing demo

有一点方法的使用。轻松启动慢、加速和减速。easeOut启动快,速度慢(如摩擦),easeIn启动慢,速度快(如动量)。根据你想要的感觉,你可以选择合适的。然后选择正弦、Expo、Quad等效果强度。其他人很容易根据他们的名字计算出来(例如,反弹,后退一点,然后像橡皮筋一样反弹)。

link to the equations from the popular Tweener library 对于AS3。您应该能够用JavaScript(或任何其他语言)重写这些代码,几乎没有问题。

多年来,我一直试图自己开发神奇的公式。最后,丑陋的黑客总是感觉最好。只是要确保你的动画时间安排正确,不要依赖于某种重画/刷新率。这些都会随着操作系统的变化而变化。

我也不是这方面的专家,但我相信它们是用二次公式完成的,当给定正确的参数时,从快或慢开始,在接近终点时急剧增加或减少,直到达到某一点。