现代用户界面开始在移动时为其UI元素提供良好的惯性。选项卡滑入，页面转换，甚至一些列表框和滚动元素都有很好的惯性（例如iphone）。对此最好的理论是什么？它们加速时不仅仅是重力，而且随着它们的到位而减速。我已经尝试了各种公式来加速到最大（终端）速度然后放慢速度，但我没有尝试“感觉”正确。总觉得有点不对劲。是否有这样的标准，或者只是在看起来/感觉正确之前玩各种数字？
答案 0 :(得分：18)
你在这里谈论两件不同的事情。
一个是动量 - 当你从拖拽中释放它们时给予残余动作。这仅仅是当用户释放它时记住物体的速度，然后每帧将该速度应用于物体并且还将每帧的速度降低一些量。如何降低每帧的速度是你试验的感觉。
另一件事是轻松和轻松的动画。这是关于在两个位置之间移动物体时平滑加速/减速的方法，而不仅仅是线性插值。您可以通过简单地通过sigmoid函数输入“时间”值，然后使用它来在两个位置之间插入对象。一个这样的功能是
smoothstep(t) = 3*t*t - 2*t*t*t [0 <= t <= 1]
这为您提供了轻松和缓出的行为。但是，您通常只会看到GUI中使用的缓出。也就是说，物体开始快速移动，然后在最终位置慢慢停止。为此，您只需使用曲线的右半部分，即
smoothstep_eo(t) = 2*smoothstep((t+1)/2) - 1
答案 1 :(得分：6)
Mike F得到了它：你应用一个时间位置函数来计算一个物体相对于时间的位置（不要用速度捣乱;它只在你试图找出你想要的算法时才有用使用。）
Robert Penner's easing equations and demo非常棒;就像jQuery demo一样，它们可以直观地展示宽松的样子，但它们也会给你一个位置时间图，让你了解它背后的等式。
答案 2 :(得分：4)
您要找的是interpolation。粗略地说，有些功能从0到1不等，缩放和翻译时会产生漂亮的动作。这在Flash中经常使用，并且有很多例子:(注意：在Flash插值中已经选择了“补间”这个名称，最常用的插值类型称为“缓动”。）
看看这个以获得运动类型的直观感觉： SparkTable: Visualize Easing Equations
当应用于移动，缩放，旋转其他动画时，这些方程可以给出动量感，摩擦感，弹跳感或弹性感。有关应用于动画的示例，请查看Robert Penners easing demo。他是最受欢迎的一系列动画函数的作者（我相信Adobe的内置函数是基于他的）。这种类型的过渡同样适用于alpha（用于淡入）。
有一些使用方法。 easeInOut启动缓慢，加速和减速。 easeOut快速启动并减速（如摩擦）和easeIn启动缓慢并加速（如动量）。根据您的需要，您可以选择合适的一种。然后你可以在Sine，Expo，Quad等之间选择效果的强度。其他的很容易通过他们的名字来解决（例如Bounce弹跳，Back稍微进一步然后像弹性弹回来）。
这是AS3的link to the equations from the popular Tweener library。你应该能够用JavaScript（或任何其他语言）重写这些，几乎没有问题。
答案 3 :(得分：0)
正在玩这些数字..感觉良好是好的。
我多年来一直试图开发神奇的配方。最后，丑陋的黑客总是觉得最好。只要确保你以某种方式正确地为你的动画计时，并且不要依赖某种重绘/刷新率。这些往往会根据操作系统而改变。
答案 4 :(得分：0)
我也不是这方面的专家，但我相信他们完成了二次公式，当给出正确的参数时，开始快或慢，并在结束时大幅增加或减少直到达到某个点。