1.4_7 Axure RP 9 for mac 高保真原型图 - 案例6 【旋转的唱片4】进度条_拖拽、点击

相关链接

• 目录
• Axure中文学习网
• AxureShop
• AxureShop-QA

---

 1. 熟悉 动态面板 的 拖拽、点击动作的使用场景
 2. 掌握 动态面板 中配置 拖拽 功能实现原理（只有动态面板才支持拖拽功能）
 3. 掌握 变量 获取鼠标横坐标公式 Cursor.x
 4. 掌握 动态面板 中配置 边界的方式

一、成品效果

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】进度条_滚动

三、制作方法

  主要通过给动态面板 - 进度条增加交互功能：点击、拖拽。通过获取当前鼠标的x轴坐标【Cursor.x】来设置进度条位置。
  另外，需要把进度条的两条线移出动态面板，因为互动一般只能对圆点生效，不对进度线生效。

 

其中：6是进度条圆的半径，45是进度条x轴位置坐标

---

22/08/29

M