相关链接

目录Axure中文学习网AxureShopAxureShop-QA案例目标

 1. 了解进度条的实现原理

 2. 熟悉设置尺寸动作的使用场景

 3. 掌握变量值实现复杂的计算逻辑

一、成品效果

Axure Cloud 案例5 -【旋转的唱片3】进度条_滚动

版本更新

 一、进度`条

1.1 进度条按时间比例向右滚动。

历史版本：Axure Cloud 案例4 -【旋转的唱片2】计时器

 一、播放

2.1 点击播放按钮，计时器开始计时。

2.2 点击暂停按钮，计时器暂停计时。

2.3 每次点击播放按钮，继续时间，并等于上次暂停的时间。

 二、计时器

1.1 播放状态：计时器每秒钟变化一次。

1.2 播放状态：秒数个位范围[0-9]，到10自动进一位，并归0。

1.3 播放状态：秒数十位范围[0-6]，到6自动进一位，并归0。

1.4 播放状态：分钟个位范围[0-9]，到10自动进一位，并归0。

1.5 播放状态：分钟十位范围[0-6]，到6自动进一位，并归0。

1.6 播放状态：总时间 = 结束时间时，自动暂停。

1.7 暂停状态：计时器停止变化。

历史版本：Axure Cloud 案例2 -【旋转的唱片】

 一、播放

1.1 点击播放按钮，唱片开始旋转。

1.2 点击播放按钮，播放按钮变为暂停按钮。

1.3 点击暂停按钮，唱片停止旋转。

1.4 点击暂停按钮，暂停按钮变为播放按钮。

 二、收藏

2.1 未收藏状态：点击收藏按钮，出现收藏动效

2.2 未收藏状态：点击收藏按钮，切换为已收藏状态

2.3 已收藏状态：点击收藏按钮，出现弹窗，提示取消收藏

2.4 已收藏状态：点击收藏按钮，切换为未收藏状态

二、素材准备

需要先依次完成：

案例2 【旋转的唱片】、

案例4 【旋转的唱片2】计时器

三、制作方法

主要通过给计时器增加交互功能：进度圆点的移动，及进度条的设置尺寸。其中469为灰色线条长度、6为进度条 - 点的半径。

进度条放置于动态面板内，分为进度条-点、进度条-线1、进度条-线2。进度条 - 线的宽度为1（底层灰色进度条宽度为2，所以需要两条宽度为1的黑色进度线覆盖灰色部分）。

是因为Axure RP9产品自身存在的bug，经过反复测试，确认交互 - 设置尺寸功能，当线段宽度>1时，会出现如下问题：

设置尺寸的长度取决于底层灰色进度条的长度，当前进度条长度 = ( 当前时长 / 总时长 ) * 总长度 = ( current_time / end_time ) * 469 。其中 current_time、end_time变量是在案例4 【旋转的唱片2】计时器中已经定义过的。

四、操作步骤（简略介绍）

4.1 进度条-线

在动态面板内增加元件-水平线，作为进度条，颜色设为黑色，线宽1，使用水平线元件的数量取决于底层灰色部分线段的宽度。图层：放在需要覆盖的灰色线段上层即可。

4.2 设置交互

在元件s2的三种情况中都添加交互效果：【移动 进度条-点】、【设置尺寸 进度条线】。

移动：[[(current_time / end_time)*(469)]]

设置尺寸：[[current_time / end_time * width + 6]]

其中：

 current_time ：变量，当前时间，每1000ms+1。

 end_time：变量，总时长，这里指4分29秒 = 269秒。通过默认值设置269.

 469：底层灰色线段长度。

 width：变量，动态面板 - 进度条总长度，通过载入时获取[[This.width]]

 6：进度条 - 圆半径。

22/08/24

M