一、成品效果

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

1.4_6 Axure RP 9 for mac 高保真原型图 - 案例5 【旋转的唱片3】进度条_滚动相关推荐

1.4_7 Axure RP 9 for mac 高保真原型图 - 案例6 【旋转的唱片4】进度条_拖拽、点击
相关链接目录 Axure中文学习网 AxureShop AxureShop-QA 案例目标 1. 熟悉动态面板的拖拽.点击动作的使用场景 2. 掌握动态面板中配置拖拽功能实现原理( ...
1.4_8 Axure RP 9 for mac 高保真原型图 - 案例7 【旋转的唱片5】进度条计时器关联
相关链接目录 Axure中文学习网 AxureShop AxureShop-QA 案例目标 1. 了解进度条绑定时间的实现原理 2. 掌握变量的高级使用技巧一.成品效果 Axure C ...
1.4_10 Axure RP 9 for mac 高保真原型图 - 案例9 【按钮】单选按钮组
相关链接目录 Axure中文学习网 AxureShop AxureShop-QA 案例目标 1. 了解单选功能的实现原理 2. 掌握按钮的常见使用方式 3. 掌握指定单选按钮的组功 ...
1.4_17 Axure RP 9 for mac 高保真原型图 - 案例16 【动态面板-滚动条6】手动制作滚动条
相关链接目录 Axure中文学习网 AxureShop AxureShop-QA 案例目标 1. 了解手动制作滚动条的原理 2. 掌握鼠标悬停在本案例中的用法一.成品效果 Axure ...
1.4_18 Axure RP 9 for mac 高保真原型图 - 案例17 【js-echarts官网】
相关链接目录 Axure中文学习网 AxureShop AxureShop-QA 最开始只是想尝试一下,在Axure RP9中引用echarts图片.访问了一下echarts官网 ,后来对官网的 ...
1.4_16 Axure RP 9 for mac 高保真原型图 - 案例15 【动态面板-滚动条5】深色模式 - 按钮效果升级
相关链接目录 Axure中文学习网 AxureShop AxureShop-QA 案例目标 1. 了解元件库,会使用元件库中的成品进行改造 2. 掌握在概要模块的使用技巧一.成品效果 ...
1.4_15 Axure RP 9 for mac 高保真原型图 - 案例14 【动态面板-滚动条4】深色模式 - 图层处理
相关链接目录 Axure中文学习网 AxureShop AxureShop-QA 案例目标 1. 了解深色模式的实现原理 2. 掌握在概要模块中,显示/隐藏对象 3. 掌握置于顶 ...
1.4_3 Axure RP 9 for mac 高保真原型图 - 案例2 【旋转的唱片】
相关链接目录 Axure中文学习网 AxureShop AxureShop-QA 案例目标 1. 了解实现选中效果的原理 2. 熟悉动态面板的使用场景 3. 熟悉变量值的使用场景 ...
1.4_5 Axure RP 9 for mac 高保真原型图 - 案例4 【旋转的唱片2】计时器
相关链接目录 Axure中文学习网 AxureShop AxureShop-QA 案例目标 1. 了解计时功能的实现原理 2. 熟悉交互功能中,情形(case) 的使用场景 3. 掌握 ...

1.4_6 Axure RP 9 for mac 高保真原型图 - 案例5 【旋转的唱片3】进度条_滚动