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

1、最初被称为动态浏览图示，加载动画用于指示数据记录或渲染界面的进度。虽然你可以通过使用一个沉闷的进度条来表明这一点，但那些日子已经过 去了。使用 CSS， jQuery 或简单动画GIF 的精心制作的动画是激活你的界面并为你的产品添加个性的机会。人性化的动画可以让你的用户等待你的加载内容。好的加载动画有助于管理期望，并通过保持兴趣来改善用户体验。在本教程中，我们将使用Sketch创建基本形状和原理，以快速创建简单的 自定义加载动画。（这些都适用于 Mac 应用程序） 你将学习如何创建Trello ，Flickr, Slack等使用的丰富多彩的加载动画。Let s get to it!在Sketc

2、h上，跟踪四边形圆形的正方形，边框为 50px,或者每个圆角为 100px。它们应该看起来像是完美的圆形，但是我们使用圆角的正方形在动画中 创建线条拉伸效果。放置四个形状，以创建一个假想的方形，每侧之间的距离为150pxo应用四种不同的颜色（# 35BA90绿色，#69CADD蓝色，#EBA900黄色和# E20661 粉色）。将形状导入原理，对它们进行分组，然后单击 “创建组件 ”以嵌套组。进入嵌套组并旋转画板15 度。然后选择每个单独的圆圈并将其旋转回其原始位置（向后15 度）。这样会在直线上产生拉伸效果。对画板应用 “自动 ”触发，然后将每个圆角矩形拉伸到画板的对面，长度为295px。给

3、两幅画板上的每个形状提供 75%的不透明度。对第二张画板应用另一个 “自动 ”触发。在新的画板上，将每行减少到原来的 50px 宽度，但与其原始位置相反。使用 “自动 ”触发将最后一个画板链接到第一个。点击 “回到主页 ”按钮预览 最终结果。提示：当你返回 “主页 ”时，你可以将主组旋转30度，看起来更像是松弛。此外，你可以更改 “动画 ”面板中的动画脚步，并应用 “轻松两者 ”效果来顺利过 渡。使用Sketch,追踪一个100Px的蓝色方块。画一个 60Px宽X高140Px的白 色矩形。将其与上一个正方形的左上角对齐，顶部和左边距为30px。复制该白色矩形，将其与正方形的右侧对齐，右边距为

4、30px,并将其高度缩小至70px。将画板导入原理并应用 “自动 ”触发来创建一个新的关键帧。在新的艺术板上，反转白色矩形的高度（使左矩形高70px,正方形140px）。在 动画”面板中应用 “轻松双向 ”效果，以顺利过渡。在Sketch上追踪一个圆。用“DasK口 “Gap!应用10Px边框，且没有填 充。对边框使用 “角度渐变 ”颜色，这将突出稍后你将创建的旋转效果。打开一个新的原则文件，并使用导入”按钮从Sketch传送圆。在一行中应用两个 “自动 ”触发器。要创建旋转效果，请选择中间画板中的圆，并将其的 “角度 ”值更改为 360度。然后选择第三个圆圈，并在左侧面板中给出不同的名称（即

5、 “复制 ”），这 将会造成无限旋转。最后，将第三个画板与另一个 “自动 ”触发器连接起来。应用 “线性 ”转换到画板 1 和 2 之间的时间轴。检查你在预览窗口中刚创建的动画。并排跟踪一个蓝色圆圈和一个粉红色的圆圈。将它们导入原理并应用 “自 动 ” 触发来创建一个新的画板。反转圆圈的位置并应用新的 “自动 ”触发来创建第三个画板。在新的画板上，反转左面板上圆圈层的顺序。应用第三个 “自动 ”触发器创建第四个画板。在最后一个画板上，再次反转圆圈的位置，并将最后一个 “自动 ”触发器从最后一个画板应用到初始画面。在 “原则 ”上创建一个新项目，并使用 “文本 ”工具写入“LOADIN”G 。将

6、文本对准左侧，并将其垂直居中在画板中。连续五次施加 “自动 ”触发。将第五个触发器从最后一个画板循环回到初始画板。从初始画板开始并向右移动，编辑每个画板上的文本，分别添加原始“LOADING” 文本旁边的0， 1， 2， 3， 2 和一个句点。画板的进度应该如下所示：LOADING LOADING. LOADING. LOADINGLOADING. LOADING.现在，你可以预览刚创建的动画。跟踪一个60Px的点。复制并粘贴一个点，并将其放在右边的60px。确保两个点，包括60px 的差距，完美地集中在你的画板上。在第二张画板上，将第二个点缩小到 在第三个画板上，将第二个点缩小到 在第四个画

7、板上，将第二个点缩放到 在第五张画板上，将第一个点缩小至 画板上。连续四次应用 “自动 ”触发。30px。0px,第一个缩小到30px。30px,并将第一个点缩小到0px。30px,并连接到第一块 自动”触发的在六边模具上放置五个点。将画板导入原理并将其置于中心位置。在画板上应用 “自动 ”触发。在新的画板上，旋转一组点 360度。使用 “自动 ”触发将第二个画板链接回第一个。开始于一个50Px圆圈，中心对齐在一个150Px的圆圈内，边框为5px,且 没有填充。连续三次施加 “自动 ”触发。在第一幅画板上，将线圈缩放至 50px,将内圆缩放至10px。在第三个画板上，将线圈缩放到 200px,

8、并名&出0%的不透明度。将内圈缩 放到150px,并给出50%的不透明度。在最后一个画板上，将内圈缩放到 200px,并名&出0%的不透明度。将线圈 缩放至50px,并赋予其25%的不透明度。对最后一张画板应用 自动”触发。将内圈缩小到10px,不透明度为50%。使用“自动 ”触发将最后一个画板链接到第一个。将高达 50px 的三个完美圆圈排成一列，间距为 50px。应用“自动 ”触发。在第二幅画板上，将第一个圆圈移动50px。对第二张板应用 “自动 ”触发。在第三个画板上，选择前两个圆圈并将其移动50pxo三个圈子应该在一条对角线上。对 “第三板 ”应用 “自动 ”触发。在第四幅画板上，将第

9、一个圆圈向下移动50px。选择最后两个圈子并将其移动 50px。在第四块板上应用“自动 ”触发。在第五张画板上，向前移动前两个圆圈50px。选择最后一个圆圈并将其移动 50px。在第五张板上应用“自动 ”触发。在第六幅画板上，将最后两个圆圈移动到50px。最后，回到第一幅画板，向上移动第一个点50px,并将最后一个画板与“自动 ”触发器连接。你可以预览最终结果。在Sketch中跟踪一个圆，并给它一个20Px的灰色边框，没有填充。将同一个圆的副本粘贴在其上，并将副本填充更改为不同的颜色。对于这个例子，我们将使用蓝色。跟踪一个四分之一的蓝色圆圈的正方形。将矩形图层移动到圆形图层下方，并将 “面具 ”应用于矩形图层。转到原则，并使用 “导入 ”按钮导入 Sketch 图稿。对第一幅画板应