用户界面-我如何使控件/元素以惯性移动



现代用户界面在移动时开始赋予用户界面良好的惯性。选项卡滑入、页面转换,甚至一些列表框和滚动菜单都有很好的惯性(例如iphone)。对此最好的算法是什么?这不仅仅是重力在它们加速,然后在它们就位时减速。我试过各种各样的公式来加速到最大(终端)速度,然后减速,但我试过的都"感觉"不对。它总是让人感觉有点不对劲。这有标准吗?还是只是一个玩各种数字直到看起来/感觉正确的问题?

您在这里谈论的是两件不同的事情。

一种是动量——当你把它们从阻力中释放出来时,会让它们产生残余运动。这只是关于当用户释放某个物体时记住它的速度,然后每帧将该速度应用于对象,并将每帧的速度降低一定程度。如何降低每帧的速度是你为了获得正确的感觉而进行的实验。

另一件事是轻松输入和轻松输出动画。这是关于在两个位置之间移动对象时平滑地加速/减速对象,而不仅仅是线性插值。在使用sigmoid函数在两个位置之间插值对象之前,只需通过该函数输入"时间"值即可。就是这样一个功能

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

这会让你的行为既轻松又轻松。然而,您通常只会看到在GUI中使用的易用性。也就是说,物体开始快速移动,然后在其最终位置缓慢停止。要实现这一点,只需使用曲线的右半部分,即

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

Mike F做到了:你可以应用时间-位置函数来计算物体相对于时间的位置(不要纠缠于速度;只有当你试图找出你想要使用的算法时,它才有用。)

Robert Penner的放松方程和演示非常出色;与jQuery演示一样,它们直观地展示了宽松政策的效果,但也为您提供了一个位置-时间图,让您了解其背后的等式。

您想要的是插值。粗略地说,有些函数从0到1不等,当缩放和平移时,会产生好看的运动。这在Flash中经常使用,有很多例子:(注意:在Flash中,插值取了"tweening"的名字,最流行的插值类型被称为"easing"。)

看看这个,可以直观地了解运动类型:SparkTable:可视化Easing方程式。

当应用于移动、缩放、旋转和其他动画时,这些方程可以提供动量、摩擦、弹跳或弹性的感觉。例如,当应用于动画时,可以看看Robert Penners的轻松演示。他是最受欢迎的一系列动画功能的作者(我相信Adobe的内置功能是基于他的)。这种类型的过渡在alpha上也同样有效(用于淡入)。

用法有一点方法。easeInOut启动缓慢,速度加快,速度减慢。easeOut开始得很快,速度减慢(像摩擦力),而easeIn开始得很慢,速度加快(像动量)。根据你想要的感觉,你可以选择合适的。然后你可以在正弦、Expo、Quad等之间进行选择,以获得效果的强度。其他的很容易根据它们的名字来计算(例如,反弹,后退一点,然后像松紧带一样回来)。

这里有一个链接到AS3的流行Tweener库中的方程。您应该能够用JavaScript(或任何其他语言)重写这些内容,几乎没有问题。

它在玩数字。。感觉好的就是好的。

多年来,我一直试图自己开发神奇的配方。最后,丑陋的黑客总是感觉最好。只要确保你的动画时间安排得当,不要依赖于某种重画/刷新率。这些往往会根据操作系统而变化。

我也不是这方面的专家,但我相信它们是用二次公式完成的,即当给定正确的参数时,开始得快或慢,并在接近终点时急剧增加或减少,直到达到某一点。

相关内容

  • 没有找到相关文章

最新更新