设计带有动画和过渡的UI界面是为你的下一个应用程序规划更好的用户体验(UX)的好方法. 动画微交互是刺激用户粘性的最佳方式, 在一个注意力短暂的世界里. 这就是Airbnb最近推出Lottie-its的原因 “新的开源工具，可以轻松地为本地应用程序添加动画.”

像Lottie这样的项目显示了添加动作作为制作新元素的重要性 增强用户体验 适用于应用程序和网站.

在本教程中，您将学习有效 UI动画技术 Mac使用原理. 在你看完这个指南之后, 将能够将沉闷的静态模型转变为交互式原型，以更好地展示您的工作. 你可以应用你在这里学到的东西来提高你的下一个UI投球和运球投篮.

让我们开始吧.

下载这些免费资源来学习

你只需要原理和素描应用程序跟随. 如果你还没有，你可以通过下面的链接下载一个免费的试用版.

• 下载免费试用版 在这里.

• 下载免费的Sketch试用版 在这里.

• 下载免费的教程源文件 在这里.

原理接口概述

如果你习惯了Mac OS，那么Principle的界面看起来会很熟悉. 它有三个主要部分:侧边栏, 显示画板的设计区域, 预览窗口可以调整大小和移动.

原则上理解基本的动画概念

用Principle制作动画相对简单. 你不需要有动画背景开始. 事实上, 根据原则，大多数繁重的工作都是自动化的, 你只需要关注是什么开始了一个动画(i.e. 一个按钮，一个链接，一个滚动事件)，动画如何开始，以及如何结束.

为了帮助你更好地跟上，这里有一个简短的术语词汇，你将在整个指南中看到.

• 组件: 组件是一种分组，可以帮助包含元素甚至动画. 这相当于Photoshop中的“智能对象”或Illustrator中的“符号”.
• 触发: 一种开始动画的方法——i.e. 通过点击、滚动、悬停等方式. 原则上, 可以通过选择Principle中的任何元素并单击其右侧出现的带有闪电图标的图标来定义触发器.
• 转型: 从一个画板到另一个画板的状态变化.e. 向左或向右滑动.
• 宽松的效果: 基于动画开始和结束方式的过渡平滑程度.

A. 触发和转换

用Principle制作动画的第一步是在元素上设置触发器(启动动画的行为或动作).e. 按钮或链接)，以及改变其初始和/或最终状态(例如.e. 它的位置或从动画开始到结束的比例).

1. 定义一个初始状态: 你的UI元素在动画开始之前是什么样子的.
2. 定义触发器: 通过选择交互元素和哪个动作激活动画.
3. 定义最终状态: 元素如何在动画结束时显示.

一旦你设置了动画，你就可以在预览窗口中预览它.

B. 动画长度和缓动效果

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

1. 打开动画面板: 选择两个画板之间的黑色箭头, 然后点击顶部栏上的“动画”按钮.
2. 延长动画长度: 移动蓝线的端点.
3. 运用宽松政策: 选择所有菱形点, 然后从下拉菜单中选择“Ease Both”来平滑过渡.

你会得到什么?

本视频向您展示了完成本教程后您将能够创建的内容. 这款演示应用展示了谷歌的Material 设计调色板，一旦你选择了一种颜色，它就会给你更多的细节. 您将创建一个加载动画, 一些页面过渡具有平滑的视差效果, 还有一个菜单滑块.

确保下载了免费的教程源文件 在这里.

让我们开始吧.

从草图文件到原则

1. 移动画板以准备它们之间的自然过渡:例如, 从右边滑动的屏幕应该触碰到它要替换的屏幕的右边缘.
2. 一旦你的草图文件设置好了, 跳到原则上来, 创建一个匹配360x640比例的空白文档, 点击“导入”按钮.

删除屏幕标题无缝滚动

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

创建加载动画:形状

1. 选择加载形状组, 然后点击“创建包含加载形状和文本的组件”. Create a Component for the text within the first symbol; we’ll animate the text separately right after.
2. 选择分组形状. 选择“Tap”触发器，并在同一画板上拖放以创建副本.
3. 第二个画板表示动画的最终状态, 你可以用角度属性旋转这个组. 给“填充”和“轮廓”赋予不同的角度值，以创造更有趣的效果.
4. 完成, 选择画板之间的箭头, 点击“动画”打开“动画面板”,，并通过将端点滑动到1左右来改变持续时间.00 s.

创建加载动画:文本

1. 首先，创建滑动动画. 选择按钮形状，并应用" Tap "触发事件. 在新的画板中，将所有屏幕向上移动640像素(等于当前画板的高度).
2. 现在，我们来创建视差. 转到上一个画板, 在欢迎屏幕上, 以不同的Y值向下移动几何形状和文本.
3. 最后，在动画面板中，将时间轴延长至15秒. 在时间轴上添加“Both Ease”效果(确保你已经选择了所有菱形点), 然后点击任意一条蓝线将效果应用到所有线上。.
4. 预览你的动画，移动形状，直到视差效果看起来不错.

创建视差效果:欢迎页面

1. 选择加载组件，并通过在画板的任何位置拖动一个箭头来应用“Tap”触发器.
2. 选择所有的屏幕(从主组中)，向上移动640像素. 这一步将显示Welcome屏幕.
3. 回到之前的画板，向下移动“Welcome”屏幕上的形状. 这创造了称为视差的异步滑动效果.
4. 通过在动画面板中添加过渡时间来调整动画:选择画板之间的箭头, 然后将蓝线上的端点拖到1s左右.

创建视差效果:关于页面

1. 选择向下箭头按钮(确保选择整个组), 然后通过在画板的任何位置拖动箭头来应用“点击”触发器.
2. 选择所有的屏幕(从主组)，并移动所有的640像素. 这一步将显示关于屏幕.
3. 回到之前的画板，向下移动“关于”屏幕上的形状. 这创造了称为视差的异步滑动效果.

创建视差效果:颜色页面

1. 点击下箭头按钮(确保你选择了整个组), 这会创建一个新的画板.
2. 在新的画板上，选择所有的屏幕并向上移动640像素.
3. 在上一个画板上，向下移动颜色和文本. 请注意，您移动的对象越低, 滑回去的时间就越长, 所以一定要使用不同的位置来创造一个更动态的效果.
4. 最后, 通过扩展动画, 并在动画面板内的所有蓝色时间轴上应用“ease both”.

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

1. 在“颜色”屏幕上的“加载更多”按钮上应用一个“点击”触发器.
2. 在新的画板中, 将“colors”和“Selection”内容向左移动360像素(画板宽度)
3. 回到之前的画板并向相反方向移动屏幕内容-右.
4. 请注意，您还可以将屏幕的不透明度从0%滑动到100%.
5. 播放动画持续时间和舒缓效果来调整过渡效果.

动画菜单图标

1. 注意，任何图层和形状的效果(如阴影)从草图原始文件导入到原则作为一个图像. 如果你需要在原理中编辑形状, 在导入之前尽量不要添加任何特殊效果.
2. 话虽如此, 使用现有的图标作为指导, 画三个细矩形, 并将它们分组以创建汉堡包菜单图标. 现在，您可以删除或隐藏上一个菜单图标.
3. 选择新创建的图标，并对其应用“点击”触发器.
4. 在新的画板中, 旋转菜单图标的顶部和底部矩形, 确保它们在中间对齐, 中间的图层不透明度为0.
5. 来查看您刚刚创建的动画, 使用“点击”触发器将更改后的菜单图标链接回预览画板, 然后测试一下.

创建菜单滑块效果

1. 在最终状态画板上, 将屏幕向右移动，直到菜单链接与关闭菜单图标的左侧对齐.
2. 选择“颜色”文件夹内的所有内容，除了菜单内容和浅灰色背景, 把不透明度调到25%. 动画将淡出页面内容以聚焦于菜单.
3. 延长动画持续时间, 然后转到前面的画板，稍微移动菜单内容，以创建一个平滑的效果.

移动到联系人界面

1. 在打开菜单上，在“联系我们”按钮上应用“点击”触发器.
2. 在新创建的画板上，将所有屏幕向上移动640像素.
3. 然后回到预览画板，把Form页面的元素往下移动.
4. 以不同的Y值移动元素来创建视差效果.
5. 最后, 选择画板之间的箭头, 延长动画长度，并对蓝色时间线应用“Ease Both”.

以感谢信结尾

1. 在“发送消息”按钮上应用“点击”触发器.
2. 在新的画板上，将所有屏幕向上移动640像素.
3. 然后回到预览画板，将“确认”页面中的元素向下移动.
4. 对彩色图标进行缩放和旋转，以创建更动态的效果.
5. 确保你增加了动画长度，以更好地感知过渡效果.

---

用原理添加动画的简单性.

Principle是一个非常棒的工具，可以让你的UI交互想法变成现实.

界面是mac友好的，并建立与草图文件无缝工作.

原理自动大多数动画和过渡效果为您. 你所需要做的就是对一个画板上的形状应用一个触发器，并改变你想在最终画板上动画的元素的任何属性.

请在下面的评论中留下任何问题. 我很乐意回答这些问题.