1.2 界面动画与传统动画

界面动画是一个全新的领域，它不同于以往任何一种动画形式，它是界面设计、传统动画、视觉特效等领域的一个交叉学科。传统动画的媒介作用在界面动画中的体现尤为明显。传统动画历史久远，已经发展出一套完整的体系来表现图形符号的变化。动画原理、运动规律、创作表现手法及创造性的分解与重构运动形态的思想对界面动画、MG动画和特效的创作都有重要的借鉴和指导意义。例如，谷歌在规范中对非对称性形变动画的描述：“一个矩形在放大过程中，宽与高的变化并不同步进行，这样能够使动画更具有细节”。显然这样的过程就是对现实世界运动过程的创造性还原和分解，用简单的方式实现了一个形变的效果，如图1-12所示。

图1-12

在最新的Material Design中也正式引入的“Strech”（拉伸）概念，用拉伸动画来表示界面中高速运动的元素。如图1-13所示，小球从a点移动到c点的过程中会处于拉伸状态。了解动画运动规律的读者会比较熟悉，这是传统动画中常用的“挤压与拉伸”原则。当物体受到力的作用时会产生一定程度的变形，挤压表现为物体形状的压缩，拉伸表现为物体形状的伸长。挤压和拉伸可用于表现物体的速度、动量、重量和体积，使物体看起来有弹性、有质量。

图1-13

在传统动画中，经常见到角色或道具发生挤压与拉伸的形变，如图1-14所示。形变动画特别能体现动画的精髓。毕竟在纸上或屏幕上去表现物体的动态与现实不同，如果只是机械地模仿和还原客观事物的运动形态会让动画变得僵硬、枯燥、缺乏表现力。所以传统动画强调创造性地分解和还原客观事物的运动形态，在动画过程中加入作者的主观动机，挑选重要的瞬间加以适度的夸张和强调，才能够更好地表现受力物体的重量、质感和运动状态。同样，在界面动画中适当加入形变元素，能让界面摆脱机械和僵硬，变得生动，令人印象深刻。图1-15所示为Mac系统窗口最小化动画，图1-16所示为QQ下拉刷新动画。

图1-14

图1-15

图1-16

Material Design也将角色动画引入界面动画中，角色动画的制作更需要对动画运动规律的理解和掌握。传统动画中还有很多原理和技巧可以被借鉴到界面动画中，如预备动作、跟随和重叠动作、次要动作，镜头与景别的用法等。传统动画的重要性正在逐渐显现出来。

然而，很多时候动画基础知识对界面动画的重要性是被忽视的。虽然界面动画产生自产品的需求，但对于动画本身的实现、动画细节的处理、节奏感的控制、关键帧的调整等都需要一定的动画基础。如果对动画运动规律和表现手法一无所知，仅凭想象去做，就会导致动画很奇怪。所以UI设计师、个体开发者、产品经理想要了解界面动画，一定要对动画基础知识也有所了解。另外，作为一个新行业，很多企业、公司或个体开发者对界面动画本身不够重视，导致系统、应用、游戏界面动画体验较差。

文中为何没有使用“动效”而使用了“界面动画”一词？虽然“动效”这个词对读者来说会比较熟悉，但是它的含义并不准确。游戏特效的制作人员也将他们的工作称之为“动效”，电影拟声的工作也叫“动效”。在网上搜索“动效”这个词，只有一个相近的词条就是“电影动效”。所以“动效”一词只是一种口头说法，而“界面动画”的描述就比较准确，指用户界面上元素的动态，所以本书中会统一使用“界面动画”一词。