相关链接
目录Axure中文学习网AxureShopAxureShop-QA案例目标
1. 了解深色模式的实现原理
2. 掌握 在概要模块中，显示/隐藏对象
3. 掌握置于顶层/底层动作
一、成品效果
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 范围：动态面板所有子页面（强制）。
二、素材准备
使用任意一张长图，这里我使用的是案例13 【动态面板-滚动条3】双向同步滚动中的图1，简单修改一下区别出浅色模式和深色模式。
用原图随便调一调参数：
三、制作方法
首先，也是需要两个动态面板互相驱动，但实现原理与案例13 【动态面板-滚动条3】双向同步滚动有些区别。
在案例13场景中，两个面板的高度不一致。而案例14中，两个面板与图片的高度完全一致。经过测试，是可以直接互相驱动的，而且不会导致永动机的bug。
猜测这可能是由于在Axure RP9中，计算后结果非整数时所导致的bug。
实现思路：
1. 将两个相同尺寸的动态面板重叠放置。
2. 动态面板同步滚动进度。
3. 点击按钮后通过改变图层顺序来切换显示的内容。
4. 使用变量记录（background）当前图层顺序，决定点击后执行的代码逻辑。
动态面板a配置交互如下：
[[This.scrollY]]
动态面板b配置交互如下：
[[This.scrollY]]
【滚动】热区配置交互如下
深色模式按钮配置交互如下
四、图层（概要）使用技巧
制作原型图时，如果元件较多，需要注意规范对每个元件都规范命名。主要是为了方便查找和区分。
技巧1：在元件叠放时，不方便操作下层元件。这时可以通过概要模块的在视图中显示按钮。来隐藏上层图层
隐藏前：
隐藏后：
技巧2：可以在概要模块中，通过拖拽的方式调整图层顺序，概要的顺序 = 图层顺序。
技巧3：大部分单个元件是不支持隐藏功能的（目前只发现动态面板可以隐藏），这时可以通过组合功能，将单个元件置于组合中，就可以看到隐藏按钮了。
技巧4：可以直接直接在概要中选中元件，方便对其进行样式、交互等配置。
选中面板a
选中面板b
技巧5：注意规范命名！这里可以根据元件名称搜索对应元件，在元件很多时，需要经常使用此功能。
22/09/13
M
如果觉得《1.4_15 Axure RP 9 for mac 高保真原型图 - 案例14 【动态面板-滚动条4】深色模式 - 图层处理》对你有帮助，请点赞、收藏，并留下你的观点哦！
