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

原创已于 2022-09-09 15:03:07 修改 · 858 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#axure

于 2022-08-29 17:30:30 首次发布

1.4 Axure RP 9 for mac 专栏收录该内容

29 篇文章

订阅专栏

本文介绍如何使用Axure设计带有动态进度条的音乐播放器，包括进度条的实现原理、设置尺寸动作的应用场景以及利用变量进行复杂计算的方法。

一、成品效果

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：进度条 - 圆半径。