如何使控件/元素随着惯性移动？
现代 UI 开始赋予其 UI 元素移动时良好的惯性。 选项卡滑入、页面转换，甚至某些列表框和滚动元素对它们都有很好的惯性（例如 iPhone）。 对此最好的算法是什么？ 当它们加速时，这不仅仅是重力，然后当它们落入到位时减速。 我尝试过各种公式来加速到最大（终端）速度然后减速，但我尝试过的所有公式都“感觉”不对。 总感觉有点不对劲。 是否有一个标准，或者只是玩弄各种数字，直到看起来/感觉正确为止？
Modern UI's are starting to give their UI elments nice inertia when moving. Tabs slide in, page transitions, even some listboxes and scroll elments have nice inertia to them (the iphone for example). What is the best algorythm for this? It is more than just gravity as they speed up, and then slow down as they fall into place. I have tried various formulae's for speeding up to a maximum (terminal) velocity and then slowing down but nothing I have tried "feels" right. It always feels a little bit off. Is there a standard for this, or is it just a matter of playing with various numbers until it looks/feels right?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
你在这里谈论两件不同的事情。
一是动量——当你从阻力中释放物体时，它们会产生残余运动。 这只是简单地记住用户释放某个物体时的速度，然后将该速度应用于每帧的物体，并在每帧降低一定的速度。 如何降低每一帧的速度是您尝试获得正确感觉的方法。
另一件事是缓入和缓出动画。 这是关于当您在两个位置之间移动对象时平滑地加速/减速对象，而不仅仅是线性插值。 您可以通过简单地通过 sigmoid 函数输入“时间”值来实现此目的，然后使用它在两个位置之间插入对象。 其中一个函数是
This 为您提供了缓入和缓出行为。 但是，您通常会看到 GUI 中只使用了缓出功能。 也就是说，物体开始快速移动，然后缓慢地停在最终位置。 要实现这一点，您只需使用曲线的右半部分，即。
You're talking about two different things here.
One is momentum - giving things residual motion when you release them from a drag. This is simply about remembering the velocity of a thing when the user releases it, then applying that velocity to the object every frame and also reducing the velocity every frame by some amount. How you reduce velocity every frame is what you experiment with to get the feel right.
The other thing is ease-in and ease-out animation. This is about smoothly accelerating/decelerating objects when you move them between two positions, instead of just linearly interpolating. You do this by simply feeding your 'time' value through a sigmoid function before you use it to interpolate an object between two positions. One such function is
This gives you both ease-in and ease-out behaviour. However, you'll more commonly see only ease-out used in GUIs. That is, objects start moving snappily, then slow to a halt at their final position. To achieve that you just use the right half of the curve, ie.
Mike F 明白了：您应用时间位置函数来计算对象相对于时间的位置（不要浪费速度；它仅在您试图弄清楚要使用什么算法时才有用。 )
Robert Penner 的缓动方程和演示非常棒； 就像jQuery demo一样，它们直观地演示了缓动的样子，但它们也给出了您可以通过位置时间图了解其背后的方程式。
Mike F's got it: you apply a time-position function to calculate the position of an object with respect to time (don't muck around with velocity; it's only useful when you're trying to figure out what algorithm you want to use.)
Robert Penner's easing equations and demo are superb; like the jQuery demo, they demonstrate visually what the easing looks like, but they also give you a position time graph to give you an idea of the equation behind it.
您正在寻找的是插值。 粗略地说，有些函数的值从 0 到 1 不等，缩放和平移后会产生漂亮的运动。 这在 Flash 中经常使用，并且有大量示例：（注意：在 Flash 中，插值被称为“补间”，最流行的插值类型被称为“缓动”。）
看看这个即可了解对运动类型的直观感受：
SparkTable：可视化缓动方程。
当应用于运动、缩放、旋转和其他动画时，这些方程可以给出动量、摩擦、弹跳或弹性的感觉。 有关应用于动画的示例，请查看 Robert Penners 缓动演示。 他是最受欢迎的动画函数系列的作者（我相信Adobe的内置动画函数都是基于他的）。 这种类型的过渡同样适用于 Alpha（用于淡入）。
使用上有一点方法。 easeInOut 开始缓慢，加速然后减慢。 easeOut 开始快，然后减慢（如摩擦力），easeIn 开始慢，然后加速（如动量）。 根据您想要的感觉，选择合适的。 然后您可以根据效果的强度在 Sine、Expo、Quad 等之间进行选择。 其他的很容易通过它们的名字来计算出来（例如弹跳、后退稍远然后像橡皮筋一样返回）。
以下是方程式的链接AS3 的流行 Tweener 库。 您应该能够轻松地用 JavaScript（或任何其他语言）重写这些内容。
What you are looking for is interpolation. Roughly speaking, there are functions that vary from 0 to 1 and when scaled and translated create nice looking movement. This is quite often used in Flash and there are tons of examples: (NOTE: in Flash interpolation has picked up the name "tweening" and the most popular type of interpolation is known as "easing".)
Have a look at this to get an intuitive feel for the movement types:
SparkTable: Visualize Easing Equations.
When applied to movement, scaling, rotation an other animations these equations can give a sense of momentum, or friction, or bouncing or elasticity. For an example when applied to animation have a look at Robert Penners easing demo. He is the author of the most popular series of animation functions (I believe Adobe's built in ones are based on his). This type of transition works equally as well on alpha's (for fade in).
There is a bit of method to the usage. easeInOut start slow, speeds up and the slows down. easeOut starts fast and slows down (like friction) and easeIn starts slow and speeds up (like momentum). Depending on the feel you want you choose the appropriate one. Then you choose between Sine, Expo, Quad and so on for the strength of the effect. The others are easy to work out by their names (e.g. Bounce bounces, Back goes a little further then comes back like an elastic).
Here is a link to the equations from the popular Tweener library for AS3. You should be able to rewrite these in JavaScript (or any other language) with little to no trouble.
这是在玩数字……感觉好的就是好的。
多年来我一直尝试自己开发神奇公式。 最后，丑陋的黑客总是感觉最好。 只需确保以某种方式正确安排动画时间，并且不要依赖某种重绘/刷新率。 这些往往会根据操作系统而变化。
It's playing with the numbers.. What feels good is good.
I've tried to develop magic formulas myself for years. In the end the ugly hack always felt best. Just make sure you somehow time your animations properly and don't rely on some kind of redraw/refresh rate. These tend to change based on the OS.
我也不是这方面的专家，但我相信它们是用二次公式完成的，当给定正确的参数时，开始快或慢，并在接近结束时急剧增加或减少，直到达到某一点。
Im no expert on this either, but I beleive they are done with quadratic formulas, that, when given the correct parameters, start fast or slow and dramatically increase or decrease towards the end until a certain point is reached.