创建自定义动画加载指示器的使用指南

　　在本教程中，我们将使用Sketch创建基本形状和原理，以快速创建简单的自定义加载动画。（这些都适用于Mac应用程序）你将学习如何创建Trello，Flickr，Slack等使用的丰富多彩的加载动画。
　　最初被称为动态浏览图示，加载动画用于指示数据记录或渲染界面的进度。虽然你可以通过使用一个沉闷的进度条来表明这一点，但那些日子已经过去了。
　　使用CSS，jQuery或简单动画GIF的精心制作的动画是激活你的界面并为你的产品添加个性的机会。
　　人性化的动画可以让你的用户等待你的加载内容。好的加载动画有助于管理期望，并通过保持兴趣来改善用户体验。
　　在本教程中，我们将使用Sketch创建基本形状和原理，以快速创建简单的自定义加载动画。（这些都适用于Mac应用程序）你将学习如何创建Trello，Flickr，Slack等使用的丰富多彩的加载动画。
　　Let’it！
　　1、松弛加载动画
　　在Sketch上，跟踪四边形圆形的正方形，边框为50px，或者每个圆角为100px。它们应该看起来像是完美的圆形，但是我们使用圆角的正方形在动画中创建线条拉伸效果。
　　放置四个形状，以创建一个假想的方形，每侧之间的距离为150px。应用四种不同的颜色（35BA90绿色，69CADD蓝色，EBA900黄色和E20661粉色）。
　　将形状导入原理，对它们进行分组，然后单击“创建组件”以嵌套组。
　　进入嵌套组并旋转画板15度。然后选择每个单独的圆圈并将其旋转回其原始位置（向后15度）。这样会在直线上产生拉伸效果。
　　对画板应用“自动”触发，然后将每个圆角矩形拉伸到画板的对面，长度为295px。给两幅画板上的每个形状提供75的不透明度。
　　对第二张画板应用另一个“自动”触发。在新的画板上，将每行减少到原来的50px宽度，但与其原始位置相反。
　　使用“自动”触发将最后一个画板链接到第一个。点击“回到主页”按钮预览最终结果。
　　提示：当你返回“主页”时，你可以将主组旋转30度，看起来更像是松弛。此外，你可以更改“动画”面板中的动画脚步，并应用“轻松两者”效果来顺利过渡。
　　相关链接：https：www。youtube。comwatch？vQi64vUqJKAw
　　2、Trello加载动画
　　使用Sketch，追踪一个100px的蓝色方块。画一个60px宽高140px的白色矩形。将其与上一个正方形的左上角对齐，顶部和左边距为30px。复制该白色矩形，将其与正方形的右侧对齐，右边距为30px，并将其高度缩小至70px。
　　将画板导入原理并应用“自动”触发来创建一个新的关键帧。在新的艺术板上，反转白色矩形的高度（使左矩形高70px，正方形140px）。在“动画”面板中应用“轻松双向”效果，以顺利过渡。
　　相关链接：https：www。youtube。comwatch？v0PHiYXKPm9Y
　　3、滚动圈
　　在Sketch上追踪一个圆。用“Dash”和“Gap”值应用10px边框，且没有填充。对边框使用“角度渐变”颜色，这将突出稍后你将创建的旋转效果。
　　打开一个新的原则文件，并使用“导入”按钮从Sketch传送圆。在一行中应用两个“自动”触发器。
　　要创建旋转效果，请选择中间画板中的圆，并将其的“角度”值更改为360度。然后选择第三个圆圈，并在左侧面板中给出不同的名称（即“复制”），这将会造成无限旋转。
　　最后，将第三个画板与另一个“自动”触发器连接起来。应用“线性”转换到画板1和2之间的时间轴。检查你在预览窗口中刚创建的动画。
　　相关链接：https：www。youtube。comwatch？vkDmmWvz5e3I
　　4、Flickr加载动画
　　并排跟踪一个蓝色圆圈和一个粉红色的圆圈。将它们导入原理并应用“自动”触发来创建一个新的画板。
　　反转圆圈的位置并应用新的“自动”触发来创建第三个画板。在新的画板上，反转左面板上圆圈层的顺序。
　　应用第三个“自动”触发器创建第四个画板。在最后一个画板上，再次反转圆圈的位置，并将最后一个“自动”触发器从最后一个画板应用到初始画面。
　　相关链接：https：www。youtube。comwatch？v7azaIHTykCI
　　5、加载类型
　　在“原则”上创建一个新项目，并使用“文本”工具写入“LOADING”。将文本对准左侧，并将其垂直居中在画板中。
　　连续五次施加“自动”触发。将第五个触发器从最后一个画板循环回到初始画板。
　　从初始画板开始并向右移动，编辑每个画板上的文本，分别添加原始“LOADING”文本旁边的0，1，2，3，2和一个句点。画板的进度应该如下所示：
　　LOADINGLOADING。LOADING。。LOADINGLOADING。。LOADING。
　　现在，你可以预览刚创建的动画。
　　相关链接：https：www。youtube。comwatch？vct7zSm2TadM
　　6、脉冲点
　　跟踪一个60px的点。复制并粘贴一个点，并将其放在右边的60px。确保两个点，包括60px的差距，完美地集中在你的画板上。
　　连续四次应用“自动”触发。
　　在第二张画板上，将第二个点缩小到30px。
　　在第三个画板上，将第二个点缩小到0px，第一个缩小到30px。
　　在第四个画板上，将第二个点缩放到30px，并将第一个点缩小到0px。
　　在第五张画板上，将第一个点缩小至30px，并连接到第一块“自动”触发的画板上。
　　相关链接：https：www。youtube。comwatch？v6HTgJAvyrM
　　7、滚动点
　　在六边模具上放置五个点。将画板导入原理并将其置于中心位置。
　　在画板上应用“自动”触发。
　　在新的画板上，旋转一组点360度。
　　使用“自动”触发将第二个画板链接回第一个。
　　相关链接：https：www。youtube。comwatch？v2i9k080dTU
　　8、脉动圈
　　开始于一个50px圆圈，中心对齐在一个150px的圆圈内，边框为5px，且没有填充。
　　连续三次施加“自动”触发。
　　在第一幅画板上，将线圈缩放至50px，将内圆缩放至10px。
　　在第三个画板上，将线圈缩放到200px，并给出0的不透明度。将内圈缩放到150px，并给出50的不透明度。
　　在最后一个画板上，将内圈缩放到200px，并给出0的不透明度。将线圈缩放至50px，并赋予其25的不透明度。
　　对最后一张画板应用“自动”触发。将内圈缩小到10px，不透明度为50。
　　使用“自动”触发将最后一个画板链接到第一个。
　　相关链接：https：www。youtube。comwatch？vESSAfQ7FLN8
　　9、跳点
　　将高达50px的三个完美圆圈排成一列，间距为50px。
　　应用“自动”触发。在第二幅画板上，将第一个圆圈移动50px。
　　对第二张板应用“自动”触发。在第三个画板上，选择前两个圆圈并将其移动50px。三个圈子应该在一条对角线上。
　　对“第三板”应用“自动”触发。在第四幅画板上，将第一个圆圈向下移动50px。选择最后两个圈子并将其移动50px。
　　在第四块板上应用“自动”触发。在第五张画板上，向前移动前两个圆圈50px。选择最后一个圆圈并将其移动50px。
　　在第五张板上应用“自动”触发。在第六幅画板上，将最后两个圆圈移动到50px。
　　最后，回到第一幅画板，向上移动第一个点50px，并将最后一个画板与“自动”触发器连接。你可以预览最终结果。
　　相关链接：https：www。youtube。comwatch？vbIYMHXsmSIM
　　10、经典的加载机
　　在Sketch中跟踪一个圆，并给它一个20px的灰色边框，没有填充。
　　将同一个圆的副本粘贴在其上，并将副本填充更改为不同的颜色。对于这个例子，我们将使用蓝色。
　　跟踪一个四分之一的蓝色圆圈的正方形。将矩形图层移动到圆形图层下方，并将“面具”应用于矩形图层。
　　转到原则，并使用“导入”按钮导入Sketch图稿。
　　对第一幅画板应用“自动”触发，并旋转蓝色圆圈360度。
　　对第二张画板应用第二个“自动”触发。将生成的第三个圆形图层重命名为“复制”，并将其链接回第一个画板，并显示“自动”触发。
　　相关链接：https：www。youtube。comwatch？vUHAQ1ftzIaU
　　结论
　　一旦你学会了创建这些加载动画，你应该对自己的能力感到自信，用这里学到的技能把自己的应用程序创建为一个独特的动画。
　　有了Sketch和Principle这些富有想象力的便捷工具，你可以在几分钟内创建一个独特的加载动画，使之与你设计的应用程序相匹配。你的用户也会感谢在工作中应用程序指示器的专业和友好。