1.4_8 Axure RP 9 for mac 高保真原型图 - 案例7 【旋转的唱片5】进度条计时器 关联
一、成品效果
Axure Cloud 案例6 -【旋转的唱片5】进度条&计时器 关联
新增功能点：1.进度条与计时器关联
二、素材准备
需要先依次完成：
案例2 【旋转的唱片】、
案例4 【旋转的唱片2】计时器、
案例5 【旋转的唱片3】进度条_滚动、
案例6【旋转的唱片4】进度条_拖拽、点击。
三、制作方法
主要通过给动态面板 - 进度条 已有交互功能【点击、拖拽】中，增加新的动作：设置变量值、设置文本
另外，在之前的基础上要新增4个新的变量，对应计时器的四个文本框。
| 变量名 | 含义 | 变量值 | 说明 |
|---|---|---|---|
| current_time | 当前播放总秒数 | [[Math.floor((Cursor.x - This.left) / This.width * end_time) + 1]] | 由 current_time / end_time = (Cursor.x - This.left) / This.width => current_time = (Cursor.x - This.left) / This.width * end_time 最后对计算结果向上取整，因为Axure只支持向下取整函数Math.floor，则采用向下取整后+1的方式。 向上取整可以保证改变进度条后，下一次触发滚动时，不会向前滚动一小格。 |
| current_minute_tens | 当前计时器时间 （分钟 - 十分位） | [[Math.floor(current_time / 60 / 10)]] | 简单的数学计算，例如1357秒对应分钟数十分位 => Math.floor( 1357 / 60 / 10) = Math.floor( 2.2627 ) = 2 |
| current_minute_ones | 当前计时器时间（分钟 - 个位） | [[Math.floor(current_time / 60 - current_minute_tens * 10)]] | 简单的数学计算，例如1357秒对应分钟数个位 => Math.floor( 1357 / 60 - 2 * 10) = Math.floor( 22.6167 - 20 ) = Math.floor( 2.6167 ) = 2 |
| current_seconds_tens | 当前计时器时间 （秒 - 十分位） | [[Math.floor((current_time - current_minute_tens * 600 - current_minute_ones * 60 ) / 10 )]] | 简单的数学计算，例如1357秒对应秒数十分位 => Math.floor( ( 1357 - 2 * 600 - 2 * 60 ) / 10 ) = Math.floor( ( 1357 - 1200 - 120 ) / 10 ) = Math.floor( ( 37 ) / 10 ) = Math.floor( 3.7 ) = 3 |
| current_seconds_ones | 当前计时器时间（秒 - 个位） | [[Math.floor(current_time - current_minute_tens * 600 - current_minute_ones * 60 - current_second_tens * 10 )]] | 简单的数学计算，例如1357秒对应秒数个位 => Math.floor( 1357 - 2 * 600 - 2 * 60 - 3 * 10 ) = Math.floor( 1357 - 1200 - 120 - 30 ) = Math.floor( 7 ) = 7 结论：1357秒对应计时器时间为 22分37秒 可以自行反向验证一下22分37秒是否等于1357秒 ( 22 * 60 + 37 = 1357) |
变量值说明：
| 变量值 | 含义 |
|---|---|
| [[ ]] | 两个中括号内的值，会按照变量处理。否则只会视作普通文本处理 |
| Math.Floor() | 向下取整，例如 Math.Floor(2.2) = 2 |
| Cursor.x | 当前鼠标的x轴坐标值 |
| This.left | This表示当前元件，left表示左边界坐标。 在当前demo中，如果进度条位置不作调整，则固定为45 1111  使用变量的好处：当调整进度条位置后，不需要重新修改交互中变量的取值逻辑 |
| This.width | This表示当前元件，left表示左边界坐标。 在当前demo中，如果进度条宽度不作调整，则固定为471  使用变量的好处：当调整进度条宽度后，不需要重新修改交互中变量的取值逻辑 |
| end_time | 表示歌曲总时长，以晴天为例，4分29秒 = 269秒，则end_time默认值为269。 |
四、操作步骤（简略介绍）
略
22/08/31
M