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

相关链接

• 目录
• Axure中文学习网
• AxureShop
• AxureShop-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