第1章 界面动画

1.1 界面动画起源

界面动画是伴随着图形用户界面的出现而产生的。1973年4月施乐公司帕洛阿尔托研究中心（The Xerox PARC）研发出了第一款使用图形界面操作系统的个人电脑Xerox Alto，它拥有一款分辨率为606像素×808像素的显示器，配备了一个键盘和一个有3个按键的鼠标，并首次将所有元素集中到了图形用户界面中，拥有所见即所得的文档编辑器，内置了大量字体和文字格式。同时施乐公司还开发了一种名为SmallTalk的程序语言和环境，用来构建自己的图形界面环境（包括弹出菜单、视窗、图标），如图1-1所示。

1981年6月，Xerox推出了Xerox Star操作系统，这是第一个完整地集成了桌面和应用程序及图形界面的操作系统，相比于Alto在硬件和分辨率上都做了升级并配备了两个按键的鼠标，拥有桌面软件，支持多语言，能够连接文件服务器和邮件服务器，如图1-2所示。

这款最早的操作系统与现在计算机的操作系统没有太大的区别，它包含了今天广泛使用的图标、弹出菜单、互相重叠的窗口、滚动条、对话框和单选按钮等元素。它用一个小图标代表一个程序或文档，只需轻点鼠标，便可以运行程序。窗口都包含在一个图形边框之中，以灰色图案为背景。每个窗口都有一个标题栏，只要在此处单击并按住鼠标左键，便可拖动当前窗口，使其在屏幕上随意移动。多个窗口也可以互相堆叠，被选中的窗口可以移动到堆叠窗口的最上方。从中也可以看到一些早期基本的界面动画的影子，如移动鼠标控制鼠标箭头在屏幕上移动的动画，拖动窗口在屏幕上移动的动画，滚动条控制内容滚动的动画等。

施乐公司虽然研发了图形界面操作系统，但是并未将其商业化。史蒂夫·乔布斯在参观了Xerox Alto之后异常兴奋，还忍不住大声疾呼：“你们为什么没有利用它做些什么事情，这是一个伟大的东西，这是一次革命！”回到公司后，他便立即要求Lisa项目组对Alto的图形交互界面进行研究，抓紧开发出了更健全的系统。这个系统不仅拥有了SmallTalk的图形界面环境，还增加了下拉菜单、桌面拖曳、工具条、苹果系统菜单和先进的复制粘贴功能。于是在1983年1月苹果公司发布了个人电脑Lisa，如图1-3所示。

1984年苹果公司乘胜追击，发布了Lisa计算机的升级产品Macintosh，如图1-4所示。Macintosh在为苹果公司创造了巨额的利润的同时，也确立了其图形界面操作系统的统治地位。鼠标走进了千家万户，成为个人计算机的标配。Macintosh已经具备了现代操作系统的一些特点，文件和文件夹都可以被拖曳到桌面上，文件或文件夹以图标的方式展现，并可以根据文件大小、名字、类型和日期来排序，也可以被重命名，窗口可以被最小化或关闭。同时界面动画也进一步丰富起来，如双击一个图标打开窗口时会伴随着窗口的缩放效果动画；在安装程序时鼠标会变成一个小手的形状，手指头会一一张开再一一合上，做一个不断循环的等待动画，如图1-5所示。

随着计算机相关技术的进一步发展，图形界面上的内容越来越丰富。除了图形和文字之外，视频、动画、可交互媒体逐渐增多，这时大家才慢慢意识到界面动画并不完善，很多界面变化的细节是缺失的。例如，在Windows系统中双击某个图标打开窗口的操作，从图标到窗口的过度动画缺失了，用户第一次接触这样的操作会感到疑惑，需要一段时间的适应，如图1-6所示。现在Windows系统的窗口打开操作虽然添加了动画，但依然缺乏方向性。

2007年1月9日苹果公司发布了第一代iPhone手机，如图1-7所示，这款手机取消了物理键盘，改用触摸、滑动和手势来操作手机，让人机交互变得优雅简洁，丰富的软件体验让智能手机变得真正“智能”起来。这款手机彻底改变了移动终端设备的格局，引领了触屏手机的发展。同时在这款手机中也可以看到很多精致而流畅的动画效果，界面动画已经很丰富和体系化了。例如，解锁按钮的扫光动画，如图1-8所示；音乐封面滚动动画（Cover Flow），如图1-9所示；音乐列表、联系人列表、邮件列表的滚动动画（列表滚动到顶部时还有回弹的效果），如图1-10所示，以及页面或专辑封面左右移动切换、3D翻转切换动画，进入应用和返回桌面的动画等。

2014年谷歌在开发者大会上隆重推出了界面设计规范（Material Design），如图1-11所示。其中对界面动画部分的内容做了详细的规范，并将动画部分的内容称为“Motion”，中文一般翻译为“动态”。

这里的“Motion”一词来源于1960年美国著名动画师约翰·惠特尼（John Whitney）创立的一家名为“Motion Graphics”的公司。术语“Motion Graphics”，通常翻译为动态图形或动态影像，它是平面设计和动画结合的产物，是基于单一时间流动而设计的一种视觉表现形式，在视觉表现上遵循平面设计原则，在技术上基于动画的原理和制作手段来实现。它的主要应用领域集中在节目频道包装、电影电视片头、商业广告、MV、现场舞台屏幕等。这种动态图形的设计一般称为“Motion Design”或“Motion Graphic Design”。

很显然，界面动画的起源与动态图形不同，要解决的问题也不同。界面动画是图形用户界面的一部分，是图形用户界面上元素的动画。不同于传统动画或MG动画那样基于单一时间线的表达方式，界面动画是基于用户的操作而产生的。它的目的是帮助界面更好地向用户传达信息，能够在用户操作界面时提供合理预期和恰到好处的反馈或者标识出系统当前的状态、辅助用户进行界面操作等。