教程实现环形动态进度条

　　Hello大家好，话说AxureRP8。0正式版已经发布有一段时间了，不知道小伙伴们是不是已经升级了呢？不过早在去年中旬Axure就发布了8。0的Beta版，经过了长时间了产品迭代，今年4月份8。0正式版终于和大家见面。本文所述案例必须使用8。0版本，7。0是没有办法实现的，所以你的7。0版本该退役啦！（Axure8。0下载地址：http：www。woshipm。comit319902。html）
　　OK，闲话少说，先来看看环形进度条是什么样的（我猜大家应该都知道）点击预览
　　（原型预览地址：http：www。raedme。cnaxurelab008downloading）
　　这就是最终要实现的效果，环状进度条，快速变化的进度数字，是不是蛮有逼格。当然，最重要的是，这完全是由Axure8。0来实现的。Buthowtodo？那接下来我就为大家讲解这一动效的制作过程。
　　准备工作：
　　安装Axure8。0（重要）
　　Followme
　　实现原理：
　　我一再强调要使用Axure8。0，其实是因为8。0相比7。0版本增加了一些新功能，而这些新功能恰恰是这个实验中要用到的（形状运算and旋转动作，也是本案例重点要学习的内容）。
　　形状运算：来制作出示例图中深色进度条的形状；
　　转转动作：通过对进度条形状的旋转来实现加载的动效。
　　制作过程：
　　制作所需要的形状。需要绘制的形状如下（共6个形状）：
　　将形状进行有序的排列，3放在最底层，4放在最顶层，1、2、5、6的层级顺序由上往下一次是5、6、2、1，排列好的效果是这样的：
　　实现进度条加载效果。在主页面添加OnPageLoad（页面加载时）事件，当页面加载时，将形状6顺时针旋转180，设置旋转时间为2000ms，这个时候预览会看到深色进度条从圆环底部中间位置顺时针加载出来；然后再将形状1顺时针旋转180，设置旋转时间为2000ms，这个时候预览会看到深色的进度条从圆环顶部的中间位置继续加载，直至加载完成。
　　设置数字的变化效果，这里用到一个部件叫Text（文本框），以及一个全局变量OnLoadVariable（系统默认的全局变量名称，可自定义），首先给OnLoadVariable设置一个默认值0，页面加载时，给Text部件赋值为〔〔OnLoadVariable〕〕（实际为0），然后在Text上设置OnTextChange事件，事件触发的动作是设置OnLoadVariable的值1，然后再将OnLoadVariable的值赋给Text，从而形成一个循环，使得Text上的值在动态变化（从0递增到100），再从事件上配合好深色进度条的旋转事件，就形成了文中示例的效果。
　　基于以上步骤，原型就基本完成了。另外值得一提的是，要实现进度条加载的效果，还有好几种方式（不过基本是采用旋转的方式，只是具体实现起来会有所不同）；另外还有一点，关于进度条加载和变换时间匹配的问题，本文采用的方式在不同浏览器下预览的时候，会出现时间偏差，就是看上去不那么协调，可以通过调整变换的时间来修正，不过进度条和同步的问题应该还有其他的实现方式，小伙伴们可以思考并尝试一下。
　　原型下载：
　　作者提供链接：http：pan。baidu。coms1bo8gy9T密码：hy5p
　　人人官方链接：http：pan。baidu。coms1dFwhwsx密码：qfxx