您需要 登录 才可以下载或查看，没有账号？注册
x
一．动画的基础原理
首先游戏 UI 的动效遵循动画设计的12条原理。这12条是由迪士尼动画师总结而出的。
12条动画原理分别是：
- Squash and stretch 挤压与拉伸
- Anticipation 预备动作
- Staging 表演及呈像方式，舞台化
- Straight Ahead Action and Pose to Pose 连贯动作法与关键动作法
- Follow Through and Overlapping Action 跟随动作与重叠动作
- Slow In and Slow Out 渐快与渐慢
- Arcs 弧形运动轨迹
- Secondary Action 附属动作，次要动作
- Timing 时间控制
- Exaggeration 夸张
- Solid Drawing (same or different as Weight) 纯熟的手绘技巧
- 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 动效只是提升游戏 ‘品质感’的一种方式。游戏的本质还是在于内容及核心玩法。
最后再附带一张曲线图：
|
显示全部 11
