加载动画，有时称为throbber，用于表示数据收集或界面呈现的进度。虽然单调的进度表在以前看来是足够的，但现在未必如此。
如今，使用CSS，jQuery或简单动画GIF的动画可能会使您的界面更加生动，并个性化您的产品。
精心设计的动画可能会使您的用户在等待您的内容加载时保持娱乐。通过保持注意力，良好的加载动画有助于管理期望并增强用户体验。
在本教程中，我们将使用Sketch生成基本形状，并使用Principle快速构建简单的自定义加载动画。（这两个程序仅适用于 Mac。）您将学习如何制作在Trello，Flickr，Slack和其他网站上看到的充满活力的加载动画。
让我们进入主题吧。
慢动作卡通
使用 Sketch 绘制四个方块，每个方块的半径为 100 像素（每边 50 像素）。虽然它们旨在创造完美的圆圈，但动画的线条拉伸效果需要使用具有圆角的正方形。
排列四个数字，将他们排列出每侧间隙为150px的正方形。使用以下颜色：绿色（#35BA90）、蓝色（#69CADD）、黄色（#EBA900）和粉红色（#E20661）。
如要创建嵌套组件，请将形状导入Principle中，将它们组织起来，然后选择“创建组件”。
输入嵌套组，然后将画板旋转 15 度。然后，您可以通过旋转所选的圆圈（向后 15 度）来手动重新定位每个圆圈。这会导致在直线上的拉伸效应。
每个圆角矩形应拉伸到 295px 的长度，并且美工板应设置为“自动”。两个画板上的透明度都应降低到 75%。
应在第二个画板上使用第二个“自动”触发器。在另一侧调整新画板的大小，使每行宽 50px。
使用“自动”触发器将最后一个画板连接到第一个画板。如需在保存最终产品之前查看最终产品，请单击“返回主页”选项。
如果单击“返回主页”，则可以将主要组旋转 -30 度，使其类似于 Slack 的签名水平条。除了“缓和两者”效果（可用于柔化动画的突然停止和启动）之外，还可以在“动画”面板下调整节奏。
Trello的加载动画
在 Sketch 中绘制一个 100px 的蓝色正方形。放入尺寸为 60px x 140px 的白色像素。设置 30px 的上边距和左边距，使其与前一个正方形的左上角对齐。复制一个白色矩形，然后将其放置在正方形右侧 30 像素处，以及高度为 70 像素。
在Principle上，加载画板并使用“自动”触发器创建新的页面。只需在新艺术板上翻转白色矩形的高度（使左侧矩形高 70px，右侧矩形高 140px）。为了方便查看者进行更改，请使用“动画”面板中的“两者缓和”效果。
圆周活动
在Sketch上画一个圆圈。使用边框样式“破折号”和“间隙”，宽度为 10px 且无填充颜色。若要加强您创建的旋转效果，请为边框指定“角度渐变”色调。
启动Principle，然后单击“导入”按钮从 Sketch 导入圆圈。使用两个“自动”触发器。
如果要产生旋转效果，则必须将中央画板上圆的“角度”值设置为 360 度。然后，在左侧面板中，选择第三个圆圈并将其重命名为其他任何名称（如“复制”）。通过这样做，我们可以创造出旋转是无限长的假象。
最后，使用另一个“自动”触发器将第三个画板重新连接到第一个画板。将画板 1 和 2 之间的时间范围中的更改设置为“线性”更改。查看刚制作的动画是否在预览页面中出现。
Flickr加载动画
绘制两个同心圈，一个是蓝色的，一个是粉红色的，并将放置在相邻的位置。将它们带入Principle，并在“自动”触发器的帮助下创建一个新的画板。
通过切换圆圈的位置并应用新的“自动”触发器来创建第三个画板。更改新画板左侧面板上圆圈的图层顺序。
如要生成第四个画布，请第三次使用“自动”触发器。最后，将上一个画板中的“自动”触发器应用于第一个画板，这样可两次反转圆圈的位置。
装载类型
在Principle中启动一个空白项目，并将其标记为“LOADING”。将文字设立在美工板上垂直居中，并将其与左侧对齐。
连续五次使用“自动”设置作为触发器。让第五个面板触发器返回到第一个面板，依此类推。
从第一个画板开始工作，修改每个画板上的字体，方法是在原始“LOADING”字体之前插入句点，然后在零、一、二、三、二和一个画板之后再次插入句点。您可以使用此作为画板顺序的指南：
正在加载。等一下，等一下，我们正在加载 换句话说，请在加载时耐心等待。
您现在可以看到新制作的动画预览。
脉动点
在纸上放一个60px的点并跟踪它。只需向右60像素里复制一个点。将两个点以及 60px 的分隔部分居中显示在美工板上。
连续四次使用“自动”设置作为触发器。
为此，在第二个画板上，我们将第二个点的大小减小到30px。
第三个布局上的第一个点必须从其当前位置缩小到 30px，第二个点需要缩小到零。
第四个画板上的第一个点应缩小到 0px 的大小，而第二个点应放大到 30px。
将第五个画板上第一个点减小到 30px，并使用“自动”触发器将其连接到第一个画板。
滚动点
将五个点放在类似于六面骰子的配置中。在导入画板后将其放在Principle中间。
使用Principle在滚动中添加有动画效果的点
将画板设置为“自动”模式。
将点移动到新画布上，并将其旋转 360 度。
您可以通过使用“自动”触发器将第二个画板连接到第一个画板来执行此操作。
脉动圆圈
首先，绘制一个直径为150px的圆圈，边框为5px，中间没有填充，将其放置在一个直径为50px的较小圆圈。
发送三个连续的“自动”触发器。
在第一个画板上将外圆的大小减小到 50px，将内圆的大小减小到 10px。
在第三个画板上将线条图中的圆的大小增加到 200 像素，并将其不透明度降低到零。为了看到内圈，请将其大小增加到 150px，并将其不透明度降低到 50%。
对于最终布局，将内圆的大小增加到 200px，并将其不透明度降低到 0%。线圆的大小应减小到50px，其透明度应降低到25%。
在最后一个画板上，添加“自动”触发器。使内圆直径为 10px，不透明 50%。
从最后一个画板一直到第一个画板里附加一个“自动”触发器
跳跃点
排列三个相同的 50px 高圆圈，并在它们之间留 50px 的间隙。
使用“自动”按钮启动任何内容。第一个圆圈在第二个画板应向上移动 50 像素。
使用第二个板自动执行某些操作。选择第三个画板上的前两个圆圈，然后垂直提高 50 像素。建议把三个圆圈形成对角线。
第三块电路板应安装“自动”开关。在第四个画布上将顶部圆圈向下调整 50px。单击底部的两个圆圈，然后向上拖动 50px。
在四号板上添加“自动”开关。第五个画板上的前两个圆圈需要降低 50 像素。选择最后一个环并将其向上微移 50 像素。
将第五块电路板投入自动运行。第六个画板上的最后两个圆圈需要向下移动 50 像素。
现在，在第一个画板上，将顶部点向上移动 50 像素，并使用“自动”触发器将其连接到最终画板。已完成的产品可以被预览。
老式装载机
首先在 Sketch 中绘制一个圆圈，并为其添加一个没有填充的 20px 灰色边框。
复制圆圈，然后将其粘贴到顶部，将副本的填充颜色更改为其他颜色。让我们用蓝色为例。
绘制一个正方形，其角与蓝色圆圈重叠四分之一。矩形图层应放置在圆形图层的下方，并应对其应用“Mask”命令。
回到Principle，然后使用其“导入”选项添加Sketch的文件。
在第一个画板中，使用“自动”触发器将蓝色圆圈旋转一整圈。
将额外的“自动”触发器添加到第二个画布。将第三个圆圈图层的名称更改为“复制”，然后使用“自动”触发器将其连接到原始画板。
结论
在获得建立其中一些可靠加载动画的经验后，您应该对自己利用该技术为自己的应用程序设计独特动画的能力充满信心。
借助一些独创性以及 Sketch 和 Principle 提供的工具，您可以在几分钟内创建自定义加载动画，以补充您的应用的风格。您的应用用户将享受其精美的外观和有用的进度指示。
