现代 UI 开始在移动时赋予其 UI 元素很好的惯性。选项卡滑入、页面转换，甚至一些列表框和滚动元素对它们都有很好的惯性（例如 iphone）。什么是最好的算法？当它们加速时，不仅仅是重力，然后在它们落位时减速。我尝试了各种公式来加速到最大（终端）速度然后放慢速度，但我没有尝试过“感觉”正确。总感觉有点不对劲。是否有一个标准，或者只是玩各种数字直到它看起来/感觉正确？
Kris Erickson
问问题
5107 次
5 回答
18
你在这里谈论两个不同的事情。
一个是动量——当你从拖拽中释放它们时，赋予它们剩余的运动。这只是关于在用户释放物体时记住物体的速度，然后将该速度应用于每一帧的对象，并将每帧的速度降低一定量。如何降低每一帧的速度是您尝试获得正确感觉的方法。
另一件事是缓入和缓出动画。这是关于当您在两个位置之间移动对象时平滑地加速/减速对象，而不仅仅是线性插值。为此，您只需通过 sigmoid 函数输入“时间”值，然后再使用它在两个位置之间插入对象。一个这样的功能是
smoothstep(t) = 3*t*t - 2*t*t*t [0 <= t <= 1]
这为您提供了缓入和缓出行为。但是，您通常只会看到 GUI 中使用的缓出。也就是说，物体开始快速移动，然后缓慢地停在它们的最终位置。为此，您只需使用曲线的右半部分，即。
smoothstep_eo(t) = 2*smoothstep((t+1)/2) - 1
于 2008-10-12T22:18:14.817 回答
6
Mike F 明白了：您应用时间-位置函数来计算对象相对于时间的位置（不要乱用速度；它仅在您试图找出要使用的算法时才有用。 )
Robert Penner 的缓动方程和演示非常棒；就像jQuery 演示一样，它们直观地展示了缓动的样子，但它们还为您提供了位置时间图，让您了解其背后的方程式。
于 2008-10-12T22:41:36.177 回答
4
您正在寻找的是插值。粗略地说，有些函数从 0 到 1 不等，当缩放和平移时会产生漂亮的运动。这在 Flash 中经常使用，并且有大量示例：（注意：在 Flash 中，插值取名为“补间”，最流行的插值类型称为“缓动”。）
看看这个以获得对运动类型的直观感受： SparkTable: Visualize Easing Equations。
当应用于运动、缩放、旋转和其他动画时，这些方程可以给人一种动量、摩擦、弹跳或弹性的感觉。有关应用于动画的示例，请查看Robert Penners 缓动演示。他是最流行的一系列动画函数的作者（我相信Adobe的内置函数都是基于他的）。这种类型的过渡同样适用于 alpha（用于淡入）。
用法有一点方法。easeInOut 开始缓慢，加速和减速。easeOut 开始快并减速（如摩擦），easeIn 开始缓慢并加速（如动量）。根据您想要的感觉选择合适的。然后根据效果强度在 Sine、Expo、Quad 等之间进行选择。其他的很容易通过他们的名字来计算（例如 Bounce 弹跳，Back 走得更远，然后像弹性一样回来）。
这是一个来自流行的 AS3 Tweener 库的方程的链接。您应该能够用 JavaScript（或任何其他语言）轻松地重写这些。
于 2008-10-12T22:52:43.157 回答
0
它在玩数字。感觉好的就是好的。
多年来，我一直试图自己开发魔法公式。最后，丑陋的黑客总是感觉最好。只要确保你以某种方式正确地计时你的动画，不要依赖某种重绘/刷新率。这些往往会根据操作系统而变化。
于 2008-10-12T21:56:38.030 回答
0
我也不是这方面的专家，但我相信他们是用二次公式完成的，当给定正确的参数时，开始时快或慢，并在接近结束时急剧增加或减少，直到达到某个点。
于 2008-10-12T21:58:31.253 回答