服务时间:8:30-18:00

首页 >UI设计网

UI界面中有哪些常见的动效类型

发布时间:2022-12-23 12:45 字数:978字 阅读:85

UI界面中有哪些常见的动效类型?应用程序的动效通常是由基础动效组合而成,下面将介绍一些常见基础动效的应用。

一、运动

运动分为直线运动和曲线运动。

1.直线运动动效

直线运动分为加速运动、减速运动和匀速运动等。

(1)直线运动

直线运动动效是物体从一个位置到另一个位置的位移运动。界面中的元素通过位置的变化产生了动态的效果。

(2)缓动-加速和减速运动

直线运动比较僵硬,在现实世界中,一个物体可以受重量、摩擦力等影响,不会突然停止或者突然启动,物体的运动状态在开始和结束是一种缓动,常见的缓动有:减速运动、加速运动、先加速后减速及先减速后加速,缓动更符合物体运动规律,也符合我们的动态审美。

图1为常用的先加速再减速的运动曲线。一般界面元素离开屏幕时的运动应该为加速曲线,返回为减速曲线。

先加速再减速的运动曲线

图1 先加速再减速的运动曲线

还有一种常用的运动分两段,即先反向运动,再正向运动,如图2所示。

2.曲线运动动效非直线运动即为曲线运动,现实中曲线运动的情况很多,常见的曲线运动有弧形曲线运动、波形曲线运动、“之”字形曲线运动、贝塞尔曲线运动等。曲线运动柔和、圆滑、优美,用户体验更好。

先反向运动,再正向运动曲线

图2 先反向运动,再正向运动曲线

二、放大和缩小

放大或缩小也是常见的应用程序动效,其界面元素为等比放大或缩小的过程。由小变大、由大变小的过程称为弹性。例如,在Android系统中浏览图片时,图片可以放大或缩小。

三、消失和出现

消失和出现动效是界面元素从无到有或从有到无的过程。例如,Android的侧滑菜单根据手势展开与隐藏,实现了消失和出现动效。

另外,应用程序使用的转场动效在页面切换时,也使用了消失和出现动效。

四、翻转

翻转动效是界面元素按照一定的角度转动,通常呈现为3D效果。图3为页面内元素翻转动效。

页面元素翻转动效

图3 页面元素翻转动效

五、旋转

旋转动效是界面元素围绕设定的中心点在平面上转动,也可以是整个界面所有元素的转动。例如,移动终端横屏和竖屏之间的切换具有下列特点。

(1)内容随着屏幕的旋转而旋转或重新排列。

(2)能够在旋转的同时,平滑地保证内容的过渡。

(3)内容好像是液态的,伴随屏幕保持方向。

六、变形

变形动效是移动终端或网页的界面元素的形状改变动效,这种改变可以是交互的,也可以是非交互的。

七、变色

变色动效是应用程序界面元素的色彩变化动效。