2.1 基础动效

应用程序的动效通常是由基础动效组合而成，下面将介绍一些常见基础动效的应用。

2.1.1 运动

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

1.直线运动动效

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

（1）直线运动

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

（2）缓动-加速和减速运动

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

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

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

2.曲线运动动效

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

飘动的旗帜是波形曲线运动，如图2-3所示。飘落的纸片为“之”字形运动，如图2-4所示。

使用贝塞尔曲线可以实现翻页效果，如图2-5所示。

2.1.2 放大和缩小

放大或缩小也是常见的应用程序动效，其界面元素为等比放大或缩小的过程。由小变大、由大变小的过程称为弹性。

例如，在Android系统中浏览图片时，图片可以放大或缩小，如图2-6所示。

再例如，在网页中使用CSS3按钮动画制作圆形按钮，放大与缩小动画特效如图2-7所示。

2.1.3 消失和出现

消失和出现动效是界面元素从无到有或从有到无的过程。

例如，Android的侧滑菜单根据手势展开与隐藏，实现了消失和出现动效，如图2-8所示。图片导航动效也使用了消失和出现动效，如图2-9所示。

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

2.1.4 翻转

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

2.1.5 旋转

旋转动效是界面元素围绕设定的中心点在平面上转动，也可以是整个界面所有元素的转动。

例如，移动终端横屏和竖屏之间的切换具有下列特点。

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

（2）能够在旋转的同时，平滑地保证内容的过渡。

（3）内容好像是液态的，伴随屏幕保持方向。

图2-11为Android版本的高清地球旋转动态壁纸软件Earth HD Deluxe Edition。

图2-12为超级炫酷HTML5全屏3D地球旋转动效，网址：http://yanshi.sucaihuo.com/jquery/34/3410/demo/。

2.1.6 变形

变形动效是移动终端或网页的界面元素的形状改变动效，这种改变可以是交互的，也可以是非交互的。例如Android应用程序“天天P图”的疯狂变脸就是变形动效，如图2-13所示。一些网站的广告也采用变形动效，图2-14为脸部变形动效。

在进行数字倒计时，也经常采用变形动效，如图2-15所示。

2.1.7 变色

变色动效是应用程序界面元素的色彩变化动效，图2-16为文字变色动效。