一．动画的基础原理

首先游戏 UI 的动效遵循动画设计的12条原理。这12条是由迪士尼动画师总结而出的。

12条动画原理分别是：

1. Squash and stretch 挤压与拉伸
2. Anticipation 预备动作
3. Staging 表演及呈像方式，舞台化
4. Straight Ahead Action and Pose to Pose 连贯动作法与关键动作法
5. Follow Through and Overlapping Action 跟随动作与重叠动作
6. Slow In and Slow Out 渐快与渐慢
7. Arcs 弧形运动轨迹
8. Secondary Action 附属动作，次要动作　　
9. Timing 时间控制　　
10. Exaggeration 夸张
11. Solid Drawing (same or different as Weight) 纯熟的手绘技巧　　
12. Appeal 吸引力

虽然12条原理最初是针对角色动画的，但也能运用于任何 UI 动效设计中。

而在这12条原理中，1、2、5、6、9、12是游戏 UI 动效的共性。剩下的5条则是根据需求不同而表现。

游戏 UI 动效的基本属性为图形变化和运动变化。

图形变化是指界面形态的改变，比如缩放、扭曲、旋转、分裂等；

运动变化是指界面位置与速率的改变。比如平移，加速，减速等。

以下是对于几种常见元素的演示 GIF，为了突出特点，所以我制作的动态较为夸张，在我们实际运用中请根据实际情况斟酌。以下红字部分为原作者解释。

1. Squash and stretch 挤压与拉伸

以特体形状的变形，强调瞬间的物理现角。

挤压拉伸在卷轴、科幻界面的运用尤为常见，挤压也经常运用于界面的关闭效果。

2.Anticipation 预备动作

加入一反向的动作以加强正向动作的张力,借以表示下一个将要发生的动作

其实预备动作最常用在按钮触摸后的反馈效果。

5.Follow Through and Overlapping Action 跟随动作与重叠动作

“没有任何一种物体会突然停止，物体的运动是一个部分接着一个部分的” ，这是 Walt Disney 当初对于运动物体的诠释，之后动画师将这样的理论以跟随动作或重叠动作来称呼，我们能够用另一种更科学的方式来描述这个原理，就是“动者恒动”。

界面的一个回弹效果可以让界面更有“灵性”与“动感”。

6.Slow In and Slow Out 渐快与渐慢

任何物体自静止开始动作，是渐快的加速运动，从运动状态到静止状态，则是呈渐慢的减速运动。

图中左为渐快，右渐慢。渐快与渐慢能使界面的运动更加具视觉冲击力，使界面被赋予灵魂。

9.Timing 时间控制

一段动作发生所需的时间，这是掌控动画节奏的最基本观念。

二．个性化设计

我们常见的 UI 都是界面弹出式的，所有信息都通过独立界面加文字的形式来传达。而有些游戏的 UI，则进行了很大创新。

比如 Land Sliders 这款游戏，部分按钮居然与游戏结合了起来，如果你想要进行抽奖得将人物移动到指定的抽奖位置，就连分享按钮都需要移动人物。如果你想要进行游戏关卡，需要将人物移动到“Start”按钮上才行，而进行下一关，同样的操作后，会迎来一段有趣的动画转场效果，地面的按钮会拔地而起，像火箭一样冲上天空，然后在地球上空显示关卡数，最后降落到下一关的初始位置。这样的无缝衔接，巧妙的将 UI 按钮融入到了游戏环境中，使得游戏变得更加“自然”，有趣的转场动画更是画龙点睛之笔。

不过说到个性化设计，我不得不说下辐射系列。从辐射3起，游戏的道具、技能、地图等操作界面就在主角手腕上的“BB 小子”机器里面完美的体现了出来。每当玩家打开道具等界面时，游戏的角色都会抬起手腕，做出打开 BB 小子的样子，游戏的一切信息都包含在了 BB 小子里，作为主角赖以生存的关键工具，其重要性不言而喻。而“打开 BB 小子”这样一个动效设计或者说是动作设计，则让玩家意识到，自己不仅仅打开的是一个普通的 UI 界面，也是玩家操控的人物自己手动打开的界面。通过这样的方式，消除了玩家与 UI 之间的“隔阂”，加强了玩家在游戏中的代入感。而 BB 小子中，有趣的动画设计也让 UI 界面变得生动活波，比如天赋界面，每一项天赋的旁边都有对应的小人物动画，极具幽默的表现力，让“天赋技能”不再是简单的文本描述。

三．优秀的动效设计

1.雷亚游戏的《兰空 VOEZ》其 UI 与动效是我见过设计的最别出心裁的，因为是音游，由其独特的 UI 设计风格，也大大增加了动效的表现空间。

2. King 的《Blossom Blast Saga（绽放花朵传奇）》是我挺早接触的一款消除类游戏，虽然现在看来其动效设计（UI/UX Motion Design）没有什么突出的特点。但是在当时对我在 UI 动效的认识上影响很大。

3.最近出的一款独立游戏《Frostpunk（冰汽时代）》是波兰的游戏公司11 Bit Studios 的新作，由于最近在玩这款游戏，所以很自然的想到了。其 UI 虽然是弹窗式，但是界面居然是动态水墨风格！这种复杂的弹窗式 UI 也是非常少见的案列了。

4.《VA-11 HALL-A》中开场主角 Jill 的手机居然也是操作界面，既能存档，又能切歌，还能看新闻消息。

结语

其实写这篇日志只是想让各开发者多关注下 UI 动效这方面，给界面加个带有曲线速率的弹出效果应该是很简单的事吧。这也能带给玩家更好的体验。因为很多开发者在制作游戏时，往往会忽视一些细节，UI 动效就是容易被忽视的部分，但也是容易填补的部分。不过 UI 的动效并不是游戏的核心部分，所以也不要盲目追求细节效果。前面也有说，UI 动效只是提升游戏 ‘品质感’的一种方式。游戏的本质还是在于内容及核心玩法。

最后再附带一张曲线图：