Nowadays it’s hard to impress or even surprise with an interface animation. It shows interactions between screens, explains how to use the application or simply directs a user’s attention. While exploring the articles about animation, I found out that almost all of them describe only specific use cases or general facts about animation, but I haven’t come across any article where all rules concerning animation of interfaces would be clearly and practically described. Well, in this article I won’t write anything new, I just want to collect all the main principles & rules in one place, so that other designers who want to start animating interfaces don’t have to search for additional information.
如今，要用界面动画给人留下深刻印象甚至惊喜已经很困难了。它展示了屏幕之间的交互，解释了如何使用应用程序，或者仅仅引导用户的注意力。在探索关于动画的文章时，我发现几乎所有的文章都只描述了具体的使用案例或关于动画的一般事实，但我没有找到任何一篇文章明确而实用地描述了界面动画的所有规则。好吧，在这篇文章中，我不会写任何新的东西，我只想把所有的主要原则和规则集中在一起，这样其他想要开始制作界面动画的设计师就不必再去搜索额外的信息了。
Duration and speed of the animation
动画的持续时间和速度
When elements change their state or position, the duration of the animation should be slow enough to give users the possibility to notice the change, but at the same time quick enough not to cause waiting.
当元素改变其状态或位置时，动画的持续时间应该足够慢，以便让用户有足够的时间注意到变化，但同时又足够快，不会引起等待。
Use proper duration in your animation. Don’t make it too fast and don’t leave the user enough time to yawn
在你的动画中使用适当的持续时间。不要让它过快，也不要让用户有足够的时间打哈欠。
Numerous researches have discovered that optimal speed for interface animation is between 200 and 500 ms. These figures are based on the particular qualities of the human brain. Any animation shorter than 100 ms is instantaneous and won’t be recognized at all. Whereas the animation longer than 1 second would convey a sense of delay and thus be boring for the user.
Duration of the animation you should better have in your interfaces
你在界面中最好拥有动画的持续时间
On the mobile devices, Material Design Guidelines also suggests limiting the duration of animation to 200–300 ms. As for tablets, the duration should be longer by 30% — around 400–450 ms. The reason is simple: the size of the screen is bigger so objects overcome the longer path when they change position. On wearables, the duration should be accordingly 30% shorter — around 150–200 ms, because on a smaller screen the distance to travel is shorter.
在移动设备上，Material Design指南还建议将动画的持续时间限制在200-300毫秒之间。至于平板电脑，持续时间应该比这个长30%左右，大约在400-450毫秒之间。原因很简单：屏幕尺寸较大，因此当对象改变位置时，它们需要经过更长的路径。在可穿戴设备上，持续时间应该相应地缩短30%左右，大约在150-200毫秒之间，因为在较小的屏幕上需要移动的距离较短。
Size of mobile devices affects the duration of the animation
移动设备的尺寸会影响动画的持续时间
Web animation is treated in a different way. Since we are accustomed to an almost instant opening of web-pages in a browser, we expect to transit between different states quickly as well. So, the duration of web transitions should last about 2 times shorter than on mobile devices — between 150–200 ms. In other cases, the user will inevitably think that the computer freezes or has troubles with the internet connection.
网络动画的处理方式不同。由于我们习惯了在浏览器中几乎瞬间打开网页，我们也希望在不同状态之间快速切换。因此，网络过渡的持续时间应该比移动设备短大约2倍，大约在150-200毫秒之间。否则，用户不可避免地会认为计算机冻结或者网络连接出现问题。
But. Forget about these rules if you are creating a decorative animation on your website or trying to attract the user’s attention to certain elements. In these cases, animation can be longer.
但是，如果你正在为你的网站创建装饰性动画或者试图吸引用户对特定元素的注意，那就忘记这些规则吧。在这些情况下，动画可以更长。
Large screen of computer = Slow animation? No way!
电脑的大屏幕 = 动画慢？不可能！
You need to remember that regardless of the platform the duration of the animation should depend not only on the traveled distance but also on the size of the object. Smaller elements or animation with small changes should move faster. Accordingly, the animation with large and complex elements looks better when it lasts a little longer.
你需要记住，无论是哪个平台，动画的持续时间不仅取决于移动的距离，还取决于物体的大小。较小的元素或具有小变化的动画应该移动得更快。相应地，具有大型和复杂元素的动画在持续时间稍长时效果更好。
Among the moving objects of the same size, the first one to stop is the object that has passed the shortest distance.
在相同大小的移动物体中，首先停下来的是已经通过最短距离的物体。
Small objects in comparison with large objects are moving slower since they make bigger offsets.
小物体与大物体相比，由于它们产生更大的偏移量，所以移动得更慢。
Duration of the animation differs depending on the size of the object and the traveled distance
动画的持续时间取决于物体的大小和移动的距离
When objects collide, the energy of collision must be evenly distributed between them according to physical laws. So, it’s better to exclude the bounce effect. Use it only in exceptional cases when it makes sense.
当物体碰撞时，根据物理定律，碰撞的能量必须均匀分配给它们。因此，在排除反弹效应时更好。只在特殊情况下使用，当有意义时才使用。
Avoid using the bouncing effect since it distracts attention
避免使用弹跳效果，因为它会分散注意力
The movement of the objects should be clear and sharp so do not use motion blur (yes, After Effects users, not this time). It is difficult to reproduce the effect even on modern mobile devices and it’s not used in interface animation at all.
物体的运动应该清晰而锐利，所以不要使用动态模糊（是的，After Effects用户，这次不行）。即使在现代移动设备上也很难复制这种效果，而且在界面动画中根本不使用。
Do not use the blur effect in your animation
在你的动画中不要使用模糊效果
List items (news cards, email lists, etc) should have a very short delay between its appearance. Each occurrence of the new element should last from 20 to 25 ms. The slower emergence of elements may annoy the user.
列表项（新闻卡片、电子邮件列表等）在出现时应该有非常短的延迟。每个新元素的出现时间应该持续20至25毫秒。元素出现得太慢可能会让用户感到烦恼。
Animation for list items should last 20–25 ms
列表项的动画应该持续20-25毫秒
Easing 缓解
Easing helps to make the movement of the object more natural. It’s one of the essential principles of the animation, which is thoroughly described in the book The Illusion of Life: Disney Animation, written by two key Disney animators — Ollie Johnston and Frank Thomas.
缓动有助于使物体的运动更加自然。这是动画的基本原则之一，在《生活的幻觉：迪士尼动画》这本书中得到了两位关键的迪士尼动画师奥利·约翰斯顿和弗兰克·托马斯的详细描述。
For the animation not to look mechanical and artificial, the object should move with some acceleration or deceleration — just like all live objects in the physical world.
为了使动画看起来不机械和不真实，物体应该以一定的加速度或减速度移动，就像现实世界中的所有活动物体一样。
Animation with easing looks more natural compared to the linear one
使用缓动效果的动画看起来比线性动画更加自然
Linear motion 直线运动
Objects that are not affected by any physical force move linearly, in other words with constant speed. And just because of this fact they look very unnatural and artificial for the human eye.
不受任何物理力影响的物体会直线运动，换句话说就是以恒定的速度移动。正因为这个事实，它们在人眼中显得非常不自然和人为。
All applications for animation use the animation curves. I will try to explain how to read them and what they mean. The curve shows how the position of the object
(y axis) changes during the same time intervals (x axis). In the current case, the movement is linear, so the object travels the same distance at the same time.所有动画应用程序都使用动画曲线。我将尝试解释如何阅读它们以及它们的含义。曲线显示了物体在相同时间间隔内的位置变化。在当前情况下，运动是线性的，因此物体在相同的时间内行进相同的距离。
The curve of linear motion
线性运动的曲线
Linear motion can, for example, be used only when the object changes its color or transparency. Generally speaking, we can use it for the states when an object does not change its position.
线性运动可以在物体改变颜色或透明度时使用。一般来说，我们可以在物体不改变位置的状态下使用它。
*Ease-in or acceleration curve
缓入或加速曲线**
We can see on the curve that at the beginning the position of the object changes slowly and the speed increases gradually. That means the object is moving with a certain acceleration.
我们可以从曲线上看出，物体的位置在开始时变化缓慢，速度逐渐增加。这意味着物体正在以一定的加速度运动。
Acceleration curve 加速曲线
This curve should be used when the objects fly out of the screen at full speed. Those can be system notifications or just cards of the interface. But keep in mind that such type of curve should only be used when the objects leave the screen forever and we cannot recall or return them.
当物体以全速飞出屏幕时，应使用这条曲线。这些物体可以是系统通知，也可以是界面上的卡片。但请记住，只有当物体永远离开屏幕且无法召回或返回时，才应使用这种类型的曲线。
Acceleration curve for throwing the card out of the screen
将卡片从屏幕上抛出的加速曲线
The animation curve helps to express the right mood. At the example below, we can see that the duration of movement and the distance for all objects is the same, but even small changes in the curve give you the possibility to influence the mood of animation.
动画曲线有助于表达正确的情绪。在下面的示例中，我们可以看到所有对象的移动持续时间和距离是相同的，但是即使是曲线上的微小变化也能让您影响动画的情绪。
And of course, by changing the curves, you can move the object as similar to the real world as possible.
当然，通过改变曲线，你可以尽可能地使物体移动得更接近真实世界。
Same duration and distance but different moods
相同的时间和距离，但心情不同
*Ease-out or deceleration curve
缓出或减速曲线**
It’s opposite to ease-in curve, so the object quickly covers long distance then slowly reduces the speed till it finally stops.
这与缓慢启动曲线相反，物体迅速覆盖长距离，然后慢慢减速直至最终停止。
Deceleration curve 减速曲线
This type of curve should be used when the element emerges on the screen — it flies up on the screen at full speed, gradually slows down until it completely stops. This can also be applied to different cards or objects that appear from the outside of the screen.
当元素出现在屏幕上时，应使用这种类型的曲线——它以全速飞入屏幕，逐渐减速直至完全停止。这也适用于从屏幕外部出现的不同卡片或物体。
Deceleration curve for a nice show-up
一个漂亮的展示的减速曲线
*Ease-in-out or standard curve
缓入缓出或标准曲线**
This curve makes the objects gain speed at the beginning and then slowly drop it back to zero. That type of movement is the most frequently used in interface animation. Whenever you doubt what type of motion to use in your animation, use standard curve.
这条曲线使物体在开始时加速，然后缓慢地减速至零。这种运动方式在界面动画中最常用。每当你对动画中使用何种运动方式感到困惑时，请使用标准曲线。
Standard curve 标准曲线
According to Material Design Guidelines, it is better to use an asymmetric curve to make the movement look more natural and realistic. The end of the curve must be more emphasized than its beginning, so that the duration of acceleration is shorter than that of slowing down. In this case, the user will pay more attention to the final movement of the element and thus to its new state.
根据Material Design指南，使用非对称曲线可以使动作看起来更自然、更逼真。曲线的末端必须比起始点更加突出，以使加速的持续时间短于减速的持续时间。在这种情况下，用户将更加关注元素的最终动作，从而关注其新状态。
See the difference between symmetric and asymmetric standard curve
观察对称和非对称标准曲线之间的差异
Ease-in-out is used when the objects move from one part of the screen to another. In such case, animation avoids the eye-catching and dramatic effect.
当对象从屏幕的一部分移动到另一部分时，使用缓入缓出效果。在这种情况下，动画避免了引人注目和戏剧性的效果。
The movement of the card on the screen and the corresponding asymmetric curve
屏幕上卡片的移动和相应的非对称曲线
The same movement type should be used when the element disappears from the screen but the user can return it to the previous place at any time. It concerns the navigation drawer, among others.
当元素从屏幕上消失但用户可以随时将其返回到先前位置时，应使用相同的移动类型。这涉及到导航抽屉等。
The navigation drawer hides from the screen with the standard curve
导航抽屉以标准曲线从屏幕上隐藏
From these examples follows a fundamental rule that many beginners neglect — the beginning animation is not equal to the ending animation. As in the case with the navigation drawer — it appears with deceleration curve and disappears with the standard curve. Besides, according to Google Material Design, the time of the object’s emergence should be longer to attract more attention.
从这些例子中可以得出一个基本规则，许多初学者忽视了这一点——开始的动画不等于结束的动画。就像导航抽屉一样——它以减速曲线出现，以标准曲线消失。此外，根据谷歌材料设计，物体出现的时间应该更长，以吸引更多的注意力。
The appearance and disappearance of the side menu is fulfilled with deceleration and standard curve correspondently
侧边菜单的出现和消失都采用了减速和标准曲线的方式实现
A function
cubic-bezier() is used to describe the curves. It’s called cubic because it’s based on four points. The first point with coordinates 0;0 (bottom left), and the last one with coordinates 1;1 (top right) are already defined on the graph.一个函数
cubic-bezier() 用于描述曲线。它被称为三次函数，因为它基于四个点。图表上已经定义了具有坐标 0;0 （左下角）的第一个点和具有坐标 1;1 （右上角）的最后一个点。Based on that we need to describe only two points on the graph, which are given by four arguments of the function
cubic-bezier(): the first two are the coordinates x and y of the first point, the second two are the coordinates x and y of the second point.根据我们需要在图表上描述的只有两个点，这两个点由函数
cubic-bezier() 的四个参数给出：前两个参数是第一个点的坐标 x 和 y ，后两个参数是第二个点的坐标 x 和 y 。To simplify your work with curves I suggest using sites easings.net and cubic-bezier.com. The first one contains the list of the most frequently used curves, parameters of which you can copy to your prototyping tool. The second source gives you a possibility to play with different parameters of the curve and immediately see how the objects will move.
为了简化您在曲线上的工作，我建议使用easings.net和cubic-bezier.com这两个网站。第一个网站包含了最常用的曲线列表，您可以将其参数复制到您的原型工具中。第二个网站可以让您尝试不同的曲线参数，并立即看到物体的移动效果。
Different types of curves and their parameters for the function cubic-bezier ()
不同类型的曲线及其函数cubic-bezier()的参数
*Choreography in interfaces animation
界面动画中的编排**
Just like in ballet choreography, the main idea is to guide the user’s attention in one fluid direction during the transition from one state to another.
就像芭蕾舞编舞一样，主要的思路是在从一个状态过渡到另一个状态时，以流畅的方式引导用户的注意力。
There are two types of choreography — equal and subordinate interaction.
有两种类型的编舞——平等互动和从属互动。
Equal interaction 平等互动
Equal interaction means that the appearance of all objects obeys to one particular rule.
平等互动意味着所有物体的外观都遵循一条特定的规则。
In that case, the appearance of all cards is perceived as one flow that guides user’s attention in one direction, namely from the top to down. If we don’t follow the order, the user’s attention will be scattered. The appearance of all elements at once would look bad as well.
在这种情况下，所有卡片的外观被感知为一个流动，引导用户的注意力朝一个方向，即从上到下。如果我们不按顺序进行，用户的注意力会分散。同时出现所有元素的外观也会显得不好看。
User’s attention should be guided in one fluid direction
用户的注意力应该被引导在一个流畅的方向上
As for the tabular view, it’s a bit more complicated. Here the user’s focus should be directed diagonally, so showing elements one by one is a poor idea. Revealing each element one by one will make animation excessively long, and the user’s attention will be zigzag-like, which is wrong.
至于表格视图，它稍微复杂一些。在这里，用户的注意力应该被引导到对角线上，所以逐个显示元素是一个不好的主意。逐个显示每个元素会使动画过长，并且用户的注意力会呈现蛇行状，这是错误的。
Diagonal appearance for the tabular view of cards
卡片的表格视图呈对角线外观
Subordinate interaction 下属互动
Subordinate interaction means that we have one central object which attracts all user’s attention, and all other elements are subordinate to it. This type of animation gives the sense of order and draws more attention to the main content.
下级互动意味着我们有一个中心对象，吸引所有用户的注意力，而其他所有元素都从属于它。这种类型的动画给人一种有序感，并更多地吸引主要内容的注意力。
In other cases, it would be very difficult for the user to know which object to follow so his attention would be dispersed. Therefore, if you have several elements that you want to animate, you need to clearly define the sequence of their motion and to animate as minimum objects as possible at one time.
在其他情况下，用户很难知道要关注哪个对象，因此他的注意力会分散。因此，如果您有多个要进行动画处理的元素，您需要明确定义它们的运动顺序，并尽量一次只对最少的对象进行动画处理。
It is worth animating only one central object and all the rest subjecting to it. Otherwise, a user wouldn’t know what object to follow
只有一个中心对象值得动画，其他所有对象都应该服从它。否则，用户将不知道要跟随哪个对象。
According to Material Design, when the moving objects transform their size disproportionally, they should move along the arc rather than in a straight line. It helps making the movement more natural. By “disproportionally” I mean that the change of height and width of the object by increase/decrease is carried out asymmetrically, that is with different speed (for example, a square card turns into a rectangle).
根据材料设计，当移动的物体不成比例地改变大小时，它们应该沿着弧线移动，而不是直线。这有助于使运动更加自然。所谓的“不成比例”是指通过增加/减少来改变物体的高度和宽度，是非对称地进行的，也就是说速度不同（例如，一个正方形的卡片变成了一个长方形）。
The motion of an object that disproportionately changes its size should be arranged along an arc
一个物体的运动如果不成比例地改变其大小，应该沿着一条弧线进行安排
The movement along the line is used when the object changes its size proportionally. Since the implementation of such movement is much easier, the rule of disproportional arc movement is often neglected. Looking at the real examples of applications, you’ll see the domination of the linear movement.
沿着直线运动是在物体按比例改变大小时使用的。由于实现这种运动要简单得多，不成比例的弧线运动规则经常被忽视。看看实际应用的真实例子，你会发现线性运动的主导地位。
Proportional change of the size is fulfilled in a straight line
尺寸的比例变化是直线实现的
The motion on the curve can be achieved in two ways: the first called Vertical out — object starts moving horizontally and ends with a vertical movement; the second — Horizontal out — object begins to move vertically and ends with a horizontal motion.
曲线上的运动可以通过两种方式实现：第一种称为垂直出 — 物体开始水平移动，最后以垂直运动结束；第二种是水平出 — 物体开始垂直移动，最后以水平运动结束。
The path of the object’s movement along the curve must coincide with the main axis of the scrolling interface. For instance, on the next image we can scroll interface up and down and accordingly the card unfolds in a Vertical out way — at first to the right and then down. The reverse movement is done in the opposite way — that is the card first rises vertically and ends up moving horizontally.
物体沿曲线移动的路径必须与滚动界面的主轴重合。例如，在下一张图像上，我们可以上下滚动界面，相应地，卡片以垂直展开的方式展开 - 首先向右，然后向下。相反的移动方式是相反的 - 即卡片首先垂直上升，最后水平移动。
The direction of unfolding/folding the card should coincide with the axis of the interface
展开/折叠卡片的方向应与接口的轴线相一致
If the paths of the moving objects intersect one another, they cannot move through each other. The objects should leave enough space for the movement of another object by slowing down or accelerating their own speed. Another option — they just push away other objects. Why that? Since we assume that all objects in the interface lie in one plane.
如果移动物体的路径相交，它们不能穿过彼此。物体应该通过减速或加速自己的速度为另一个物体的移动留出足够的空间。另一个选择是它们只是推开其他物体。为什么呢？因为我们假设界面中的所有物体都位于同一平面上。
During movement, objects shouldn’t pass through each other, but leave space for the movement of another object
在移动过程中，物体不应该相互穿过，而是要为另一个物体的移动留出空间
In another case, the moving object can rise above other objects. But again no dissolving or movement through other objects. Why? Since we believe that the elements of the interface behave in accordance with the laws of physics, and no solid objects in the real world are capable of doing that.
在另一种情况下，移动的物体可以升高于其他物体。但同样不能溶解或穿过其他物体。为什么呢？因为我们相信界面的元素遵循物理定律，而现实世界中没有实体物体能够做到这一点。
Objects can rise above other objects and then move
物体可以升起并移动到其他物体之上
Conclusions 结论
So, if we sum up all of the above-mentioned rules and principles, the animation in the interface should reflect the movements that we know from the physical world — friction, acceleration, etc. Imitating the behavior of objects from the real world we can create a sequence that allows users to understand what to expect from the interface.
所以，如果我们总结以上提到的所有规则和原则，界面中的动画应该反映出我们从物理世界中所了解的运动规律，如摩擦力、加速度等。通过模仿真实世界中物体的行为，我们可以创建一个序列，让用户了解界面上会发生什么。
If the animation is built correctly, then it is unobtrusive and does not distract the users from their goals. If it does, you either need to soften it or even remove at all. That means that the animation shouldn’t slow down the user or prevent from performing the task.
如果动画构建得正确，那么它就不会打扰用户，也不会让他们分心。如果它有这样的效果，那么你需要减弱它甚至完全移除。这意味着动画不应该减慢用户的速度或阻碍他们完成任务。
But do not forget that animation is more of an art than science, so it’s better to experiment and test your decisions on users.
但不要忘记动画更多的是一门艺术而非科学，所以最好在用户身上进行实验和测试你的决策。