进度条加载动画超详细讲解,还不会?送你源文件,慢慢临摹

进度条的定义及使用条件

进度条用于展示操作的当前进度。在操作需要较长时间才能完成时,为用户显示该操作的当前进度和状态。当一个操作会打断当前界面,或者需要在后台运行,且耗时可能超过 2 秒时;当需要显示一个操作完成的百分比时。在这样的情况下,使用进度条。

快速绘制线框图

下面这张图拆解分析了进度条的结构,进度条线框图主要有背景、进度条和进度组成。进度达到100%的时候会变成一个对勾图标。

下面我们来绘制线框图部分。

背景:从系统元件库拖动一个矩形,调整矩形的尺寸,为矩形填充颜色,颜色填充为#F2F2F2,设置无边框,将矩形的四个角调整为圆角。

进度条:复制背景,设置填充色为橙色,色值为#FF9900,将进度条和背景进行对齐。

进度:拖动一个文本标签至背景右侧,用来显示进度,默认为0%。添加一个对勾图标覆盖在进度条的上方,对勾图标填充色为#FF9900,默认隐藏对勾图标。

分析交互效果

通过观察,不难发现进度条有以下几个交互效果:

随着时间的推移,进度条逐渐变长;

进度随着进度条变长而逐渐递增;

进度条延长至背景的长度时,停止延长;

当进度条长度等于背景长度时,进度为100%,同时进度也变成了一个对勾图标。

制作交互原型

01 进度条的加载

进度条的长度变化是一个循序渐进的过程,并不是一蹴而就的。我们可以通过动态面板的状态循环来达到进度条长度的不断增长。所以,这个时候,我们需要添加一个动态面板来辅助我们实现这样的效果。我们将这个辅助的动态面板称之为控制器,掌控着进度条的变化节奏。我们需要为这个控制器再添加一个状态,至少保证有两个状态来实现动态面板状态的循环切换。

在正式配置交互之前,我们还需要将进度条转换为动态面板,设置默认长度为1。设置完之后,与背景进行左对齐,停靠在背景的左侧。大家可能会有一个疑问,为什么要将进度条设置为动态面板了?因为后面需要通过进度条尺寸变化来控制着进度显示的变化,众多元件当中,只有动态面板具有“尺寸改变”事件,故而需要将进度条转换为动态面板。

既然由辅助控制器动态面板的状态切换来达到控制进度条的长度,那么如何实现动态面板状态的循环切换呢?这个时候,我们可以为页面添加一个“载入时”事件,载入时,设置辅助控制器动态面板循环切换状态,设置循环间隔为0.1秒,交互设置如下图所示。我们也可以通过为其它任何一个元件添加载入事件实现同样的效果。

接下来再为辅助控制器添加“状态改变时”事件,设置进度条的尺寸,进度条高度不变,宽度等于当前宽度+背景宽度的百分之一,即进度条宽度以1%速度保持匀速增长。我们知道进度条的宽度不能超过背景的宽度,所以,在这里需要为该事件添加一个前提条件,即当进度条宽度小于等于背景宽度时,执行刚才设置的尺寸变化动作。

添加第二个情形,即除了第一个情形之外的情况,则应停止动态面板的状态切换,隐藏进度,显示对勾图标。这种情况,一般为进度条加载完成。关于辅助控制器的交互配置如下图所示。

上图中的变量Target代表进度条,变量LVAR1代表背景。完成交互配置,记得将控制器动态面板进行隐藏,控制器并不是交互原型的一部分,只是辅助我们实现交互动画的工具。

02 进度的动态变化

进度的变化由进度条的尺寸变化所决定,所以,我们需要为进度条动态面板添加“尺寸改变时”事件。当进度条的尺寸发生变化时,进度的文本值=进度条的宽度/背景宽度*100%,转换成 Axure的函数表达式为[[This.width/LVAR1.width*100]]%,其中变量this代表进度条,变量LVAR1代表背景。进度的值为整数,不会出现小数位,为了避免计算结果出现小数位的情况,我们需要对刚才的百分比数值进行向下取整,向下取整函数为Math.floor(x)。最终,表达进度值的函数表达式为[[Math.floor(This.width/LVAR1.width*100)]]%。交互配置如下图所示。

好了,关于进度条交互原型的配置已经完成,点击预览按钮,验证下我们的劳动成果吧。


小结

进度条的交互动画实现起来其实很简单,总的说来,只要掌握以下3点:

通过页面或某个元件的载入事件,控制辅助动态面板的状态切换;

通过辅助动态面板的状态改变,掌控进度条尺寸的变化节奏;

利用进度条尺寸改变的时机,重新计算进度数值。

按照以下操作,可获取案例源文件

1.关注 本账号《Axure原型设计》

2.点赞 本节课内容

3.发送简信 关键字【进度条】

【Axure原型设计】专注分享Axure基础教程、交互案例以及经验技巧,并不定期赠送各种资源福利,包含:系统组件库、页面模板、实战案例等。

推荐阅读更多精彩内容