如何使控件/元素随惯性运动? [英] How I do I make controls/elements move with inertia?

问题描述

现代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?

推荐答案

您在这里谈论的是两件事.

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.

另一件事是缓入缓出动画.这是关于在两个位置之间移动对象时平滑地加速/减速，而不仅仅是线性插值.您可以通过使用S型函数简单地输入时间"值，然后再使用它在两个位置之间进行插值来实现此目的.这样的功能之一就是

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

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

这可以使您既轻松又轻松.但是，您通常会看到GUI中仅使用缓动功能.也就是说，对象开始快速移动，然后在其最终位置减速至停止.为此，您只需使用曲线的右半部分即可.

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.

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

这篇关于如何使控件/元素随惯性运动?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！