流畅之美：掌握 Web 动画设计原则

在现代互联网时代，Web 应用程序和网站已经超越了简单的信息传递工具，它们成为了与用户互动和建立连接的媒介。为了在这个数字世界中脱颖而出，Web 动画成为了一种强大的设计元素，能够吸引用户的注意、提高用户体验并有效传达信息。

Web 动画已经成为了 Web 设计的重要组成部分，但要创造出引人入胜的动画效果，需要遵循一些关键的原则。这些原则不仅使动画更吸引人，还确保它们与用户界面和内容完美融合。那么，我们如何确保有效地使用动画呢？学习的最佳榜样莫过于计算机动画的先驱迪士尼。在这节课中，我们将探讨迪士尼的 12 大动画原则以及如何将它们应用于 Web 动画中，以创造出令人印象深刻的动画效果。

不论你是一名 Web 设计师、开发者还是数字创意专家，了解这些原则将助于提高你的 Web 动画技能，为用户提供更丰富、更有吸引力的在线体验。让我们一起探索 Web 动画设计原则，并掌握创建引人入胜动画的艺术。

迪士尼的 12 大动画原则是什么？

动画是一种引人入胜且充满活力的艺术形式，多年来已经有了显著的发展。在动画世界的重要贡献者之一是沃尔特.迪士尼（Walt Disney）和他领导的一群才华横溢的动画师。

沃尔特.迪士尼曾经说过这么一段话：

对于心灵而言，似乎真实的东西可以与任何物质事实一样重要。我们生活在精神和想象力中，也生活在感官中。卡通动画可以使幻想与我们能够触摸、看到和听到的东西一样真实。

迪士尼的动画师奥利·约翰斯顿（Ollie Johnston）和弗兰克·托马斯（Frank Thomas）制定了 12 大动画原则，以制作更加真实的动画。1981 年在他们的著作《生活的错觉》中引入了这些原则，这本书被誉为动画中的圣经。

这 12 大动画原则结合了物理学的基本法则 —— 所有动画都需要遵循以确保真实性、以及认知心理学原则，旨在唤起情感。尽管这些原则最初是为传统动画（如角色动画）设计的，但随着技术不断发展，计算机、手机和可穿戴界面越来越能够实现更高程度的保真度和流动性，人们越来越能够在图形用户界面（GUI）中看到这 12 大基本动画原则的应用。其中一些可以直接用于呈现，其他一些则体现在理念上。在这节课中，我们将探讨这些原则如何应用于 Web 动画。

应用传统动画原则

Demo 地址：https://codepen.io/airen/full/wvRVMbV

迪士尼 12 大动画原则共同构成了动画制作的基础，不仅适用于传统手绘动画，还适用于 Web 动画。它们有助于 Web 设计师和开发者创作出更具表现力、吸引力和引人入胜的动画。这些原则不仅适用于动画领域，还可以在其他领域中应用，包括用户界面设计、游戏开发和影视制作。

即使你不是动画专家也可以跟随学习这些动画原则。我们结合实际用例向大家阐述和展示它们在动画制作上的作用，同时使你更易于理解和掌握这些动画原则，帮助你将你制作的动画转化为更具真实感的错觉。

01：挤压和拉伸（Squash and Stretch）

Demo 地址：https://codepen.io/airen/full/YzdbdLR

挤压和拉伸（Squash and Stretch）原则是传统动画中的基本技巧，用于增加动画物体的真实感和表现力。它的主要思想是，在物体移动或发生形变时，它们应该具有弹性，就像现实世界中的物体一样。

• 挤压（Squash） 指的是当物体受到外力压缩时，它会在垂直方向上缩短，但在水平方向上扩展，就像橡皮球被挤压一样。这种效果使用户感受到物体的质量和弹性
• 拉伸（Stretch） 指的是当物体受到外力拉伸时，它会在垂直方向上延伸，但在水平方向上收缩，就像橡皮球被拉伸一样。这种效果可以增加动画物体的拉伸感

挤压和拉伸原则对于创建具有重力、重量、质量和灵活性错觉的动画至关重要。它通常用于传达动画中的力量、速度和重量。一个常见的示例就是弹跳的球，当它上下移动时会被拉伸，当它触地时会压缩。它的拉伸和挤压程度取决于球应该由什么材料制成。如果球是由橡胶制成，效果将非常明显，而如果它模拟的是保龄球，效果将非常微妙。

在数字界面中，挤压和拉伸原则使元素感觉触感丰富，并提供关于可操作性的视觉提示或反馈。例如，按压按钮时会发生挤压，双击窗口标题栏时会发生拉伸，或者在页面底部达到时，会发生挤压和拉伸，表示无法进行进一步的滚动。

在 Web 设计中，挤压和拉伸可以轻松地与按钮相关联。例如，按钮的按下状态是挤压。通过控制挤压和拉伸，我们可以轻松地定义按钮的特性。

除了按钮，这也可以应用于界面上的任何交互元素。例如，侧边栏的收缩与展开：

我们可以通过 CSS 属性 transform 来实现这种挤压和拉伸效果：

Demo 地址：https://codepen.io/airen/full/xxmNBaE

这个效果事实上就是模拟一个橡皮球从上面掉落的动画效果。使用了 CSS 变换（transform）的 translate 使物体沿着 y 轴改变位置（掉落的动画）：

@keyframes up {
    0% {
        translate: 0 100px;
    }
    50% {
        translate: 0 0;
    }
    100% {
        translate: 0 0;
    }
}
 
@keyframes down {
    0% {
        translate: 0 0;
    }
    50% {
        translate: 0 0;
    }
    100% {
        translate: 0 100px;
    }
}

使用 scale 使物体沿着 Y 轴做挤压的效果：

@keyframes squash {
    0% {
        scale: 1 0.8;
    }
    6% {
        scale: 1 1;
    }
    93% {
        scale: 1 1;
    }
    100% {
        scale: 1 0.8;
    }
}

使用同样的方案，可以同时实现挤压和拉伸的效果：

Demo 地址：https://codepen.io/airen/full/vYvwMya

这里整理了几条关于挤压和拉伸原则的关键点，它们有助于理解挤压和拉伸原则在动画中的作用和如何有效地应用它们：

• 重力和弹性：挤压和拉伸原则可以帮助在动画中传达重力、物体的弹性和质量感。当物体受到重力作用时，它会被挤压，当它弹起时，会被拉伸。这增加了动画的逼真感。
• 材料属性：挤压和拉伸的程度取决于物体的材料属性。例如，橡胶球会在弹跳时明显挤压和拉伸，而保龄球则会有更微妙的变化。
• 意向和动作：挤压和拉伸动作通常出现在动作的前后，以准备用户迎接即将发生的事情。这有助于使动作更加流畅和自然。
• 挤压和拉伸的一致性：保持物体的体积一致性对于有效传达挤压和拉伸是关键的。当物体被拉伸时，它会变得更薄，当物体被挤压时，它会变得更宽。
• 界面中的应用：挤压和拉伸原则也可以在数字界面中应用，以传达元素的可交互性和反馈。例如，在按钮悬停状态时，可以使用挤压和拉伸来指示按钮是可点击的。
• 适度的使用：挤压和拉伸应该被适度使用，过度的挤压和拉伸可能会让动画看起来不自然或令人分散注意力。

02：预备动作（Anticipation）

Demo 地址：https://codepen.io/airen/full/abPrrQx

预备动作（Anticipation）原则强调为用户即将发生的动作或事件做准备，即在进行某个动作之前，需要有一些准备动作来暗示即将要发生的事情。它涉及在主要动作之前进行短暂的暂停或相反方向的动作。预备动作有助于增加动画的可理解性、吸引力和自然感，使用户更容易跟随故事情节和理解角色的行为。例如，在经典的迪士尼电影《狮子王》中，当辛巴即将扑击时，他会蹲下身子然后一跃而起。这种蹲下的动作为随后的跃起提供了预备动作。大多数动作都会出现类似的现象。我们的大脑在潜意识层面处理了许多这样的预备动作。

在数字界面中，你可以使用预备动作原则来告知用户如果执行特定操作会发生什么。这一原则的主要应用之一是悬停动画，每当用户将鼠标悬停在元素上时，某些元素会产生反应，表明它是可点击的，当你点击它时将发生某些事情。

Demo 地址：https://codepen.io/airen/full/yLGWWYo （来源于：@Vineeth.TR）

以下是预备动作的一些关键要点：

• 引导用户的关注：预备动作可以吸引用户的关注，让他们知道某个重要的动作或事件即将发生。这有助于用户预测即将发生的事情。
• 增加动画的真实感：在现实生活中，人们往往会做一些准备动作，以准备进行某个动作。这种行为在动画中复制可以增加动画的真实感。
• 突出重要性：预备动作可以用于突出某个动作或事件的重要性。通过强调准备动作，用户会更加关注即将发生的事情。
• 平衡动画速度：预备动作还可以用于平衡动画的速度。它可以用于减缓节奏，使用户更容易跟随动画的发展。
• 增加动画的吸引力：具有吸引力的预备动作可以使动画更具吸引力和有趣。用户通常更容易与角色或情节产生共鸣。
• 提高可理解性：通过明确表示即将发生的动作，预备动作有助于提高动画的可理解性。用户不会感到突然或困惑，因为他们已经看到了迹象。

在动画中，预备动作可以是微小的细节，如角色的眼神变化、身体的微小移动，或者更显著的动作，如弯腰、深呼吸等。这些准备动作都有助于使动画更生动、更自然，同时提高了用户的情感互动和理解程度。通过巧妙地运用预备动作，动画制作者可以创造出更具吸引力和引人入胜的动画作品。

03：舞台布局（Staging）

Demo 地址：https://codepen.io/airen/full/WNLBqwy

舞台布局（Staging）原则强调确保用户能够清晰地看到动画中的重要要点，以保持情节的清晰和角色的表现力。它是一种与视觉传达和故事叙述有关的技术，旨在引导用户的注意力并增加动画的效果。

舞台也是集中注意力的关键。就像在剧院舞台上一样，灯光将投射在最重要的区域上。换句话说，舞台布局编排了场景，它涉及到物体在场景中的摆放方式，每个动画的执行时间和方式等。它将注意力引导到场景中最重要的物体上。

在界面方面，舞台布局决定了元素的放置位置以及在发生互动时它们如何编排。它将用户的注意力引导到预期的元素上。假设有一款音乐应用程序，可以根据我们的兴趣为我们推荐音乐。如果用户想听类似类型的歌曲，这样的应用应该会让他们喜欢上这首歌。因此，有必要将“喜欢”操作（它可能是一个爱心的图标）与其他编排的元素分开。

例如下面这个示例，也是一个音乐应用的播放页面，“Like” 按钮背景有一个微弱呼吸灯的动画效果，并且用户点击该按钮之后会有一个“+1” 的动画效果。

Demo 地址：https://codepen.io/airen/full/rNoEWKZ

以下是舞台布局的一些关键要点：

• 突出关键元素：在动画中，舞台布局用于突出展示重要的角色、道具、动作或情节元素。这可以通过放大、高亮或突出这些元素来实现。
• 清晰度和可理解性：舞台布局有助于确保动画场景的清晰度和可理解性。用户不应该感到困惑或无法理解发生了什么事情。
• 情感表达：通过巧妙的舞台布局，可以增强角色的情感表达。用户应该能够清晰地看到角色的情感状态，从而更好地与角色共鸣。
• 动态导向：舞台布局还涉及到指导用户的注意力。用户的目光应该被引导到他们需要关注的地方，以便更好地理解情节。
• 视觉平衡：在动画中，舞台布局也涉及到视觉平衡的维护。元素的排列和定位应该在画面中创造出一种平衡和和谐感。
• 艺术指导：舞台布局通常需要由艺术指导和导演来指导。他们确定如何布置画面以最大程度地实现视觉和情感效果。
• 凸显重要动作：舞台布局可用于凸显和强调重要的动作，使其更具戏剧性和吸引力。

舞台布局是动画制作中的关键因素，它确保动画场景的清晰度、角色的情感表达和用户的引导。通过有效的舞台布局，动画可以更生动、更具吸引力，同时保持故事情节的连贯性和可理解性。

04：连续动作与关键动作（Straight ahead action and pose to pose）

Demo 地址：https://codepen.io/airen/full/GRPbmYZ

连续动作和关键帧动作（Straight Ahead Action and Pose To Pose）原则中包括了两种不同的制作动画的方法，分别是连续动作（Straight Ahead Action）和关键动作（Pose To Pose）。这两种方法有各自的特点和适用情境：

• 连续动作：这种制作动画的方法是从动画序列的起始帧开始，逐一制作生一帧，按照时间的顺序逐步推进，直到动画完成。这种方法更注重连贯性和流畅性，通常用于制作需要自然和连续动作的场景，如水流、火焰、奔跑等。连续动作方法适合创造具有连贯感的动画，但可能需要更多的时间和努力来完成
• 关键动作：在这种方法中，动画师首先确定动画序列的关键帧，即动画中的关键动作和姿势。然后，他们在这些关键帧之间填充中间帧，以平滑过渡和创造连贯的动画。关键帧通常用于强调特定的动作或情感，例如人物的表情、动作、对话等。这种方法有助于精确控制动画的关键要点和情感表达

例如，在一个角色的行走循环中，关键动作（关键帧到关键帧）会定义起点和终点的关键位置，而连续动作会逐帧制作动画，捕捉所有过渡时刻。

在 Web 动画中，你可能会使用关键帧动画的方法，尤其是在 CSS 动画中，例如，创建组件状态，除非你想要动画化某些不寻常的东西。也就是说，我们将添加关键帧动作，然后浏览器将自动“插值”中间帧。

例如下面这个动画效果，卡通人物的动作效果使用了连续动作方法，而卡通人物向前移动则使用了关键帧方法：

Demo 地址：https://codepen.io/airen/full/zYyVzjx

另外，我们还可以使用该原则来制作钟摆的动画效果：

Demo 地址：https://codepen.io/airen/full/gOZNxWQ （来源于 @David Khourshid）

连续动作（Straight ahead action）和关键动作（Pose to pose）都有一些关键要点，以确保最终动画效果出色。其中，连续动作（Straight Ahead Action）的一些关键要点：

• 流畅性和自然性：连续动作适用于需要流畅、自然的动作，如火焰、烟雾等。你应该注意在连续动作中保持动作的连贯性，以模仿现实中的流动性。
• 创意和灵感：这种方法允许你更自由地发挥创意，因为他们可以直接绘制每一帧，不需要受到固定的关键帧限制。
• 时间管理：连续动作需要更多的时间，因为每一帧都需要手动绘制。因此，良好的时间管理和计划对确保进度非常重要。

关键动作（Pose to Pose）的一些关键要点：

• 规划和结构：关键动作的首要原则是规划和结构。你首先确定关键帧，然后填充中间帧，以确保动画流畅和有条理。这需要有良好的动画结构意识。
• 控制和调整：关键动作提供更多的控制和调整余地。你可以准确控制关键帧，以确保动画效果符合其意图。这有助于制作复杂的动作，如角色的表演或互动。
• 编辑和修正：关键动作更容易进行编辑和修改。如果需要调整动画，你可以在关键帧之间插入或删除帧来进行修正，而不会破坏整个动画。
• 时间管理和规划：虽然关键动作相对于连续动作来说更有效率，但仍需要合理的时间管理和规划，以确保动画按计划进行。

不论选择哪种方法，你都需要具备良好的动画基础知识，包括时序、空间感和物理原理，以确保动画看起来自然、吸引人和令人信服。选择方法通常取决于项目需求、动画风格和个人技能。有时候，你还可以在项目中结合使用这两种方法，以达到最佳效果。

05：跟随动作与重叠动作（Follow Through and Overlapping Action）

Demo 地址：https://codepen.io/airen/full/Yzdorxm

跟随动作与重叠动作（Follow Through and Overlapping Action）原则强调了在动画中物体停止运动时，其附着部分可能会继续运动，而不是立刻停下来。它使动画看起来更加自然和流畅。具体来说：

• 跟随动作（Follow Through） ：当主要动作停止时，附着在物体上的次要部分（如绳子、头发、衣服）可能会继续运动一段时间，然后逐渐停下。这个过程模拟了现实生活中的动态效应。
• 重叠动作（Overlapping Action） ：不同部分的运动不一定完全同步。有时，一部分的运动可能会领先于其他部分，然后逐渐趋于同步。这种不同部分的相对运动增加了动画的生动性。

这一原则反映了事实，即物体的各个部分并非同时移动。例如，看着镜子中的自己摇晃头部。如果你头发较长，你会看到头发的运动稍微滞后于头部的运动，而你的眼睛可能也有不同的运动（重叠动作）。这种现象在物体在运动后停下来时尤为重要。以相同的例子来说，即使你停止了头部的运动，你的头发可能仍然会稍微继续运动（随后跟随）。

在 Web 动画设计中，你可以拥有彼此相关但可能以不同速率移动的元素。例如，你可以有一个图像、一个标题和一个描述。运动的发起者将是最关键的元素，在这种情况下是图像。然后标题和描述跟随。这一原则有助于在界面中建立层次结构。

在 Web 中，我们可以看到使用视差效果来实现类似的效果。例如下面这个效果，卡片滑动时，卡片上的缩略图和 Logo 以不同的速度开始，显示重叠的动作：

Demo 地址：https://codepen.io/airen/full/ZEVdabm （来源于 @Wikyware Net）

在一些悬浮状态的动画效果也可以使用该原则来制作，例如：

Demo 地址：https://codepen.io/airen/full/JjwQOKj （来源于 @Andy Merskin ）

然而，重要的是要注意，并非所有应用都需要这种随后跟随和重叠动作，而且不能减慢用户完成任务的速度。

跟随动作（Follow Through）和重叠动作（Overlapping Action）是动画制作中重要原则之一，用于使动画看起来更加自然和流畅。以下是它们的一些关键要点：

• 动作的延续性：跟随动作涉及到动作的延续，即在主要动作完成后，某些部分仍然继续移动。这模仿了现实生活中的动量和惯性。
• 主要元素：通常，跟随动作中的动作始于主要元素，例如一个角色的主要部分，如身体或头部。随后的部分，如头发、衣物或附属物品，会随着主要元素的运动而产生延续性动作。
• 不同速度的运动：重叠动作涉及到不同部分的角色或对象以不同的速度运动，以创建动作之间的层次感。这使得动画看起来更具深度和维度。
• 层次结构：在重叠动作中，通常有一个主要元素，它的运动启动了动作序列，然后其他部分会以不同的速度和方向进行运动。这有助于建立界面或场景的层次结构。
• 自然感：跟随动作赋予动画更大的自然感，使动作看起来更真实。它可以应用于各种动画场景，包括角色动画和对象的运动。
• 真实感：重叠动作使动画看起来更具真实感，因为不同部分的运动反映了物体的复杂性和现实世界的物理原理。

总之，跟随动作和重叠动作是关于模仿自然运动和增强动画的真实感和流畅性的原则。它们在角色动画、界面设计和物体运动中都具有广泛的应用，有助于创造更引人入胜和生动的动画效果。这个原则在动画制作中被广泛采用，以提高动画的质量和吸引力。

06：渐快与渐慢（Slow In and Slow Out）

Demo 地址：https://codepen.io/airen/full/mdaZqpw

渐快与渐慢也被称为“缓动”，它强调了在动画中物体通常在开始和结束运动时逐渐加速和减速的动态效应。简单地说，它指的是物体运动的渐进加速和减速。它模仿了现实世界中物体的开始和停止时逐渐加速和减速的方式，而不是突然。这有助于使动画看起来更加流畅、自然，同时增加了动画的真实感。具体来说：

• 渐快（Slow In） ：当物体从静止状态或低速状态开始运动时，其初始帧应该是较慢的，然后逐渐加速。这种效果模拟了现实生活中的物体启动时的惯性和逐渐加速的过程。例如，当你开始骑自行车时，你通常需要用力踏脚踏板，然后慢慢加速，直到你达到你的期望速度。
• 渐慢（Slow Out） ：当物体即将停止运动时，其最后几帧应该是较慢的，然后逐渐减速至停止。这模拟了现实生活中物体停下来时的逐渐减速和停止的过程。例如，当汽车要停下来时，司机通常会慢慢松开油门，然后轻踩刹车，使车辆逐渐减速，以避免突然停下来的冲击。

在 Web 动画中，随着动作的结束，通常会采用缓动动作，使其看起来更加平滑和愉悦。表面上看，缓入缓出可能看起来像是一种美学实现，但它越来越多地被用作认知支持，帮助用户理解已经发生的动画。换句话说，没有缓入和缓出的动画，它看起来会显得呆板无生气。

渐快和渐慢动画原则在 Web 动画中经常出现，比如：

• 滚动动画：当你滚动一个网页时，内容通常不会立即以相同的速度移动。内容的滚动速度会逐渐增加，以提供更自然的滚动体验
• 弹出菜单：当你点击一个按钮以打开菜单时，菜单通常不会立即出现。它可能会以一个渐进的动画效果逐渐展开，以减轻突然出现的感觉
• 轮播幻灯片：在轮播幻灯片中，切换幻灯片时通常会使用渐快和渐慢的效果。当前幻灯片慢慢减速，然后下一张幻灯片逐渐加速
• 过渡效果：过渡效果，如页面切换或元素显隐，通常包括渐快和渐慢的动画，以平滑过渡
• 加载动画：在加载页面或内容时，使用渐快和渐慢的加载动画可以让用户感到更加顺畅，而不会让他们感到等待时间太长
• 按钮交互：当你悬停在按钮上或点击按钮时，按钮的颜色或大小可能会以渐快和渐慢的方式发生变化，以增加交互的吸引力

比如下面这个加载动画，使用了渐慢原则：

Demo 地址：https://codepen.io/airen/full/QWzXrWP

渐快和渐慢原则在 Web 动画中使用是最频繁的，因为该原则能和 Web 动画中的缓动函数相匹配，比如 ease-in 、ease-out 、ease-in-out 和 cubic-bezier() 等。

在 Web 动画中，缓动函数用于控制动画的速度变化，以模拟现实世界中物体的渐快和渐慢运动。

• ease-in 缓动函数表示动画开始速度较慢，然后逐渐加速。这与渐快动画原则一致，因为渐快动画原则要求物体在开始时以较慢的速度移动，然后逐渐加速
• ease-out 缓动函数表示动画在结束时逐渐减速，这与渐慢动画原则一致。根据渐慢动画原则，物体在接近停止时会逐渐减速，而不是突然停止
• ease-in-out 缓动函数结合了渐快和渐慢的特性。它表示动画开始时速度较慢，然后逐渐加速，同时在结束时逐渐减速。这与渐快和渐慢的动画原则一致，因为渐快动画原则要求物体在开始时以较慢的速度启动，然后逐渐加速，而渐慢动画原则要求物体在结束时以较慢的速度减速

在 Web 动画中，使用渐快或加速曲线（ease-in）可以实现渐快的动画效果，在开始时，元素的位置变化缓慢，速度逐渐增加，这意味着元素以一定的加速度移动。

当元素以全速飞出屏幕时，应使用渐快或加速曲线，这些元素可以是系统通或页面上的卡片。但请记住，只有当对象永远离开屏幕并且我们无法回忆或返回时，才应使用渐快原则（加速曲线 ease-in）。

而渐慢（或减速曲线）和渐快（或加速曲线）刚好相反，它可以实现渐慢动画效果，使元素在结束时以较慢的速度减速，以模拟物体在现实世界中的减速运动方式。

当元素出现在屏幕上时，应该使用渐慢原则或减速曲线。它以最大速度飞向屏幕，逐渐减速，直到完全停止，这也可以应用于从屏幕外部出现的不同卡片或对象。

ease-in-out 是最匹配渐快与渐慢动画原则的，它可以实现渐快和渐慢的动画效果，使元素在动画的开始和结束都表现出速度的变化，从而创建更流畅、自然和吸引人的动画。它也是 Web 动画中最常见的一种。每当你对在动画中使用哪种运动方式感到困惑或疑虑时，就请使用渐快与渐慢的动画原则，因为它最能模拟现实世界中物体的运动方式。

除此之外，你还可以使用 cubic-bezier 缓动函数来控制动画的渐快和渐慢效果。通过调整 cubic-bezier 函数的参数，你可以创建自定义的速度曲线，以在动画的不同阶段实现渐快和渐慢的动画效果。

因此， cubic-bezier 函数通常用于与渐快和渐慢动画原则相匹配，以创建更自然和吸引人的动画。这使得你可以根据需要自定义动画的速度曲线，以模拟现实世界中的运动方式。通常，你可以通过以下方式来匹配 cubic-bezier 缓动函数与渐快和渐慢动画原则：

• 渐快（ ease-in ） ：为了实现渐快效果，你可以选择一个 cubic-bezier 函数，其中初始速度较慢，然后逐渐加速。典型的 cubic-bezier 函数参数可能为 (0.42, 0.0, 1.0, 1.0)，这会导致开始时较慢的动画，然后在接近动画结束时加速。
• 渐慢（ ease-out ） ：为了实现渐慢效果，你可以选择一个 cubic-bezier 函数，其中动画在接近结束时逐渐减速。典型的 cubic-bezier 函数参数可能为 (0.0, 0.58, 0.58, 1.0)，这将导致动画在接近结束时减速。
• 渐快和渐慢结合（ ease-in-out ） ：为了同时实现渐快和渐慢的效果，你可以选择一个 cubic-bezier 函数，使动画在开始和结束时都较慢，而在中间逐渐加速。典型的 cubic-bezier 函数参数可能为 (0.42, 0.0, 0.58, 1.0)，这会在动画的两个极端（开始和结束）产生渐快和渐慢的效果，而在中间加速。

Demo 地址：https://codepen.io/airen/full/ExGBqWN

注意，我们将会在后续章节中详细阐述缓动函数和二次贝塞尔曲线在 Web 动画中的应用以及如何使用它们来制作出更有吸引力的，更有活力的动画效果。这里就不做过多的阐述了。

最后，我们来看一下渐快和渐慢动画原则的一些关键要点：

• 速度变化：渐快和渐慢动画原则强调动画中的速度变化。物体在动画开始时较慢，然后逐渐加速（渐快），或者在动画结束时逐渐减速（渐慢）。这模仿了物体在现实世界中启动和停止的方式。
• 流畅性：这一原则有助于使动画看起来更流畅和自然，而不会显得突兀或生硬。它使用户更容易理解和接受动画中的运动。
• 模仿真实：渐快和渐慢动画原则旨在模仿现实世界中的物体运动方式，例如车辆的启动和停止，物体的投掷和抛物线运动等。这使得用户更容易与动画互动，因为它们与他们在日常生活中的经验相一致。
• 情感表达：通过控制速度的变化，渐快和渐慢动画原则可以用来表达情感和意图。例如，加速的动画可能传达紧迫感，而减速的动画可能传达柔和或放缓的感觉。
• 应用广泛：这一原则适用于各种动画，包括界面动画、角色动画、过渡效果等。它有助于提高用户体验，并使动画更具吸引力和可理解性。

总之，渐快和渐慢动画原则是创造自然、吸引人和情感丰富的动画的关键要点。通过控制速度的变化，设计师可以影响观众的感知和互动，使动画更具现实感和吸引力。

07：弧线（Arc）

Demo 地址：https://codepen.io/airen/full/WNLqVzV

在现实世界中，大多数物体都会沿着轻微的弧线移动，例如，当你扔石子或纸飞机时，它们通常会沿着弧线路径飞行，而不是直线。通常情况之下，任何遵循平滑曲线的运动在审美上会令人更感到愉快，因为动作看起来更自然、流畅和真实。有时动作围绕一个点旋转（比如手臂绕肩膀旋转），而其他时候它们受到外部力量的作用（比如重力，向心力和离心力）。我们在动画中使用弧线来模仿这些现象，使动画看上进心来更自然。

在 Web 动画中，Web 设计师和开发人员一直在使用弧线作为动画路径而不是直线来赋予动画以生命。例如：

• 导航菜单：在 Web 界面中，导航菜单中的弹出子菜单通常会遵循弧线路径，这样用户在将鼠标悬停在主菜单项上时，子菜单能够以自然的方式滑出。
• UI 元素的弹出和消失：许多 Web 应用程序使用弧线路径来实现 UI 元素的平滑弹出和消失效果。例如，当你点击一个按钮以展开更多选项时，弹出的选项框通常会以弧线路径从按钮的位置出现。
• 轮播幻灯片：在轮播图像或内容的幻灯片中，弧线路径可用于切换幻灯片的动画效果，使过渡更加流畅和吸引人。
• 游戏界面：Web 游戏中的动画通常使用弧线路径来模拟物体的移动，例如飞行射击游戏中的子弹路径或角色的跳跃路径。

这一原则的一个很好示例是 Mac 的 Dock 栏悬停动画，它使通过 Dock 栏中锚定的不同应用程序的导航变得直观和有趣。

Demo 地址：https://codepen.io/airen/full/dywBxwK （来源于 @Jhey）

从高处抛出的球会沿着抛物线路径运动。弧线使事物看起来更自然。在界面中，遵循对角线路径的元素可以通过弧线运动变得更自然。当你想突出元素的路径时，可以使用弧线。这一原则强调在动画中物体和角色的运动通常应该遵循弧线路径，而不是直线路径。你在制作 Web 动画时，可以遵循以下一些关键要点，使用弧线路径使动画看起来更加自然、流畅和真实：

• 运动的自然性：在现实生活中，大多数物体和角色的运动都会遵循曲线或弧线路径。这是因为物体通常以某种方式绕着一个中心点或轴心移动，而不是沿着直线运动。使用弧线路径可以增加动画的自然感。
• 流畅性：弧线路径有助于动画的流畅性。当物体或角色的运动遵循弧线时，它们的速度在起始和结束点处会逐渐加速或减速，而不是突然改变方向。这增加了动画的连续性和流畅性。
• 动态效果：弧线路径可以增加动画的动态感。它使观众能够更好地感受到物体或角色的运动轨迹，从而提高了动画的吸引力和情感表达。
• 角色动作：在角色动画中，特别是在表现手部、头部或身体的运动时，弧线路径的应用非常重要。这可以增加角色的表现力和情感表达。
• 3D 动画：在 3D 动画制作中，弧线路径的应用也非常常见。它有助于模拟现实世界中的物体运动，使 3D 动画看起来更真实。

08：附属动作（Secondary Action）

Demo 地址：https://codepen.io/airen/full/KKbjOjz

附属动作（Secondary Action）原则强调在动画中添加额外的次要动作，以增强动画的真实感和表现力。简单地说，附属动作是主要动作的补充，可以为角色的表现增添深度。附属动作通常是与主要动作相辅相成的，但不应该分散用户的注意力。

另外，附属动作有助于传达主要动作已经发生或正在发生。在人机交互中，反馈的作用是让用户知道所期望的动作已经发生。反馈是数字界面中可接受性的关键组成部分。有趣的是，没有反馈也是表明没有动作发生的反馈。良好的反馈是信息丰富的，与动作相关，与动作的含义相关，并产生闭合感。

在 Web 中，你可以使用附属动作来引发用户的情感。想象一下，用户已经提交了一个非常长的表单。你可以为提交按钮添加一个辅助的庆祝动画（比如，纸屑），以祝贺用户完成了一个耗时的任务。这样的辅助动作可以增强用户体验并营造愉快的氛围。

Demo 地址：https://codepen.io/airen/full/poqMzZW

Twitter 卡片上点赞的动画效果就是附属动作原则在 Web 动画中应用的典型案例之一：

Demo 地址：https://codepen.io/airen/full/eYbqOWe

你还可以将附属动作原则用于以下情境中：

• 微交互：在 Web 界面中，微交互是一个常见的附加动作示例。例如，在鼠标悬停在按钮上时，按钮可能会微微变色或产生微小的动画效果，以强调按钮的可点击性。
• 加载动画：当 Web 页面正在加载内容时，可以显示加载动画或进度指示器，这是附加动作的一种形式，用于告知用户操作正在进行中。
• 提示框：当用户与 Web 应用程序进行互动时，弹出的提示框通常包括附加动作，如淡入淡出的动画效果，以提供用户友好的反馈和指导。

附加动作原则在 Web 设计中都起着重要作用，它们可以增强交流、提供反馈和丰富用户体验。在 Web 设计中，特别是在微交互和用户界面设计中，附加动作原则有助于使用户界面更具吸引力和易于理解。你在 Web 中制作动画时，可以根据以下要点将附属动作原则用于动画上：

• 增加真实感：附属动作可以使动画更加真实，因为在现实生活中，动作往往伴随着其他次要动作。例如，一个角色说话时，他们的手部动作、表情和眨眼等次要动作可以增加角色的表现力和真实感。
• 情感表达：附属动作可以用于表达角色的情感和意图。它可以强调角色的情感状态，例如当一个角色生气时，其手部可能会做出生气的动作，这可以通过附属动作来表现。
• 补充主要动作：附属动作通常应该与主要动作相一致，以补充和增强主要动作。它们可以使动画更加生动、丰富和吸引人。
• 不分散注意力：虽然附属动作是次要的，但它们不应该分散用户的注意力。它们应该与主要动作协调一致，以确保观众能够关注动画的重点。
• 动态平衡：在某些情况下，附属动作可以用于平衡动画中的运动和重点。它可以使动画更加和谐和均衡。

09：时间控制（Timing）

Demo 地址：https://codepen.io/airen/full/ExGqaEW

时间控制是所有界面动画的基本要素。时间控制和缓动功能一起在动画编排中发挥着重要作用。时间控制强调在动画中，物体和角色的运动速度和节奏，它可以增加动作的流畅性，引导用户的注意力并传达可接受性。然而，如果时间控制不正确，过长的过渡会让用户等待时间太长；另一方面，如果动画过快，用户可能会错过一些重要信息。正确地控制动画元素的时间可以帮助用户感知反馈并顺利完成任务，甚至在这个过程中使他们感到愉悦。

在 Web 动画中，你可以使用时间控制来向用户提供信息。例如，你可以将文件加载动画的速度与文件的大小关联起来。这将让用户知道这个过程将需要多长时间以及原因，因此如果上传的是一个大文件，上传过程会较慢，而如果是一个小文件，上传过程会快得多。

通常，大多数 Web 动画的时长在 200ms ~ 600ms 之间。你可以参考 Material Design，该设计语言有对每种类型的动画时长进行了很好的解释。例如下面这个卡片轮播的动画效果，每张卡片延迟 3s 开始向上滚动：

Demo 地址：https://codepen.io/airen/full/OJrKPKe

我们可以根据以下要点在制作动画中使用时间控制原则：

• 节奏和速度：时间控制涉及到决定动画中各个部分的运动速度和节奏。不同的速度和节奏可以用于不同的情感和效果。例如，快速的动作可能会传达兴奋和紧张，而慢速的动作可能会传达冷静和放松。
• 情感表达：时间控制有助于表达角色的情感。通过控制动作的速度和持续时间，动画师可以让角色看起来愉快、难过、紧张或放松。正确的时间控制可以增强情感的传达。
• 喜剧效果：在喜剧动画中，时间控制是创造笑声和喜剧效果的关键。正确的定时和速度可以让笑点更加突出和有趣。
• 运动的连贯性：时间控制也涉及到确保动画中的运动是连贯和自然的。物体和角色的运动应该按照一定的时间表来进行，以保持动画的真实感。
• 动态感：通过改变时间控制，动画师可以创造出动画中的动态感。这有助于用户更好地理解动画中发生的事情。

时间控制是动画制作中的重要原则，它可以改变动画的节奏、情感和视觉效果。动画师必须具有良好的时间感和创意，以确保动画的时间控制与情感表达和故事情节相一致。通过精确的时间控制，动画可以更好地传达情感和吸引观众。

10：夸张（Exaggeration）

Demo 地址：https://codepen.io/airen/full/KKbOpym

喜剧演员通常使用夸张的表情、动作和语言来引发笑声。这种夸张有助于传达幽默和夸张的情感。因此，如果我们借鉴这个类比，可以发现在 Web 设计中，夸张用于传达屏幕上最重要的元素。这引入了人机交互（HCI）中的两个重要概念：可见性和可查找性。界面中的所有元素可能是可见的，但设计元素的方式至关重要，以便最重要的操作易于查找。例如，主要按钮被设计成比次要按钮更加突出。有选择地在某些 UI 元素上应用夸张，以增强视觉效果、情感表达力和吸引力。夸张原则是一种强调性的技巧，可以引导用户的注意力，并传达兴奋、期待或被奖励的情感。

在 Web 动画设计中，你可以夸张某些元素，以向用户清楚地展示他们应该如何与界面互动。例如，用户提交表单或执行某些操作后，网站可以使用夸张的反馈动画，如成功提交时的火箭升空，以传达成功和满足感。

Demo 地址：https://codepen.io/airen/full/oNJKjXv

一个好的动画效果对于用户来说应该是无形的。然而，如果夸张过度，可能会让用户感到烦恼。如果发生这种情况，考虑使动画更加细微。

夸张是一种强调性的技巧，主要用于增加动画的生动性和戏剧性。我们在制作 Web 动画时，可以根据下面这些关键要点来应用夸张原则：

• 强调特征：夸张可以用来强调物体或角色的特征。例如，一个笑话性角色可以夸大其面部特征，如巨大的嘴巴或眼睛，以增加笑点。
• 情感表达：夸张可以用于增强角色的情感表达。通过夸大表情、手势和动作，动画师可以使用户更容易理解角色的情感状态。
• 视觉效果：夸张可以增加动画的视觉效果。它可以使动画更具吸引力和独特性，吸引用户的目光。
• 动态感：夸张也有助于创造动画中的动态感。通过夸大物体的运动或物理特性，动画师可以使动画更具生动性。
• 喜剧效果：在喜剧动画中，夸张是创造笑声和喜剧效果的关键。通过夸大角色的行为和特征，可以增加笑点和娱乐价值。

虽然夸张是一种重要的动画技巧，但需要谨慎使用。夸张应该在适当的程度上，以不分散观众的注意力或破坏动画的连贯性。夸张的应用需要动画师的判断和创意，以确保它增加了动画的吸引力和表现力。

11：立体造型（Solid Drawing）

Demo 地址：https://codepen.io/airen/full/WNLVrJV

在计算机生成图像（CGI）之前，经典动画师会尝试绘制对象和角色，并赋予它们三维属性，如形状、重量、高光和阴影，以使它们看起来自然和逼真。在人机交互（HCI）中，我们使用拟物化（Skeuomorphism）这个术语，意思是从现实物体中汲取灵感，然后应用到界面设计中的对象上。从 GUI 的早期，界面一直在使用高光、阴影和纹理来模仿现实世界中的物体，比如用于按钮的斜角和浮雕效果，或者用于便签应用的页面纹理。随着时间的推移，界面设计逐渐从这种形式的表现方式转向了极简主义设计（Flat Design），然后再次回到了现在被称为“Neumorphism”的设计风格。

在未来的增强现实（AR）和虚拟实现（VR）应用中，将更需要密切模拟光线、阴影和环境的真实世界属性，以实现从真实世界到增强现实元素的无缝过渡。无论流行的趋势如何，利用光线、阴影、形状和阴影的真实世界属性可以使界面更具沉浸感，并具有物理可感性（显示用户应该做什么的感知特征）。

理解立体造型的基础原则，将有助于你设计更成功的动画。

你可以通过添加阴影、高光和投影来创建立体感，使元素看起来像是浮在页面上，使用户能够更好地理解其层次结构。

Demo 地址：https://codepen.io/airen/full/wvRVEBX （来源于 @Nick）

虽然 Web 动画通常是 2D 的，但通过使用 3D 模拟技术，可以在 Web 中创建具有深度和透视感的场景：

Demo 地址：https://codepen.io/airen/full/zYygJBv

立体造型强调在动画中要以三维的方式来表现物体和角色，以使其看起来更具立体感和质感。立体造型有助于增强动画的真实感和视觉吸引力。以下是立体造型原则的一些关键要点：

• 三维感：立体造型要求动画师考虑物体和角色的三维形状和结构。这包括了物体的深度、体积和质地。通过精确的立体造型，物体和角色看起来更加真实和立体。
• 透视和比例：立体造型涉及到正确的透视和比例。物体远近、大小和相对位置的正确表达对于传达三维感非常重要。
• 光影和阴影：在立体造型中，动画师需要考虑光影和阴影的表现，以增强物体和角色的体积感。光影效果可以使物体看起来更有立体感。
• 动态效果：立体造型也适用于动态效果，如角色的运动和姿势。通过正确的立体造型，动画师可以使运动更具体、流畅和有力。
• 背景和环境：不仅限于角色，立体造型原则也适用于动画中的背景和环境。这可以使整个动画场景看起来更具深度和现实感。

立体造型是动画制作中的关键原则，它有助于提高动画的视觉质量和真实感。通过准确的立体造型，动画师可以创造出具有立体感和深度感的角色和场景，使动画更具吸引力和视觉效果。这一原则强调了在动画中模拟三维世界的必要性，以创造出更具真实感的动画作品。

12：吸引力（Appeal）

Demo 地址：https://codepen.io/airen/full/abPeaVB

动画需要吸引用户。虽然没有确切的数学公式来做到这一点，但任何动画都应该引起用户的注意并产生吸引力。“吸引力”（Appeal）动画原则强调在动画中要创造出具有吸引力的角色和设计，以吸引用户的注意并使他们对动画产生兴趣。吸引力是一个广泛的概念，包括了角色设计、动态效果和情感表达等多个方面。

毫无疑问，UI 设计需要是功能性的；然而，它不应被视为美学的二者对立。在 UI 设计中，吸引力至关重要，因为许多产品将与你的产品竞争。你可以使用动画来定义产品的个性，与用户建立情感联系。你可以在以下几个情境中使用吸引力（Appeal）动画原则：

• 品牌建设和标志性动画： 使用吸引力动画来增强品牌形象和标志，以吸引用户对你的品牌产生兴趣。
• 用户导引： 利用吸引力动画来引导用户完成特定任务或浏览网站内容，从而提供更好的用户体验。
• 用户互动： 创建有吸引力的互动元素，如按钮、图标或其他界面元素，以鼓励用户与你的应用或网站进行互动。
• 用户反馈： 使用吸引力动画来提供用户反馈，例如在成功提交表单时添加愉悦的动画效果。
• 用户引导和教育： 利用吸引力动画来向用户传达信息、教育他们如何使用您的产品或展示复杂概念。
• 交互性游戏： 如果你的网站或应用包含游戏元素，吸引力动画可以增加游戏性和用户参与度。
• 用户情感连接： 利用吸引力动画来建立情感连接，使用户更深刻地理解和体验你的产品或服务。

Demo 地址：https://codepen.io/airen/full/bGOXxmJ

你可以根据下面这些要点将吸引力原则用于 Web 动画创作中：

• 角色设计：吸引力开始于角色的设计。角色应该具有独特性和魅力，使用户愿意与他们产生情感共鸣。这包括外观、特征、服装和表情等方面。
• 情感表达：吸引力还包括了角色的情感表达。用户应该能够理解和共感角色的情感，从而与他们建立联系。
• 动态效果：吸引力可以通过动画中的动态效果来实现。动作和动作应该看起来流畅、有趣和引人注目，以吸引用户的注意。
• 故事情节：吸引力也适用于动画的故事情节。一个吸引人的故事情节可以使用户愿意关注和投入。
• 符合受众：吸引力还需要考虑受众的需求和兴趣。动画应该吸引目标受众，使他们感到兴奋和满足。

吸引力是一个综合性的原则，它涉及到动画中的多个方面，包括设计、动态、情感和故事情节。通过创造出具有吸引力的角色和情节，动画可以更好地吸引观众的注意，使他们对动画产生兴趣和情感共鸣。这一原则在动画制作中是非常重要的，因为吸引力可以决定动画的成功和影响力。

小结

掌握迪士尼的 12 大动画原则是一场旅程。

掌握这些原则是一个需要时间、实践和奉献的旅程。这些原则不仅对传统手绘动画有价值，对于当代的 Web 动画技术也同样适用。

无论你是经验丰富的动画师还是刚刚开始，应用这些原则将增强你动画的质量并吸引你的观众。记住要尝试、从成功和失败中学习，最重要的是通过动画让你的故事生动有趣。