1.4_17 Axure RP 9 for mac 高保真原型图 - 案例16 【动态面板-滚动条6】手动制作滚动条

相关链接

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

---

 1. 了解 手动制作滚动条 的原理
 2. 掌握 鼠标悬停 在本案例中的用法

一、成品效果

Axure Cloud 案例16【动态面板-滚动条6】手动制作滚动条

 一、滚动条
  1.1 取消原动态面板，垂直滚动 效果。
  1.2 使用 手动制作滚动条，并与图片内容交互，按比例浏览图片内容。

 二、热区
  2.1 删除原热区，手动制作滚动条方式，不需要依靠热区驱动。

历史版本：Axure Cloud 案例15 【动态面板-滚动条5】深色模式 - 按钮效果升级
 一、滚动条
  1.1 使用Sample UI Patterns元件库的开关，改造成新的按钮样式

历史版本：Axure Cloud 案例14 【动态面板-滚动条4】深色模式 - 图层处理
 一、background变量
  1.1 默认值为0，表示图层顺序。可能取值有{0,1}。0=浅色图层位于上方，1=深色图层位于上方。

 二、动态面板a
  2.1 只有一个子页面，使用 浅色 图片，图层默认为 上层。
  2.2 交互：滚动时，动态面板a 的热区移动到 [[This.scrollY]]。
  2.3 交互：滚动时，动态面板b 的热区移动到 [[This.scrollY]]。

 三、动态面板b
  3.1 只有一个子页面，使用 深色 图片，图层默认为 下层。
  3.2 交互：滚动时，动态面板a 的热区移动到 [[This.scrollY]]。
  3.3 交互：滚动时，动态面板b 的热区移动到 [[This.scrollY]]。

 四、按钮
  4.1 文字修改为 深色模式。
  4.2 浅色模式下：点击后，background变量=1，浅色模式置于底层。
  4.3 深色模式下：点击后，background变量=0，深色模式置于底层。

历史版本：Axure Cloud 案例13-【动态面板-滚动条3】双向同步滚动
 一、focus变量
  1.1 默认值为0，表示当前操作的窗口，可能取值有{0,1,2}。0=外部，1=动态面板a，2=动态面板b。

 二、动态面板a
  2.1 交互：鼠标移入时，focus = 1。
  2.2 交互：鼠标悬停时，focus = 1。
  2.3 交互：鼠标移出时，focus = 0。

 二、动态面板b
  3.1 交互：鼠标移入时，focus = 2。
  3.2 交互：鼠标悬停时，focus = 2。
  3.3 交互：鼠标移出时，focus = 0。
  3.4 滚动时，动态面板a 同步滚动 并且比例相同。

历史版本：Axure Cloud 案例12 【动态面板-滚动条2】单向同步滚动
 一、动态面板a
  1.1 page1时：滚动时，动态面板b 同步滚动 并且比例相同。
  1.2 page1时：滚动到底部时，动态面板b 同步滚动到底部。
  1.3 page2时：滚动时，动态面板b 同步滚动 并且比例相同。
  1.4 page2时：滚动到底部时，动态面板b 同步滚动到底部。
  1.5 page1切换page2时：page1与page2不能同步滚动，重新回到page最上方。

 二、动态面板b
  2.1 支持 滚动 浏览，但不影响 动态面板a 的浏览进度。

历史版本：Axure Cloud 案例11-【动态面板-滚动条1】
 一、切换
  1.1 page1时：点击切换面板a，可以切换到page2。
  1.2 page2时：点击切换面板a，可以切换到page1。
  1.3 切换页面后不保存浏览进度，从头部重新浏览。

 二、滚动
  2.1 支持浏览方式：鼠标滚轮。
  2.2 支持浏览方式：拖拽进度条。
  2.3 支持浏览方式：点击进度条。
  2.4 范围：动态面板所有子页面（强制）。

---

二、素材准备

  实现拖动效果，只能使用元件 动态面板-页面拖拽 。动态面板-页面拖拽 与动态面板-【主内容】浅色模式、动态面板-【主内容】深色模式 高度相同，都为600。

  另外，为了添加鼠标悬停后的变色效果，需要在动态面板下添加 2个子页面。两个子页面中的滚动条 尺寸相同，颜色不同，滚动进度相同，从而达到案例中的效果。

其他素材参考案例14 【动态面板-滚动条4】深色模式 - 图层处理，需要手动制作一个滚动条：

关于 拖动时 详细配置如下：

[[This.height]] ：当前元件的高度，这里直接输入600效果相同。
 

关于 进度条 尺寸：

关于 图层 顺序，动态面板-页面拖拽 一定要放在最上层：

---

三、制作方法

首先要清楚，本案例与案例15 【动态面板-滚动条5】深色模式 - 按钮效果升级的区别：
 1.案例15原理是 窗口滚动，计算获取坐标时使用 [[This.scrollY]] 获取窗口坐标。
 2.本案例原理是 元件移动，计算获取坐标时使用 [[This.y]] 获取当前元件的坐标。

如果使用了错误的变量，那么变量值只能获取到0，交互也不会有任何反应。

 

先取消案例15 【动态面板-滚动条5】深色模式 - 按钮效果升级中，两个【主内容】面板的滚动效果，选中 从不滚动。

动态面板-页面拖拽 尺寸如下：

置于主内容面板的右侧，高度一致

动态面板-页面拖拽 配置交互如下：

由于是 跟随垂直拖动 ，只能选择面板内元件
 

【静置】拖拽进度条 配置交互如下：

移动【主内容】：[[(-(1703-600)) * This.y / (600 - 20)]]
翻译：图片y轴坐标 = - (图片高度 - 面板高度) * 高度比例系数 （高度比例系数 与滚动条当前y轴坐标、动态面板高度、滚动条高度相关）
 
其中：
1703：【主内容】-浅色模式 的高度
1703：【主内容】-深色模式的高度
600：动态面板-【主内容】浅色模式的高度
600：动态面板-【主内容】深色模式的高度
20：【滚动】浅色-热区的高度
20：【滚动】深色-热区的高度
This.y：当前元件在动态面板内的Y轴坐标
 
↑解释↑：动态面板左上角点坐标为 0,0 需要区别该坐标系与绘图区坐标系的区别。
关于坐标系介绍可以参考 案例8 【动态面板】浏览、翻页、回弹
 

---

22/09/14

M