现代UI开始在移动时给它们的UI元素带来了不错的惯性。选项卡滑入，页面转换，甚至一些列表框和滚动元素都有漂亮的惯性效果（例如iPhone）。那么这种效果的最佳算法是什么？它不仅仅是重力，因为它们加速，然后减速到位。我尝试过各种公式来加速到最大（终端）速度，然后减速，但我尝试过的所有方法都感觉“不对劲”。它总是感觉有点不对劲。这个有标准吗，还是只是通过调整各种数字直到看起来/感觉正确？
5个回答
18
您在这里谈论了两件不同的事情。
一是动量-当您从拖动中释放物品时，赋予它们剩余的运动。这只是关于记住物体释放时的速度，然后将该速度应用于每个帧的物体，并且每个帧也通过某些量减少速度。如何在每个帧上减少速度是您进行实验以获得正确感觉的方式。
另一件事是缓入缓出动画。这是关于在移动对象在两个位置之间时，平滑地加速/减速，而不是线性插值。您可以通过在使用时间值插值对象之前将其传递通过一个 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
1
1smoothstep_eo(t) 可以简化为 1.5t-0.5t^3。 - Henrik Paul
6
Mike F认为：你可以应用时间-位置函数来计算物体随时间变化的位置（不要纠结于速度；只有在尝试确定要使用的算法时才有用）。
Robert Penner的缓动方程和演示非常出色；就像jQuery演示一样，它们直观地展示了缓动的外观，但它们还提供了一个位置时间图表，以便让您了解背后的方程式。
- Ambush Commander
4
你所寻找的是插值。简单来说，这些函数的变化范围从0到1，缩放和平移后可以创造出漂亮的动作效果。这在Flash中经常使用，并且有大量的示例：（注意：在Flash中，插值被称为“缓动”，最流行的插值类型被称为“缓动”）。
看看这个网站，可以直观地感受运动类型： SparkTable: Visualize Easing Equations。
当应用于运动、缩放、旋转和其他动画时，这些方程可以给人一种动量、摩擦、弹跳或弹性的感觉。例如，当应用于动画时，请查看Robert Penners easing demo。他是最流行的动画函数系列的作者（我认为Adobe内置的函数就是基于他的）。这种过渡效果同样适用于alpha（淡入淡出）。
使用方法有一定的技巧。easeInOut 开始缓慢，加速然后减速。easeOut 开始快速，然后减速（就像摩擦力），而 easeIn 则开始缓慢，然后加速（就像动量）。根据您想要的感觉选择适当的方法。然后从 Sine、Expo、Quad 等中选择强度效果。其他的名称很容易理解（例如，Bounce 可以弹跳，Back 可以向前走一点，然后像弹性一样返回）。
这里是一个链接到流行 Tweener 库方程的链接。你应该能够毫不费力地将它们改写成 JavaScript（或任何其他语言）。
看看这个网站，可以直观地感受运动类型： SparkTable: Visualize Easing Equations。
当应用于运动、缩放、旋转和其他动画时，这些方程可以给人一种动量、摩擦、弹跳或弹性的感觉。例如，当应用于动画时，请查看Robert Penners easing demo。他是最流行的动画函数系列的作者（我认为Adobe内置的函数就是基于他的）。这种过渡效果同样适用于alpha（淡入淡出）。
使用方法有一定的技巧。easeInOut 开始缓慢，加速然后减速。easeOut 开始快速，然后减速（就像摩擦力），而 easeIn 则开始缓慢，然后加速（就像动量）。根据您想要的感觉选择适当的方法。然后从 Sine、Expo、Quad 等中选择强度效果。其他的名称很容易理解（例如，Bounce 可以弹跳，Back 可以向前走一点，然后像弹性一样返回）。
这里是一个链接到流行 Tweener 库方程的链接。你应该能够毫不费力地将它们改写成 JavaScript（或任何其他语言）。
- James Fassett
0
这是与数字打交道..感觉好就是好。
我自己尝试开发魔法公式已经多年了。最终，丑陋的黑客总是感觉最好。只要确保你以某种方式正确计时动画，并且不要依赖某种重绘/刷新率。这些 tend to change based on the OS。
- Nils
0
我对这个也不是专家，但我相信它们是用二次公式完成的，当给定正确的参数时，开始快速或缓慢，并在结束时急剧增加或减少，直到达到某个点。
- Mark
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接