设计一个考虑到运动和过渡的用户界面（UI）是改善下一个项目的用户体验 (UX) 的绝佳方法。在注意力短暂的时代，动画微交互是提高用户参与度的理想方法。这就是 爱彼迎（Airbnb）推出 Lottie 的原因，这是一个“让向原生应用程序添加动画变得轻而易举的新开源平台”。
像 Lottie 这样的项目展示了在为应用程序和网站设计改进的用户体验时，将运动作为一种新组件使用的重要性日益增加。
在本文中，你将学习如何使用 Principle for Mac 创建出色的用户界面动画。阅读本文后，你将能够将无趣的静态模型转换为交互式原型，以更好地展示你的作品。你可以使用在这里学到的一切来改进你的下一个用户界面宣传和 Dribbble 照片。
让我们开始吧。
基本界面总结
如果你习惯了 Mac OS，那么 Principle 中的界面会显得极为相似。它分为三个部分：侧边栏、显示画板的设计区域以及可以调整大小和移动的预览窗口。
了解基本动画原理
动画原理是相当基础的。你不需要任何动画方面的经验即可开始。实际上，Principle 处理了大部分繁重的工作，让你专注于触发动画的内容（例如，按钮、链接或滚动事件）、动画如何开始以及如何结束。
这是你将在整个教程中遇到的短语的快速词汇表，可帮助你跟上进度。
部件（componment）：
一个部件甚至一个动画都可能包含在一个组件中，这是一种分组。在 Photoshop 中，它与“智能对象”相同，而在 Illustrator 中，它是“符号”。触发器（
Trigger）：可以通过多种动作来启动动画，例如点击、滚动、悬停等。通过选择 Principle 内部的任何元素并单击其右侧显示的闪电符号，可以在 Principle 中创建触发器.转换（
Transition）： 向左或向右滑动以改变一个画板与另一个画板的状态的行为。缓动效果（
Easing effect）： 过渡的平滑程度取决于动画的开始和结束方式。
A. 触发器和转换
使用 Principle 制作动画的第一步是在元素（例如按钮或链接）上创建触发器（启动动画的行为或动作）并更改其初始和/或结束状态（即其从动画开始到结束的位置或比例）。
定义一个初始状态：
在动画开始之前你的用户界面组件如何出现。定义触发器：
选择交互元素和将启动动画的动作。定义最终状态：
动画结束时组件将如何显示。
配置动画后，你可以在预览窗口中对其进行预览。
B. 动画长度和效果缓
动原则默认生成半秒动画。这并不总是足以完全注意到过渡影响。通过这三个步骤，你可以从动画面板修改长度和“缓动”效果。
打开动画面板：
选择连接两个画板的黑色箭头，然后单击顶部栏中的“动画（Animate）”按钮。延长动画
长度：移动蓝线的末端。应用缓动：
要平滑过渡，请选择所有菱形点，然后从下拉菜单中选择“同时缓动（Ease Both）”。
你可以期待什么你可以
在示例应用程序中选择一种颜色来查看谷歌的 Material Design 调色板，然后你将获得更多信息。你将设计一个菜单滑块、几个具有流体视差效果的页面转换和一个加载动画。
将概念文件开发为原理
- 通过移动画板来准备自然过渡：例如，从右侧滑动的屏幕应该接触到它在动画上替换的屏幕的右边框。
- 准备好 Sketch 文件后，打开 Principle，创建一个 360×640 比例的新项目，然后单击“导入（Import）”选项。
屏幕标题被删除以允许无缝滚动
为了在页面之间进行平滑过渡，请消除除第一个标题之外的所有内容。标题最初旨在突出应用程序的风格和感觉。标题只会出现在“欢迎”屏幕上，并将作为带有菜单和应用程序标题的粘性栏。
为加载动画制作
- 形状 在选择加载形状组后，单击“创建组件（Create Component）”以创建具有加载形状和文本的组件。为第一个符号中包含的文本创建一个组件；稍后，我们将单独为文本设置动画。
- 只需选择分组表格。要复制画板，请选择“点击（Tap）”触发器并将其拖放到原始画板上。
- 第二个画板以完成状态显示动画，并且可以使用角度属性旋转组。要获得更有趣的效果，请给“填充（fill）”和“轮廓（outline）”不同的角度值。
- 将时间更改为 1.00 秒左右，选择画板之间的箭头，单击“动画”以访问“动画面板（animation panel）”，然后将端点滑动到该值。
为加载动画制作文本
- 首先制作上滑动画。选择后将“点击“触发事件应用到按钮窗体。将新画板上的所有屏幕调整 640 像素（等于当前画板高度）。
- 让我们从制作视差开始。返回上一个画板，调整欢迎屏幕上文本和几何元素的 Y 值。
- 最后，增加动画面板中的时间范围，可能是 1 秒。选择所有菱形点后，单击任意一条蓝线，将“同时缓动”效果应用到时间轴。
- 在动画预览中移动形状，直到你认为视差效果看起来不错。
视差效果的欢迎页面
- 将一个箭头从加载组件拖动到画板上的任何位置，以在选择它后应用“点击”触发器。
- 选择每个屏幕（在主组中），然后将其提高 640 像素。此操作显示欢迎屏幕。
- 恢复到以前的画板并将“欢迎”屏幕的形状向下重新定位。这会产生视差效果，这是一种异步滑动效果。
- 为动画面板中的过渡添加更多时间以更改动画：在选择画板之间的箭头后，将蓝线上的端点拖动到大约 1 秒。
视差效果创建 – 关于页面
- 在选择向下箭头按钮后，通过将箭头从向下箭头按钮拖动到画板上的任何位置来应用“点击”触发器（确保首先选择整个组）。
- 选择每个屏幕（来自主组）并将其全部提升 640 像素。完成此步骤后，将出现“关于（About）”屏幕。
- 恢复到以前的画板并将“关于”屏幕的形状重新定位到较低的位置。这会产生视差效果，这是一种异步滑动效果。
颜色页面：创建视差效果
- 通过将“点击”触发器应用到向下箭头按钮来创建一个新的画板（小心先选择完整的组）。
- 选择新画板上的每个屏幕，然后将其提高 640 像素。
- 降低前面画板上的颜色和文本。为了创造更加动态的效果，请务必使用不同的位置，因为你将物品移动得越低，它滑回所需的时间就越长。
- 然后应该扩展动画，并且动画面板中的所有蓝色时间线都应该应用“同时缓动”。
通过从侧面滑动页面来选择彩色页面
- “颜色（Colours）”屏幕上的“加载更多（Load More）”按钮应该应用了“点击”触发器。
- 在新画板上将“颜色”和“选择（Selection）”内容向左移动 360 像素（画板宽度）
- 返回到先前的画板并重新定位屏幕内容，使其面向右侧而不是左侧。
- 请记住，当屏幕从 0% 滑入到 100% 时，你还可以设置屏幕不透明度的动画。
- 要调整过渡效果，请尝试动画长度和缓动效果。
菜单图标动画
- 需要注意的是，原始 Sketch 文件中具有效果（例如阴影）的每个图层和形状都作为图片导入到 Principle 中。如果你需要在 Principle 中更改形状，请尝试等到导入之后再应用任何特殊效果。
- 为了制作汉堡菜单图标，绘制三个薄矩形并将它们连接在一起，使用当前符号作为参考。你现在可以移除或隐藏之前的菜单图标。
- 通过选择它，将“点击”触发器应用于新构建的图标。
- 旋转新画板上菜单图标上的顶部和底部矩形，将它们居中，并将中间矩形的不透明度设为 0%。
- 使用“点击”触发器测试修改后的菜单图标和预览画板之间的连接，以查看你刚刚制作的动画。
菜单滑块效果：如何创建它
- 在结束状态画板上向右移动屏幕，直到菜单链接位于关闭菜单符号的左侧。
- 除了菜单文本和浅灰色背景，选择“颜色”文件夹中的所有内容并将不透明度降低到 25%。网站内容将在整个动画中逐渐消失，为菜单腾出空间。
- 要产生无缝的印象，请延长动画的长度并返回之前的画板，你可以在其中轻轻地重新定位菜单项。
移动到联系人界面
- 将“点击”触发器应用到打开菜单上的“联系我们（Contact Us）”按钮。
- 在新生成的画板上将所有屏幕向上移动 640 像素。
- 返回预览画板并将组件从“表单（Form）”页面重新分配到底部。
- 要产生视差效果，请以不同的 Y 值移动项目。
- 最后但同样重要的是，选择连接画板的箭头，延长动画，然后给蓝色时间线“同时缓动”。
最后，感谢页面
- 在“发送消息（send message）”按钮上，应用“点击”触发器。
- 新画板上的显示都应该向上移动 640 像素。
- 之后，在预览画板上从“确认（Confirmation）”页面向下滑动组件。
- 要获得更动态的外观，请尝试使用彩色图标的大小和旋转。
- 为了更好地理解过渡影响，请务必延长动画。
简单的添加原则动画
Principle 是一款出色的工具，可以让你的用户界面交互概念栩栩如生。
该程序的用户界面已针对 Sketch 文件进行了优化，并且与 Mac 计算机兼容。
大多数动画和过渡效果都是使用 Principle 自动完成的。你所要做的就是在一个画板上的表单中添加一个触发器，并在最终画板上为你希望设置动画的组件更新任何属性。
如果你有任何疑问，可以在此处发布。
