Axure教程：实现进度条、进度环和滑动条的简单方法.doc

《Axure教程：实现进度条、进度环和滑动条的简单方法.doc》由会员上传分享，免费在线阅读，更多相关内容在学术论文-天天文库。

1、Axure教程：实现进度条、进度环和滑动条的简单方法　　作者分享了制作进度条、进度环和滑动条的简单方法，希望能给大家带来一定的收获。　　　　画原型的目的之一是为了给开发人员看功能的实现效果，同时也可以打包制作成Demo给相关人员了解产品的完成形态，是产品人员的必备技能之一。除了画原型，产品人员还要做需求分析和文档编写等工作，所以不能花太多时间在此环节上。　　画原型所需时间与实现方法有关，以提高效率为目的，本文尽可能详细的介绍了进度条、进度环和滑动条三种原型的最简单实现方法，在介绍方法的过程中与大家分享自定义函数和常用math函数的使用以及元件操作的一些小技巧，希望能帮助大家在

2、画原型的时候更加得心应手。　　一、进度条　　进度条常见于页面载入过程中，用于向用户展示当前的进度情况，配合上有趣的动画效果可减少用户的等待焦虑。　　1、准备元件　　　　在画板中拖入等宽等高的灰色矩形和蓝色矩形，灰色矩形命名【进度槽】，蓝色矩形转换为动态面板后设置宽度为1，命名【进度条】，拖入开始按钮和文本标签，设置文本标签文本为“0%”，命名【进度】。　　2、原理分析　　1）实现原理　　把蓝色矩形转换成动态面板【进度条】后，蓝色矩形成为【进度条】默认面板内的一个元件。通过把【进度条】的初始宽度设置为1，暂时只显示一点点的蓝色矩形，使整个进度槽看起来是空的。随着【进度条】宽度不

3、断变大，蓝色矩形被显示出来的区域也不断增多，直至当【进度条】的宽度等于【进度槽】的时候，蓝色矩形就全部被显示出来了，使整个进度槽看起来被填充完成。期间进度条和进度是关联进行的，根据【进度条】的宽度计算出【进度】的数值，用于表示当前的进度情况。　　2）逻辑流程　　　　改变【进度条】宽度　　　　改变【进度条】的宽度是通过【设置尺寸】动作来实现的，Axure支持在用例中设置改变元件的尺寸。【进度条】的初始宽度为1，我们要修改设置它的尺寸为【进度槽】的宽度，设置动画为“线性”，时间为整个进度的时间。　　自定义的函数中，LVAR1.width指局部变量LVAR1的宽度，LVAR1指代【

4、进度槽】，故LVAR1.width即为【进度槽】的宽度。　　设置【进度】　　　　根据“进度=进度条的宽度/进度槽的宽度%”，转换成原型中的函数为：　　[[math.ceil(100*LVAR1.width/LVAR2.width)]]%　　math.ceil(x)函数为向上取整函数，返回大于或等于参数x，并且与之最接近的整数。　　（tips：文章结尾还会与大家分享更多常用的math函数。）　　LVAR1.width是【进度条】的宽度，LVAR2.width是【进度槽】的宽度。两者相除后乘以100，再向上取整后得到百分比数制的整数数值部分，再添加“%”号组成百分比数制的文本。　

5、　3、设置用例　　【开始按钮】鼠标点击时用例：action1：设置【进度条】尺寸；action2：隐藏【进度】；action3：显示【进度】。　　　　【进度】显示时用例：action1：设置【进度】；action2：隐藏【进度】；action3：显示【进度】。　　　　注意，在完成设置【进度】的动作后，需要添加一个“等待0ms”的动作让程序“暂时等待一下，然后再继续”，否则没有设置等待的话会形成“设置-隐藏-显示-，便可得到圆环。　　　　step2：画一个矩形，使它的一边与圆环的直径重合，选中两者后右键–【改变形状】–【去除】，得到半圆环，将半圆环右键–【改变形状】–【水平翻转

6、】便可得到另一半半圆环。　　2）制作元件　　按照上面的方法在画板中画四个半圆环、拖入开始按钮和文本标签，设置文本标签文本为“0%”，命名【进度】。　　　　把各个元件组合排列成下图，其中四个半圆环自上往下的排列层级依次为：【右槽】、【右环】、【左槽】、【左环】　　　　2、原理分析　　1）实现原理　　　　初始时四个半圆环的排列位置从上往下依次为【右槽】、【右环】、【左槽】、【左环】，由于右槽和左槽分别盖住了右环和左环，所以在视图上我们只能看到右槽和左槽，也就是空的环形槽。动作开始后，右环旋转至左侧后盖住了左槽，然后左环上升到顶层（于右槽之上），接着顶层的左环旋转至右侧后盖住了右槽

7、，所以在视图上只能看到右环和左环，也就是填充后的环形。整个过程进度环和进度是关联进行的，根据进度环旋转过的弧度计算出进度，用于表示当前的进度情况。　　2）逻辑流程　　　　进度环的逻辑方法跟进度条相似，区别是进度的计算公式不同。　　顺时针旋转半圈【右环】　　　　旋转【右环】是通过【旋转】动作来实现的，Axure8支持在用例中对元件进行旋转其位置的操作。设置旋转位置为相对位置，角度为180，顺时针方向，锚点为左侧（沿着左侧旋转），旋转动画设置为线性，设置好旋转时间。　　【左环】的旋转动作设置与【右环】相似，