如何创建自定义加载动画以降低跳出率 _动画

本文概述

松弛加载动画
Trello加载动画
滚圈
Flickr加载动画
加载类型
脉动点
滚点
脉动圈
跳点
经典装载机
总结

加载动画最初被称为” ber子” , 用于指示数据收集或界面渲染的进度。尽管你一次可以使用乏味的进度条来表明这一点, 但那些日子已经一去不复返了。
如今, 利用CSS, jQuery或简单的GIF动画制作的精心制作的动画使你可以活跃界面并为产品添加个性。
周到的动画可以让用户在等待你的内容加载时感到愉悦。良好的加载动画有助于管理期望并通过保持兴趣来改善用户体验。
在本教程中, 我们将使用” 素描” 创建基本形状, 并使用” 原理” 快速创建简单的自定义加载动画。 (这两个应用程序都适用于Mac。)你将学习如何创建Trello, Flickr, Slack等使用的彩色加载动画。
让我们开始吧。
松弛加载动画

文章图片

文章图片
在Sketch上, 追踪四个圆角正方形, 每个边长为50px, 或每个半径为100px。它们看起来像是完美的圆形, 但是我们使用带有圆角的正方形在动画中创建线拉伸效果。
【如何创建自定义加载动画以降低跳出率】放置这四个形状, 以创建一个虚构的正方形, 每边之间的间距为150px。应用四种不同的颜色(＃35BA90绿色, ＃69CADD蓝色, ＃EBA900黄色和＃E20661粉色)。

文章图片
将形状导入到Principle中, 对其进行分组, 然后单击” 创建组件” 以嵌套该组。
进入嵌套组, 然后将画板旋转15度。然后选择每个单独的圆并将其旋转回其原始位置(向后15度)。这将产生直线拉伸效果。

文章图片
将” 自动” 触发器应用于画板, 然后将每个圆角矩形拉伸到画板的另一侧, 直到295像素。使两个画板上的每个形状的不透明度都达到75％。

文章图片
将另一个” 自动” 触发器应用于第二个画板。在新的画板上, 将每行减小到其原始的50px宽度, 但在其原始位置的相反侧。
使用” 自动” 触发器将最后一个画板链接到第一个画板。单击” 返回父级” 按钮以预览最终结果。
提示：转到” 返回父级” 时, 可以将主组旋转-30度, 使其看起来更像松弛。另外, 你可以在” 动画” 面板中更改动画速度, 并应用” 同时减轻” 效果以平滑过渡。
Trello加载动画

文章图片

文章图片
使用素描, 跟踪一个100px的蓝色正方形。绘制一个白色的矩形, 宽60像素, 高140像素。将其与上一个正方形的左上角对齐, 顶部和左侧边距为30px。复制该白色矩形, 将其与正方形的右边对齐(右边距为30px), 并将其高度减小为70px。

文章图片
将画板导入Principle中, 并应用” 自动” 触发器以创建新的关键帧。在新的画板上, 反转白色矩形的高度(使左矩形高70px, 右矩形140px)。在” 动画” 面板中应用” 二者兼有” 效果以平滑过渡。
滚圈

文章图片

文章图片
在草图上绘制一个圆。应用带有” 破折号” 和” 间隙” 值且无填充的10px边框。为边框使用” Angular Gradient” (角度渐变)颜色, 以突出你稍后创建的旋转效果。

文章图片
打开一个新的Principle文件, 然后使用” 导入” 按钮从Sketch转移圆。连续应用两个” 自动” 触发器。

文章图片
要创建旋转效果, 请在中间画板中选择一个圆并将其” 角度” 值更改为360度。然后选择第三个圆圈, 并在左侧面板中为其指定其他名称(即” 副本” )。这将伪造无限旋转。
最后, 使用另一个” 自动” 触发器将第三个画板链接回初始画板。在画板1和2之间的时间轴上应用” 线性” 过渡。检查刚在预览窗口中创建的动画。

文章图片

文章图片
并排跟踪一个蓝色圆圈和一个粉红色圆圈。将它们导入Principle中并应用” 自动” 触发器以创建新的画板。
反转圈子的位置, 并应用新的” 自动” 触发器以创建第三个画板。在该新的画板上, 反转左侧面板上圈子图层的顺序。

文章图片
应用第三个” 自动” 触发器以创建第四个画板。在最后一个画板上, 再次反转圆的位置, 然后从最后一个画板上将最后一个” 自动” 触发器应用到初始画板上。
加载类型

文章图片

文章图片
在Principle上创建一个新项目, 并使用Text工具编写” LOADING” 。将文本向左对齐, 并在画板上垂直居中。
连续应用五次” 自动” 触发器。从最后一个画板循环的第五个触发器返回到初始画板。

文章图片
从初始画板开始, 然后向右移动, 在每个画板上编辑文本, 以在原始” LOADING” 文本旁边分别添加零, 一, 二, 三, 二和一句号。画板的进度应如下所示：
加载中。 LOADING .. LOADING…LOADING .. LOADING。
现在, 你可以预览刚刚创建的动画。
脉动点

文章图片

文章图片
跟踪一个60px的点。复制并粘贴一个点, 并将其放置在右侧60px处。确保两个点(包括60px的间隙)都在画板上完美居中。

文章图片
连续四次应用” 自动” 触发器。
在第二个画板上, 将第二个点减少到30px。
在第三个画板上, 将第二个点减小为0px, 将第一个点减小为30px。

文章图片
在第四个画板上, 将第二个点缩放回30px, 将第一个点缩小到0px。
在第五个画板上, 将第一个点缩小到30px, 然后使用” 自动” 触发器将画板链接回第一个画板上。
滚点

文章图片

文章图片
在六面骰子上找到的排列中放置五个点。将画板导入到Principle并居中。

文章图片
在画板上应用” 自动” 触发器。
在新的画板上, 将点组旋转360度。
使用” 自动” 触发器将第二个画板链接回第一个。
脉动圈

文章图片

文章图片
从一个50px的圆开始, 该圆在一个具有5px边框但没有填充的150px圆内居中对齐。
连续应用三次” 自动” 触发器。

文章图片
在第一个画板上, 将直线圆缩小到50px, 将内部圆缩小到10px。
在第三个画板上, 将线圈缩放到200px, 并将其透明度设为0％。将内部圆圈放大到150px, 并使其不透明度为50％。
在最后一个画板上, 将内部圆圈缩放到200px, 并将其透明度设为0％。将线圆缩小到50px, 使其不透明度为25％。

文章图片
将” 自动” 触发器应用于最后一个画板。将内部圆圈缩小到10px, 不透明度为50％。
使用” 自动” 触发器将最后一个画板链接到第一个画板。
跳点

文章图片

文章图片
排列三个高度为50px的完美圆, 它们之间的间距为50px。
应用” 自动” 触发器。在第二个画板上, 将第一个圆圈上移50px。
将” 自动” 触发器应用于第二块板。在第三个画板上, 选择前两个圆圈并将其向上移动50px。这三个圆应位于对角线上。
在第三块板上应用” 自动” 触发器。在第四个画板上, 将第一个圆圈下移50像素。选择最后两个圆圈并将其向上移动50px。

文章图片
在第四块板上应用” 自动” 触发器。在第五个画板上, 将前两个圆圈向下移动50px。选择最后一个圆圈并将其向上移动50px。
在第五块板上应用” 自动” 触发器。在第六个画板上, 将最后两个圆圈向下移动50px。

文章图片
最后, 回到第一个画板, 将第一个画点上移50px, 并使用” 自动” 触发器将最后一个画板链接到第一个画板。你可以预览最终结果。
经典装载机

文章图片

文章图片
在” 素描” 中跟踪一个圆, 并为其赋予20px的灰色边框(不填充)。
将同一圆圈的副本粘贴到其顶部, 然后将副本填充更改为其他颜色。在此示例中, 我们将使用蓝色。
描绘一个与蓝色圆圈四分之一重叠的正方形。将矩形层移动到圆形层下方, 然后将” 蒙版” 应用于矩形层。

文章图片
移至Principle并使用” 导入” 按钮导入Sketch插图。
将” 自动” 触发器应用于第一个画板, 并将蓝色圆圈旋转360度。
将第二个” 自动” 触发器应用于第二个画板。将生成的第三个圆形图层重命名为” 复制” , 并使用” 自动” 触发器将其链接回第一个画板。
总结尝试制作了一些经过验证的真实加载动画后, 你应该对使用此处学习的技能为自己的应用程序创建独特动画的能力充满信心。
借助一点点的想象力和” 草图和原理” 中的便捷工具, 你可以在几分钟内创建与应用程序设计相匹配的独特加载动画。你的用户将欣赏其专业外观和友好的指示器, 表明你的应用程序正在努力工作。
? ? ?
在srcmini设计博客上进一步阅读：