环形进度条(复位+百分比+暂停)

AxureRP8.0资源 小楼一夜听春语 8809℃ 0评论

先来看看截图效果吧!

火狐截图_2016-08-01T12-23-17.354Z

然后,来说一下优缺点。

优点:无需制作环状的自定义形状元件;无需使用全局变量;如果不需要复位和暂停,则只需要设置6个动作(步骤2的开启循环与步骤3的动作)。

缺点:需要动态面板中矩形元件颜色与页面颜色保持一致。否则,见下图。

4

关键步骤:

1、点击复位按钮,将百分比文字、开始按钮文字、两个动态面板内的矩形left、right恢复原状以及停止动态面板loop的循环;

1

2、点击开始按钮时,如果按钮文字为开始,将文字设置为“暂停”,并开启动态面板loop的循环;否则,设置文字为“开始”,并停止动态面板loop的循环;

2

3、动态面板loop循环时,如果左侧的矩形left角度小于180度,则将该元件以右侧边界中心点为中心顺时针旋转2度(这个数字可调整,以控制进度条的速度),同时,通过函数计算出进度条角度的百分比,呈现在元件NumberText上;否则,如果右侧的矩形right角度小于180度,则将该元件以左侧边界中心点为中心顺时针旋转2度;同时,通过函数计算出进度条角度的百分比,呈现在元件NumberText上;否则,停止动态面板loop的循环。

3

其实,这个原型的实现,有很重要的一部分是对元件的利用,根据元件的不同特点进行组合,呈现的视觉效果。比如:

1、蓝色的圆形负责进度条的颜色;

2、内部的圆形负责对中心部分蓝色的遮挡和百分比的呈现;

3、外部的圆形是负责进度条的边框,这个元件的填充色是透明的;

4、动态面板loop用于循环,以便循环时不停的旋转符合条件元件的角度(左侧矩形元件旋转角度不足180则旋转这个元件,否则,如果右侧的矩形元件旋转不足180,则旋转右侧这个元件,如果两个矩形元件旋转都达到180,说明进度条旋转了一整圈,则停止动态面板loop的循环)

5、剩余的两个动态面板,里面都有一个矩形元件,这两个动态面板只是负责遮挡里面的矩形元件,以免因为内部矩形的旋转,遮挡到页面中的其他内容。

以上,就是对这个原型的一些介绍,如果说得不够清楚的话,大家可以下载源文件进行参考。

源文件下载地址:http://pan.baidu.com/s/1nv5zzNr


~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师再出新作,倾力打造Axure RP 8精品课程系列,以最短的时间高效完成学习目标,入门进阶与实战案例并重,是0基础的新手从入门到精通的必备课程。

《AxureRP 8 入门与实战 - 入门篇》------从零入门进阶的最佳课程------【点此查看详情】

《AxureRP 8 入门与实战 - 案例篇》------实战手册图书的同步视频------【点此查看详情】


转载请注明:Axure原创教程网 » 环形进度条(复位+百分比+暂停)

喜欢 (53)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(10)个小伙伴在吐槽
  1. 小楼老师,为什么你把justinmind荒废了。。。
    Yonnie2016-08-03 09:03 回复
    • 没有时间和精力
      小楼一夜听春语2016-08-03 22:14 回复
  2. 下载的源文件打不开
    Miko2016-08-06 10:01 回复
  3. 写的不错。。。。。。。。。。
    母婴b2b2016-08-12 14:37 回复
  4. 小楼老师您好!在制作这个原型时我发现在AXURE→项目设置→内边界对齐时,原型播放结束时中间会用一道白线,这个怎么才能在内边界对齐时怎么才能解决,期待您的答复,非常感谢!
    疯子2016-08-23 11:08 回复
    • 下载我新发布的元件库里面有
      小楼一夜听春语2016-08-23 14:19 回复
  5. 小楼老师,能发布制作教程吗?
    Plain2016-09-03 15:48 回复
  6. 文件破坏了
    123154562016-09-13 16:12 回复
  7. 下载你的文件都打不开,是什么原因呢
    lsdfj2016-11-15 11:23 回复
  8. 文件破坏= =
    sufer342016-12-07 11:33 回复