在您的下一个网页设计项目中使用迪士尼的 12 条动画原则

在我打字的那一刻，我办公室的墙壁和架子上有 17 个迪士尼的东西。 十七。 连我都感到惊讶。 尽管我喜欢所有的东西——迪士尼，但当我看他们的一部电影时，通过动画的 12 条原则创造的魔力甚至让我无法理解。

这就是重点。 动画的 12 条原则是微妙的。 他们在观众没有意识到的情况下给观众留下了印象。 它们让我们欢笑、哭泣、同情和梦想，有时是在同一个场景中。 他们创造的角色和物体看起来和移动得如此逼真，你想要伸手去触摸它们。 （你见过可可吗？我休息一下。）

这 12 条动画原则现在为所有动画作品、迪士尼等提供了基础。 它们也与动画以外的领域相关，例如网页设计。

动画 12 条原则简史

动画的 12 条原则是由奥利约翰斯顿和弗兰克托马斯介绍的，他们是迪士尼九老汉中的两个，他们是 1920 年代和 30 年代加入的核心动画师群体。 约翰斯顿和托马斯在 1981 年写了生命的幻觉：迪士尼动画，它仍然是动画的“圣经”。 这本书仔细研究了迪士尼顶级动画师提取 12 条原则的方法。 虽然这些原则最初是为手绘动画设计的，但它们在技术变革中幸存下来，现在被计算机动画师（如皮克斯）和网页设计师使用。

动画的 12 条原则以及它们如何影响网页设计

这些原则经得起时间的考验是有原因的。 有时，基础仍然是最好的。

1. 壁球和拉伸

资料来源：Chris Gannon 通过 Giphy

“Squash and Stretch”是最重要的动画原则。 它赋予动画灵活性、重力、重量和质量。 当一个物体在运动时，它不会保持相同的形状。

不过，音量必须保持一致。 拉伸需要使物体更薄和更长; 挤压使它更短和更宽。 如果你只是把它做得更薄或更短，它就不会保持相同的体积。

在网页设计中，当对象需要引人注目时，使用“Squash and Stretch”。 如果有一个物体需要看起来像它有物理质量，这个原理可以解决问题。

2. 预期

资料来源：CentoLodigiani 通过 Giphy

预期让观众为即将发生的事情做好准备，它可以使最终的动作更加逼真。 你不会不先弯曲膝盖就坐下，或者不伸出手臂就抓住什么，对吧？ 预期让角色或物体通过一两个逼真的动作来提示观众即将发生的事情。

在网页设计中，预期用于过渡。 例如，如果访问者正在填写信息框并遗漏了所需信息，则该框可能会弹跳一下以引起他们的注意并传达“嘿，出了点问题”。 另一种使用预期的方法是稍微缩小项目，然后在悬停时使它们变大。

3. 分期

舞台引导观众的眼睛，这样他们就会看你想让他们看的地方（摄影中的“引导线”）。 淡化场景的其余部分，以便观众专注于您希望他们关注的内容。 舞台的另一个组成部分是角色的每一个动作背后都有一个意图。 如果您隔离动画的每一帧，您将能够说出姿势背后的意图。

分期是适用于网站上使用的网页设计和视觉效果的更简单的原则之一。 这就是在网页上出现弹出窗口时发生的情况——弹出窗口的运动使您专注于它，而页面的其余部分则变得模糊、变暗或被覆盖。 您象征性地照亮了“舞台”中最重要的部分，而将其他一切都保留在背景中。 光影也可以用于此目的，或者网页设计师可以简单地通过去除不必要的细节来应用这一原则。

4. 直奔并摆出姿势

“直线前进”和“摆姿势”是两种不同的动画制作方式。 通过“直线前进”，帧从头到尾按顺序创建。 这为动画提供了动态、流畅的运动。 使用“姿势到姿势”，创建第一帧和最后一帧，然后添加必要的中间姿势。

资料来源：Vincenzo Lodigiani，动作艺术家

今天，计算机动画使用“pose topose”，因为计算机可以自动填充缺失的帧。 查看 Chekhov 上的动画——您可以看出它们实际上并不流畅（而且它们不应该如此）。 如果你想在你的网站上创建一个“直线前进”的动画，你可以使用 steps() 计时函数，它允许你定义多个帧并按顺序显示它们。

5. 跟进和重叠行动

“跟随和重叠动作”原则说，当一个角色或物体在运动然后停止时，主体的部分将以不同的速度移动和停止。 这模仿了现实生活中的物理定律。

• 重叠动作：对象的不同部分以不同的速度移动。
• 跟随：对象的松散连接部分在主要对象停止移动后继续移动几秒钟。 这些部分将移出停止点，然后向后拉回物体。

在下面的示例中，Rapunzel 的手臂和腿以与头部不同的速度移动 - 这是重叠动作。 当她停止旋转时，她的头发继续摆动一秒钟——这就是后续。

“拖动”是一种相关的技术，它发生相反的情况——物体的一部分移动，然后其余部分追上。 所有这些技术都表现出逼真的动作或可以夸大动作以获得滑稽效果。

“移动保持”也与此有关。 剩下的角色仍然有轻微的移动，这样动画就不会停滞不前。

在移动和网页设计中，“跟进”和“重叠动作”向观众展示了一个动作是故意停止的。 否则，您可能会认为它只是停止工作了。 例如，看看我 iPhone 上的奇妙清单应用程序如何显示我正在移动一个列表项。 当我移动它时，该项目会变成不同的颜色并变大，然后在我完成后恢复到原始颜色和大小。 这就是我知道动作完成的方式。

你也可以在你的 iPhone 上看到这个原则。 当您在主屏幕上切换视图或移动图标时，元素的移动速度略有不同。 这就是你的 iPhone 传达的信息，“事情正在发生变化。”

6. 慢进慢出

“慢进慢出”原理指出，物体开始缓慢移动，获得动量并加速，然后在停止时再次减速。 基本上，运动必须加速和减速才能自然。 为了达到这种效果，在动作的开始和结束处都有额外的帧来强调运动的逐渐增加和减少。

来源：Tumblr 上的生命幻觉

对于网页设计，CSS 有两个与此原则相关的计时功能：ease-in 和ease-out。 你可以在你的计划，你的星球网站上看到一个例子（首先点击“让我们开始”）。

7. 弧形

与动画的其他 12 条原则中的许多原则一样，“弧线”是基于物理学的。 由于重力，物体在移动时通常会遵循某种类型的弧线。 如果它们保持笔直，运动将是机械的，而不是现实的。

这也适用于所有类型的运动，而不仅仅是低到高到低的弧线：

在网页设计中，“弧形”原则可以通过创建弧形动画来使用，当然，也可以通过让元素旋转，比如在加载期间。

8. 次要动作

次要动作强调主要动作而不会分散注意力。 它还赋予角色和对象更多维度，并为场景注入活力。 分期原则发挥作用，因为主要行动仍然是重点。

次要动作不必落在主要对象之外。 可以是角色在走路时吹口哨或通过扬起眉毛来表达情感。

在移动和网页设计中，当元素移开为新元素腾出空间时，就会看到“次要操作”原则，例如当您重新排列 iPhone 上的应用程序时。 这可能与强调这些行动的“跟进和重叠行动”相辅相成。

9. 时机

时间安排非常简单，它与“慢进慢出”有关。 该原则说元素应该以自然的方式始终如一地移动，就像它们在现实世界中一样。 为了强调，他们可以故意加快或减慢。 使用的帧数将建立时间——帧数越多，动作越慢，帧数越少，动作越快。

在这个例子中，Daffy Duck 的第一个动作有自然的时间，然后最后一个动作，当他靠近观众时，故意快速强调。

计时还可以帮助观看者了解物体相互之间的重量。 在这个例子中，角色缓慢地举起重物并迅速放下它们，表明它们对他来说很重：

资料来源：Giphy 上的 @scottthigpen

在网页设计中，时间用于使元素停留更长时间或快速消失，尤其是在响应用户交互时。 例如，如果用户想要关闭菜单，您可以设置时间，使其停留 300 毫秒。 如果他们点击导航栏中的元素，您会希望操作快速发生（100 毫秒）。

10.夸张

尽管动画的 12 条原则中有很多都是以现实为中心的，但动画的美妙之处在于它不是真实的。 “夸张”原则说太多的现实主义会削弱动画最擅长的东西：娱乐性。 夸张是用来使人物和物体更有趣。 它需要现实并将其提高一个档次，足以使场景仍然可信。 夸张需要克制，这样场景就不会变得抽象或超现实。

在网页设计中，对象被放大或缩小以吸引或分散注意力。 当用户在网站的某个部分（如表单）上处于活动状态时，它会增长而其他元素会缩小。 这类似于“暂存”原则，尤其是当您想到弹出表单时。

11.实体图

来源：Tumblr 上的生命幻觉

尽管动画在技术上是 2D 的，但它必须在 3D 中真实地呈现。 “立体绘图”原则也可以称为“透视”，因为它是关于具有绘制和理解基础知识的能力，例如：

• 解剖学
• 平衡
• 一致性
• 光与影
• 体积
• 重量

对于网页设计师来说，向元素添加深度可以向用户展示他们可以与之交互。 您可以在我们的网站上看到这一点。 当我向下滚动时，观察“加入下载”按钮如何变成粉红色：

12. 上诉

可能是最难掌握的动画 12 条原则，“吸引力”表示你的角色、物体和他们的世界必须吸引观众。 他们应该以某种方式有吸引力和迷人，无论是身体上还是其他方面。 没有办法做到这一点，但扎实的角色发展和讲故事是关键因素。

在动画中，每个角色都不会吸引人——反派是迪士尼电影的基石。 但是，它们的呈现方式应该仍然具有魅力并引起观众的兴趣。

在网页设计中，“吸引力”是指整个网站引人入胜、令人愉悦且易于使用。

包起来

迪士尼的 12 条原则可以帮助制作简单的动画，就像您在网站上创建互动游戏一样，但它们也可以帮助设计各种网页。 大多数消费者在谈到迪士尼电影时都和我一样：我知道我喜欢某样东西，我的大脑会处理这些暗示，但我无法弄清楚为什么我会有这些反应。 网页设计师的工作是预测访问者的想法和行为，然后巧妙地引导他们采取正确的行动。

正在寻找更多与观众建立联系的方式？ 阅读我们关于使用色彩情感的博客文章。