转载作品

UI动画中缓冲的重要性!

哈利路亚 发表于   2021-12-28 14:22:31
903
2
16


图片.gif



在对 UI 动画进行微调时,有一种叫做缓动的东西。缓动可以减慢运动速度并创建您想要突出的运动或自然运动。这种缓动不仅适用于 UI 动画,还适用于角色运动、特效等,除非您打算使动画保持恒定速度,否则它是一个重要的元素。


图片 (2).gif


如果没有缓冲,由于它以恒定速度移动,因此当窗口达到其最大尺寸时,它会停止并给人一种很硬生生的感觉。


图片 (3).gif


具有缓冲,起初是剧烈膨胀后,在达到最大值之前逐渐膨胀,给人一种柔和的印象。


在为UI添加动画时,除了弹出动画之外,每次插入各种动画(例如屏幕过渡和任务开始制作时的UI移动)时,哪种缓动才是正确答案并没有正确答案。


如果不知道游戏的颜色、设计和世界观,就无法添加适合的动画。

除此之外,我们还需要考虑是否需要预备动作。


初步运动是事物开始运动时的第一个运动。例如,在打字时抬起,蹲下后跳起的起身蹲伏动作是预备动作。采取与要采取的行动相反的行动就是预备行动。通过将此运动融入用户界面,您可以使其看起来更自然。

现在让我们看看 UI 中会发生什么,作为弹出窗口关闭时的初步操作。

图片 (4).gif


按钮出现时的初步操作是什么? 初步操作就是按下左上角的按钮。当您按下左上角的按钮时,您可以通过将其缩小来将其显示为弹出窗口的初步操作。


图片 (5).gif


但是,由于即使在关闭时也有按下按钮的操作,因此如果将其视为初步操作,则无需展开一次。预备动作(抬起手指→按下按钮)→缩小窗口完成。


图片 (5).gif


当 UI 移动时,还有一种极端剧烈的运动。是在车窗加速超过目标点后返回目标点。将其应用于 UI 的移动使其看起来生动有趣。

图片 (3).gif


插入/缓入,较快者在目标点附近缓慢停止。这类似于汽车刹车,也可以表现出自然的运动。


图片 (6).gif


扩大后的最大到达点成为目标点,从那里反复缩小扩大到达目标点。
意思是球碰到地面反弹,最后停在目标点。

图片 (4).gif


接近超调者的运动

图片 (7).gif


极端剧烈的运动


图片 (3).gif


接近缓入的运动


图片 (6).gif


接近弹跳下落运动的运动


如果游戏是流行类型的,有很多动画会包含接近人类动作的过冲,反之,如果游戏是网络类型的,则应用慢入/缓入动作。因此知道您正在制作什么样的游戏并考虑动作是必要的。


转自 动效达人


没有标签
确定
评论(2)
还没有人评论,快来抢沙发吧!