现代UI正在开始为移动时的UI元素提供良好的惯性.选项卡滑入,页面转换,甚至一些列表框和滚动元素都有很好的惯性(例如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演示一样,它们在视觉上展示了缓动效果,但它们也为您提供了一个位置时间图,让您了解它背后的等式.
京公网安备 11010802040832号 | 京ICP备19059560号-6 