1.4_8 Axure RP 9 for mac 高保真原型图 - 案例7 【旋转的唱片5】进度条&计时器关联

本文链接：https://blog.csdn.net/qq_43529621/article/details/126589919

一、成品效果

版本更新

一、进度条绑定时间
1.1 通过拖拽、点击改变进度条后，时间也按照进度比例，变更为对应时间。

历史版本：Axure Cloud 案例6 -【旋转的唱片4】进度条_拖拽、点击
一、进度条
1.1 通过拖拽方式，可以改变进度条位置。
1.2 通过点击方式，可以改变进度条位置。

历史版本：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】计时器、
案例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 使用变量的好处：当调整进度条位置后，不需要重新修改交互中变量的取值逻辑
This.width	This表示当前元件，left表示左边界坐标。在当前demo中，如果进度条宽度不作调整，则固定为471 使用变量的好处：当调整进度条宽度后，不需要重新修改交互中变量的取值逻辑
end_time	表示歌曲总时长，以晴天为例，4分29秒 = 269秒，则end_time默认值为269。