1.4_13 Axure RP 9 for mac 高保真原型图 - 案例12 【动态面板-滚动条2】单向同步滚动

相关链接

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

---

案例目标

 1. 了解 同步滚动 的实现原理
 2. 理解 同步滚动 的计算公式及原理
 3. 掌握元件 热区 驱动页面滚动的方式
 4. 掌握交互 滚动到元件 驱动页面滚动的方式
 5. 掌握变量 [[This.scrollY]] 获取 滚动窗口当前Y轴坐标

一、成品效果

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 范围：动态面板所有子页面（强制）。

二、素材准备

同案例11【动态面板-滚动条1】，另外创建两个动态面板，动态面板a （尺寸400x600），动态面板b （尺寸400x600）。
其中 图1、图2 -> 动态面板a、图3 -> 动态面板b。

三、制作方法

主要原理是通过交互中 滚动到元件 来实现驱动另一个动态面板的滚动效果。

需要注意：
 1.元件设置交互滚动到元件 的前提是，该元件 必须处于动态面板内
 2.滚动到元件是指 滚动到该元件坐标 的位置
 3.变量 [[This.scrollY]] 可以获取当前元件的滚动窗口坐在的Y轴坐标
 4.通过变量 [[This.scrollY]] 的一系列计算，驱动另一动态面板内热区的纵向移动
 5.热区交互 移动时，触发动作滚动到元件，从而达到同步滚动的效果
 6.难点在于 同步滚动时按比例滚动，因为两个页面的长度不一样
 7.目前仅发现 滚动到元件 这一种方式，驱动窗口的滚动
 8.窗口滚动 不需要配置顶部、底部边界，Axure RP9会自动判断
 9.窗口滚动 移动的是窗口， 案例8 【动态面板】浏览、翻页、回弹 中移动的是图片，虽然都有浏览的效果，但实现原理和获取变量的方式是完全不同的。

首先，动态面板a、切换按钮 已在案例11 【动态面板-滚动条1】中完成。
按照下图所示，只需要创建一个动态面板b，并将图片置于动态面板内。

在动态面板a-page1的、动态面板a-page2、动态面板b中的y轴坐标=0处，分别放置一个热区。

案例中为了方便演示，使用的是元件矩形，建议使用热区。

热区： 一般用于点击、交互，由于其不可见的特性，可以用来驱动页面的一些交互功能，又不会影响页面效果的展示。

每个 热区 都按下图中配置 交互 -> 移动时 -> 滚动到元件 (目标=当前 、滚动方式=垂直、动画=无)

动态面板a 配置交互如下：

情况(page1)时：[[This.scrollY / ( 1703 - 600) * (1391 - 700)]]
情况(page2)时：[[This.scrollY / ( 1000 - 600) * (1391 - 700)]]
翻译：热区b的y轴坐标 = 面板a当前窗口y轴坐标 * 高度比例系数 （高度比例系数 = 与a、b面板高度，a、b中图片高度相关）
 
其中：
1703：动态面板a-page1-图1的高度
1000：动态面板a-page2-图2的高度
1391：动态面板b-图3的高度
600：动态面板a的高度
700：动态面板b的高度
This.scrollY：动态面板a的窗口当前滚动Y轴坐标
 

---

22/09/13

M