缘起-UI动效十二原理
动画师 OllieJohnston 和 FrankThomas 在其 1981年首次发行的《TheIllusion of Life: Disney Animation》一书中引入了迪士尼动画的十二原则，它们总结了历史上迪士尼动画大师优秀作品的一些共性。
这些原则在许多相关领域都有所作用，例如与动画关联密切的UI领域。它们作为动画能够合理自然流畅播放的基础，极大程度上影响了后来种类繁多的UI动效设计。
而设计师Issara Willenskomer在迪士尼12动画原则的基础上进行进一步的提炼，使这些原则能更贴切地描述UI动效的设计规律。
00. 实时与非实时动画
| | |
这一点是后续十二条原则的基础，交互带来的动画效果有实时与非实时之分，其中非实时的动画在达成触发条件后会锁死其他的操作，直至动画播放完成；而实时动画效果可以在播放的任意进度中打断，平滑的过渡成为打断动作所带来的动画效果。
对于用户来说两者的区别是十分明显的，非实时动画播放时设备居于最高地位，用户的操作暂时被锁死，而实时动画播放时用户操作居于最高地位，即随时可打断，随时可操作。
苹果打开app时的可打断动画
- 缓动
缓动/非线性动画带来无比自然的体验，如今这是我们非常熟悉的一种效果。缓动效果应用于各种几乎所有动效中，即与其余的动画原则有大量重叠应用，此处不举例赘述。
02. 偏移和延迟
当新元素进入或旧元素退出时，通过一定的次序强调层级与重要性。即使没有层级之别，也可以通过错落的动效来防止重复元素显得单调
上图右侧是有偏易延迟效果的切换，这使界面更有层次感
正确地应用偏移与延迟动画能够有效地揭示界面层级与逻辑，而未经思索的动画设计往往会带来误导效果。
| | |
左图中三个按钮并没有重要性与层级之别，但是顺次出现的动画使画面更加有趣
，也强调了三个按钮的独立性，这是合乎界面逻辑的。
右图中每一行图标运动完全同步没有次序之分，这与他们独立的功能印象不符；下方的文字也按行分组同步运动，仿佛暗示着同行的文字是同一个物件，然而这也是反逻辑的；此外，文字与图标的不同步也使他们不相关，这样的逻辑会使用户感到困惑。
- 继承关系
通过运动的联系展示控件和控制对象的关系，常见于各种滑块的交互中。继承动画/随动将多个运动的物体联系起来。这使得设计师得以向用户传达对象之间的关系，控件与结果的关系等等逻辑。
顶部物体作为子对象，它的位置与缩放属性受到父对象——底部物体的位置属性影响
控件与被控制对象同步运动
控件与被控制对象反向运动，这构成了进度条的逻辑
04. 过渡
在不同的交互状态切换时展示顺滑的形变，在大部分情形下，形变应当是简洁的，不需要展现弹性，黏软特性等过多的维度。优秀的过渡动画使得原本割裂的界面状态变为无缝的，这更符合用户的期待，便于用户思维上的跟进。
05. 变量
| | |
数字与数字之间的过渡按照递增或递减顺序平滑变化，可以强调变化这一事实，数字变化前与变化后具有联系，这暗示着这是同一个元素在发生变化。而如果数字的变化不按照数字的递增递减顺序平滑变化，而是直接改变，则暗示着变化前后的是两个不同的，相互独立的元素。
这里的数字是直接改变的，这揭示了变化前后数据是独立，无关的
这里的数字按照递增递减规律变化，这揭示了它们描述的是同一个对象
06. 遮罩
遮罩为人所熟知，在UI动画中，遮罩可以限制显示内容的范围和形状，通过这些从而将同一个内容转变为不同的元素，在界面上承担起不同的作用。很多时候一个内容起到什么作用、作为什么元素正是由其所处的位置和边界决定的，好的遮罩动画正是利用了这一原理。
例如，通过遮罩的改变动画，使得唱片圆盘转化为歌曲封面
- 叠加
叠加动画使元素之间具有遮盖层级的立体动画效果。在UI动画中，单独的元素设计正在趋于扁平，而元素间的关系应当理解为拥有立体的层级。通过层级之间的遮盖与叠加，设计师可以最大化利用空间，将一些二级操作放在另一些界面下方，保持界面简洁的同时也可以提供清晰的操作逻辑。
常见于社交软件中的操作动画正是巧妙应用了叠加
08. 克隆
克隆的本质是让新元素的诞生源自于旧元素。当新的元素产生时，通过从界面上原有的元素上分离出新的形状来达到自然而不突兀的效果。分离出的新元素和旧元素之间将存在某种逻辑联系，比如展开，扩展等。通过克隆动画，交互界面上发生的事件被清晰地叙述了出来。
常见应用在智能手表上的克隆动画，展开应用菜单
09. 虚化
虚化动画通常表现为模糊化的蒙层，蒙层可以暂时遮住一部分界面，从而凸显主要的元素。这是一种比直接切换页面更“弱”的逻辑，被覆盖了模糊蒙层的部分并没有被切换而消失，而是与当前页面保持着一定的联系，从而使过渡更加自然。
例如在手机应用界面打开文件夹，并不需要彻底改变界面内容这种强逻辑，而应使用更为弱的切换方式——模糊化其他元素。文件夹中的内容和桌面内容并非完全独立的两个页面，而是同属于用户访问应用的界面，在展示文件夹内容时，仍应与其他桌面应用保持一定的联系。
苹果的应用文件夹打开动画
10. 视差
视差运动让设计更加完整丰富，在主要的运动内容之外增添了更完整的其他元素的运动。
例如在切换页面时，不但将新页面切入，同时也让旧页面做退出的视差运动，进一步将被覆盖的页面向后推离，强化了切换这一概念。
视差动画强化了切换效果，同时也使切换动画更加华丽
- 翻转
翻转是使交互元素本身具有丰富的三维特性的动画，具有维度的动画使得交互叙事非常真实且有趣，但在当今的设计趋势来看比较容易增加用户的视觉负担，一般在特殊的场景下使用。
常见的三维动画，通常表现为折叠与铰接等效果。
一个翻转形式的翻页动画，通常出现在早期的Android应用上
- 缩放
缩放也是十分常见的动画，对象的缩放可以理解为单纯的改变对象的大小，也可以理解为观察者镜头的移动，利用好这两点不同的，可以实现优秀的交互体验设计。
例如，利用缩放效果（时间数字），产生观察者镜头移动的错觉，使得应用界面看上去是在锁屏界面的“上方”明确了层级间关系。
苹果的锁屏界面使用了观察者镜头移动的缩放
利用缩放改变大小，平滑过渡从而展示范围更广的相册图片内容。
苹果的相册切换动画使用了改变对象大小的缩放