我们花了很多时间来改进数字体验，而之后才进行构建动画。实际上，很多设计师没有动效设计的经验，我们很多动效的设计都依靠“感觉正确”。但这种“感觉正确”是必须因为它是自然的，是依照真实世界的运动规律进行的。
另一方面，我们倾向于没有经过太多的思考就在产品中添加动效，主要是因为它看起来不错，我们自欺欺人地相信这会增加价值。这确实会是我们的客户记忆深刻，但是这些动效真的增强了产品的功能吗？
那么我们怎样才能将这种感觉转化为有意义的方式并将其卖给我们的客户？我们如何确保我们的动画能够增加用户体验？
答案是通过科学和原则。
什么是动画
动画是一种方法，在这种方法中，各个图像被组合起来，使它们看起来好像是一个平滑的单独的运动。我们今天看到的每一个动画片段都包含多个图像（或多个状态下的单个图像），揉在一起混淆人眼。
一秒钟动画内的帧数称为帧速率或每秒帧数（FPS）。人眼需要至少24帧才能将动画视为流体运动。
在网页中，举个例子，CSS动画的帧速率很大程度上取决于浏览器和计算机的速度。如果您的计算机速度很慢，您可能会看到动画卡顿或滞后，这通常表明帧速率已降至24 FPS以下（并且是时候购买新的iMac）
游戏是另一个很好的例子;当你的电脑无法以24 FPS的速度运行游戏时，游戏会出现滞后现象 -- 尽管大多数游戏玩家会坚持认为60 FPS以下的任何东西都是滞后的。
基础物理
时间和起搏
时间是对象移动所需的时间或帧数。如果球需要5秒钟才能落到地面，其动画时间将为120帧（5 x 24 FPS）。
时间在创建逼真的动画方面起着巨大的作用，每个真实世界的对象都需要一定的时间来执行操作。虽然没有必要计算应用程序中按钮动画所需的帧数;但它可以是一个有用的工具，用于确定该按钮应该设置多长时间。
另一方面，起搏是指运动发生的速度。如果您的动画太慢，您可能会让用户厌烦或导致困惑。如果它们太快，您的用户可能会忘记他们的位置或他们正在做的事情。
适当的转换速度可帮助用户跟踪界面变化，而不会使任务复杂化。应该使用可能的最短持续时间，而不是突然的或者是不和谐的。
-- Google Material Design
大小和量感
正如我们所知，大多数的在真实世界中的物体都是有大小和质量的，这些尺寸为物体提供了所谓的重心，这会影响它的移动和旋转方式。
组件也具有大小和重量，而这又用于确定例如层次结构。与现实世界类似，我们的天然目标是使用组件的中心作为其重心。这既实用又实际。并且重心也可能随着尺寸的变化而变化。
重力
重力是一种自然发生的力，它相互作用于物体之间。它作用于我们身上，同时也作用于潮汐大海。这很神秘，所以除了它对物体的运动产生巨大影响之外，我不会假装告诉你们我知道更多的东西。
在我看来，在我们的设备上，存在两个方向的牵引力。— 首先，从上到下有一个Y轴的牵引力，其次，是作用在Z轴上的力。谷歌非常早就意识到，我们的设备有一个深度，并且建立了material design，在elevation上有他们的规范。
以类似的方式，我想知道我们东西下落的趋势是否是我们对Y轴引力的解释。下拉，复选框， - 所有这些组件都在我们的应用程序的底层动画。
阻力
这是我们每天都要经历的事情（比如你不愿下床），这是自然界中物体在空间和时间中移动时产生的力量的结果。阻力可能是重力，表面或张力的结果。
阻力经常用于体验设计中。一个很好的例子是Apple的3D touch（RIP），在你按压的足够用力时才弹出。然后通过动画演示此阻力，图标会根据您施加的压力或多或少地突出显示。
下拉刷新，用户需要下界面能显示出最新的信息，这是另一个非常棒的例子。用户必须向下拉，有一些阻力（这里是否涉及它们的反重力？），直到达到某个阈值，重新加载页面。
点击和反馈
每个物体在其直线上保持其静止状态或均匀运动，除非它被强迫通过施加在其上的力来改变该状态。
- Sir Isaac Newton
令人惊讶的是牛顿法则适用于交互和动画。当你点击一个按钮；你期望有一个反馈。
牛顿第三定律和界面中的动画尤其相关。接口本质上是反应性的 - 甚至这个库叫做React。当涉及到数据，大小，颜色，背景等的变化时尤其如此。这里动画的作用是创建必要的视觉提示，让用户知道他们在哪里以及他们在做什么。当用户点击下载图像时，期望看到进度，失败或成功的一些指示。
动画的12原则
1981年，两位迪士尼动画师奥利约翰斯顿和弗兰克托马斯提出所有动画都包含十二个基本原则。这些原则遵循前面提到的物理定律，并作为创造现实运动的指导。
1.压缩与伸展
一个自然物体是有延展性的— 他们的形变取决于他们的互相影响。它们的展开和收起的结果取决于他们的组成。
物体受到力的挤压，产生拉长或者压扁的变形状况，再加上夸张的表现方式，使得物体本身看起来有弹性、有质量、富有生命力，因此较容易产生戏剧性
相似的，我们的界面中的元素当它们互相影响的时候也可以压缩与伸展，同时组建的重量和中心是不会改变的，而只是移位。
拖拽也是一个有用的办法让你的下拉操作更有意思
2.预备动作
我们可以用小动画效果来给用户创造一个预期效果，悬浮效果是一个很好的例子，给用户起到了一个非常好的视觉引导的作用
3.布局
在动画中的构图、运镜、动作、走位都需要仔细的设计安排，避免在同一时间又过多琐碎的动作与变化。最重要的还是精心设计好每一个镜头与动作，经过设计之后，不仅可让动画整体更好，也可以省去许多不必要的成本浪费。
一个常见的例子就是loding icon,它不仅仅解决了技术问题，也让用户知道了这个页面正在加载。
原型框架加载，是加载的另一种形式，被认为是一种更好的加载体验。先给用户加载内容框架，之后再在框架中填入内容
4.续运动与姿态对应
连续动作和姿态对应是两种动作动画的技巧，连续动作是将动作从第一张开始，依照顺序画到最后一张，通常是制作较简易的动态。
姿势对应，将动作拆解成一些重要的定格动作。补上中间的间补动画后，产生动态的效果，通常适用于较复杂的动作。
5.跟随与重叠动作
真实世界的很多物体是由很多个可以运动的部分组成，汽车，人，动物，植物，都是很好的例子。
这些个部分因他们的大小质量不同，收到重力的影响也不同，因此，同一个物体的不同的部位，因大小和质量的不同，运动的速度和角度也会有所不同。同时它们也可能会受到不同程度的阻力的影响，因为它们的大小同等因素，会使他们做加速运动或者减速运动。
相似的，界面的组建也是由很多部分做成，可以是段落、颜色、形状或间隔。如果你要对界面中的很多元素都设置动画的话，要考虑到他们的大小和重量，以及他们彼此之间的关系。界面中的组件也是像刚才说的一样，但是一些微小的速度上和加速度上的不同会给用户体验带来极大的提升。
可能最常见的跟随动画就是“古老”的视差动画
6.缓入缓出
生活中的物体很少会立即停止 ， 它们往往会逐渐失去动力并减速。
很多设计师和开发者已经在他们的动画中实现了缓动。但是是否有的时候会用力过猛？随意的运动曲线非常容易制作但是这么做会让用户觉得不舒适。有很多动效的资源可以供我们参考，我最喜欢的一个网站是 Animista.
7.曲线
自然事物中很少会有按照直线运动的，很简单，因为没有一个人会沿着直线扔出一个球。自然物体在在运动时总会按照曲线运动。曲线本质上是弯曲的路径，如你在扔一个球的时候它经过的路径。
8.次级动效
次级动效是发生在主要动效中的动效。这些动效通常用来支持主要动效。来自现实中的例子是自行车在运动的同时，它的两个轮子也要发生运动。
次级动效是一个很不错的效果，可以在用户点击时吸引他们更多的注意力。在按钮中的图标是一个很好的例子
9.时间节奏
我们已经从物理学的角度研究了时间，但还有另外一个更直观的应用。时间也可以指多个动画如何按顺序播放。
谷歌在它的界面编排上有自己的规范choreography.
组件动画的顺序是引导用户完成体验旅程的好方法。即使在微观尺度上，我们的眼睛也会对运动做出反应
10.夸张性
夸张性使得动画设计者更有创造力。物体的大小，形状和运动状态的夸张的超写实处理，会给动画增加趣味性。
11&12 .扎实的绘画&吸引力
这两个很简单，指的是你的组件或体验对用户的吸引力。这归结于良好的设计，良好的用户界面，出色的体验和精致的动画。
总结
这些原则帮着迪斯尼创造力无数个催人泪下的动画效果，原因是这些原则发挥了很大的用途。
我们该如何复刻迪士尼动画的成功的方法在我们自己的项目上，使得这些动画对于用户来说更有意义？如果我们大多数人都已经这样做了，今后动画的演变又会是什么样的呢？
