相关链接
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