使用原理和草图的 UI 动画分步指南

已发表: 2022-03-11

设计一个考虑到动画和过渡的 UI 界面是为您的下一个应用程序规划更好的用户体验 (UX) 的好方法。在注意力短暂的世界中，动画微交互是激发用户参与度的完美方式。这就是 Airbnb 最近推出 Lottie 的原因——它的“新的开源工具，可以轻松地将动画添加到原生应用程序中”。

像 Lottie 这样的项目表明，添加动作作为一种新元素来为应用程序和网站打造增强的用户体验越来越重要。

在本教程中，您将学习使用 Principle for Mac 的有效 UI 动画技术。阅读完本指南后，您将能够将枯燥和静态的模型变成交互式原型，以更好地展示您的作品。你可以应用你在这里学到的东西来改进你的下一个 UI 音高和 Dribbble 投篮。

让我们开始吧。

下载这些免费资源以跟随。

您只需要 Principle 和 Sketch 应用程序即可跟随。如果您还没有它们，您可以使用下面的链接下载免费试用版。

在此处下载免费的 Principle 试用版。
在此处下载免费的 Sketch 试用版。
在此处下载免费的教程源文件。

原理接口概述

如果您习惯了 Mac OS，那么 Principle 的界面看起来会非常熟悉。它包含三个主要部分：侧边栏、显示画板的设计区域以及可以调整大小和移动的预览窗口。

原则上理解基本动画概念

使用 Principle 制作动画相对简单。您无需具备动画背景即可开始使用。事实上，大部分繁重的工作都是由 Principle 自动完成的，您只需要关注动画的开始内容（即按钮、链接、滚动事件）、动画如何开始以及如何结束。

为了帮助您更好地跟进，这里有一个简短的术语词典，您将在整个指南中看到。

组件：组件是一种有助于包含元素甚至动画的分组。它相当于 Photoshop 中的“智能对象”或 Illustrator 中的“符号”。
触发器：一种启动动画的方式 - 即通过点击、滚动、悬停等。原则上，可以通过选择 Principle 内的任何元素并单击出现在其右侧的带有闪电图标的图标来定义触发器。
过渡：从一个画板到另一个画板的状态变化，即向左或向右滑动。
缓动效果：过渡的平滑程度取决于动画的开始和结束方式。

A. 触发和过渡

使用 Principle 制作动画的第一步是在元素（即按钮或链接）上设置触发器（启动动画的行为或动作），并更改其初始和/或最终状态（即其位置或比例）从动画的开始到结束）。

定义一个初始状态：你的 UI 元素在动画开始之前的样子。
定义触发器：通过选择交互元素以及激活动画的动作。
定义最终状态：动画结束时元素的显示方式。

设置好动画后，您可以在预览窗口中进行预览。

B. 动画长度和缓动效果

默认情况下，Principle 创建半秒动画。有时这还不足以详细查看过渡效果。您可以按照以下三个步骤从动画面板更改持续时间和“缓动”效果。

打开动画面板：选择两个画板之间的黑色箭头，然后单击顶部栏上的“动画”按钮。
延长动画长度：移动蓝线的端点。
应用缓动：选择所有菱形点，然后从下拉列表中选择“同时缓动”以平滑过渡。

你会得到什么

该视频向您展示了完成本教程后您将能够创建的内容。该演示应用展示了 Google 的 Material Design 调色板，并在您选择颜色后为您提供更多详细信息。您将创建一个加载动画、一些具有平滑视差效果的页面过渡和一个菜单滑块。

确保您确实在此处下载了免费的教程源文件。

让我们开始吧。

从草图文件到原理

移动画板以准备它们之间的自然过渡：例如，从右侧滑动的屏幕应该在动画上触摸它正在替换的屏幕的右边缘。
设置好 Sketch 文件后，跳转到 Principle，创建一个匹配 360x640 比例的空白文档，然后单击“导入”按钮。

删除屏幕标题以实现无缝滚动

要在页面之间创建无缝过渡，您可以删除除第一个之外的每个标题。最初添加标题只是为了展示应用程序的外观。您只会在“欢迎”屏幕上保留标题，它将作为菜单和应用程序标题的粘性栏。

创建加载动画 - 形状

选择加载形状组，然后单击包含加载形状和文本的“创建组件”。为第一个符号中的文本创建一个组件；我们将在之后单独为文本设置动画。
选择分组的形状。选择“点击”触发器，然后拖放到同一画板的顶部以创建副本。
第二个画板代表动画的最终状态，您可以使用角度属性旋转组。为“填充”和“轮廓”赋予不同的角度值，以创建更有趣的效果。
最后，选择画板之间的箭头，单击“动画”以打开“动画面板”，然后通过将端点滑动到大约 1.00 秒来更改持续时间。

创建加载动画 - 文本

首先，创建上滑动画。选择按钮形状，并应用“Tap”触发事件。在新画板中，将所有屏幕向上移动 640 像素（等于当前画板高度）。
现在，让我们创建视差。转到上一个画板，在欢迎屏幕上，以不同的 Y 值向下移动几何形状和文本。
最后，在动画面板中，延长时间线，比如 1s。将“Ease Both”效果应用到时间线（确保您已选择所有菱形点，然后单击任何蓝线以将效果应用到所有点）。
预览您的动画并四处移动形状，直到视差效果看起来不错。

创建视差效果 - 欢迎页面

选择加载组件并通过在画板中的任意位置拖动箭头来应用“Tap”触发器。
选择所有屏幕（从主组中），并将其向上移动 640 像素。此步骤将显示欢迎屏幕。
返回上一个画板，将“欢迎”屏幕上的形状向下移动。这会创建称为视差的异步滑动效果。
通过在动画面板内为过渡添加时间来调整动画：选择画板之间的箭头，然后将蓝线上的端点拖动到大约 1 秒。

创建视差效果 - 关于页面

选择向下箭头按钮（确保选择了整个组），然后通过从画板中的任意位置拖动箭头来应用“Tap”触发器。
选择所有屏幕（从主组中），并将所有内容向上移动 640 像素。此步骤会显示“关于”屏幕。
返回上一个画板，将“关于”屏幕上的形状向下移动。这会创建称为视差的异步滑动效果。

创建视差效果 - 颜色页面

将“Tap”触发器应用到向下箭头按钮（确保选择整个组），这将创建一个新的画板。
在新的画板上，选择所有屏幕并将它们向上移动 640 像素。
在上一个画板上，向下移动颜色和文本。请注意，您将对象移动得越低，向上滑动所需的时间就越长，因此请确保使用不同的位置来创建更动态的效果。
最后，通过扩展动画，并在动画面板内的所有蓝色时间线上应用“缓动”。

从侧面滑动页面 - 颜色选择页面

将“点击”触发器应用于“颜色”屏幕上的“加载更多”按钮。
在新画板中，将“颜色”和“选择”内容向左移动 360 像素（画板宽度）
返回上一个画板并将屏幕内容向相反方向移动 - 向右。
请注意，您还可以设置屏幕不透明度从 0% 滑入 100% 的动画。
使用动画持续时间和缓动效果来调整过渡效果。

动画菜单图标

请注意，任何来自 Sketch 原始文件的效果（如阴影）的图层和形状都会作为图像导入到 Principle。如果您需要在 Principle 中编辑形状，请尽量在导入之前不要添加任何特殊效果。
话虽如此，使用现有图标作为指导，绘制三个细矩形，并将它们分组以创建汉堡菜单图标。现在，您可以删除或隐藏之前的菜单图标。
选择新创建的图标，并对其应用“点击”触发器。
在新的画板中，旋转菜单图标的顶部和底部矩形，确保它们居中对齐，并将中间的不透明度设为零。
要查看您刚刚创建的动画，请使用“Tap”触发器将更改的菜单图标链接回预览画板，然后对其进行测试。