1.4_9 Axure RP 9 for mac 高保真原型图 - 案例8 【动态面板】浏览、翻页、回弹

本文链接：https://blog.csdn.net/qq_43529621/article/details/126639877

一、成品效果

版本介绍

一、推荐
1.1 点击小说跳转到小说页面
1.2 向右拖拽 跳转到小说页面
1.3 上下拖拽 可以浏览当前页面，并且不影响其他页面
1.4 切换页面后，保留当前 浏览进度
1.5 浏览时，允许超出一定的页面范围，超出后自动回弹至边界处
二、小说
2.1 点击推荐跳转到推荐页面
2.2 向左拖拽 跳转到推荐页面
2.3 上下拖拽 可以浏览当前页面，并且不影响其他页面
2.4 切换页面后，保留当前 浏览进度
2.5 浏览时，允许超出一定的页面范围，超出后自动回弹至边界处

二、素材准备

从任意有分栏、翻页功能的app截图（至少2个分栏，页面长度大于1页），并按顺序摆放

三、制作方法

首先，只有动态面板才支持拖动功能，页面功能中的浏览（拖动时）、翻页（向左拖动结束时、向右拖动结束时）、回弹（拖动结束时），都需要在动态面板中实现。
而且动态面板本身支持多个分页，这里需要创建2个动态面板，分别存放标题和内容。

每个动态面板内分成两页。页面中存放对应的素材。另外需要注意，画板的背景色为浅灰色，在动态面板之外添加一个背景为纯白色，是制作回弹效果时，素材超出动态面板范围后，不会显示出画板的背景色（灰色）。

1.浏览

在【动态面板-内容】中配置交互-拖动时。需要注意，面板状态和图片要对应。

需要注意的是：这里配置的上下边界为顶部top < 100，底部bottom > 500。

实际上，顶部位置应该<0，底部>600。其中0是动态面板的顶部，600是动态面板的高度。这里顶部和底部配置时各有100的偏差，是为了制作回弹的效果，允许超出一定范围，超出范围后会自动回弹。

2.翻页

在【动态面板-内容】中配置交互-向左拖动结束时、和向右拖动结束时。

3.回弹

在两个内容页面顶部、底部分别添加热区（热区的优点在于编辑时可以看到有颜色，实际预览时看不到颜色，便于调整），热区与内容的边界要贴合。当页面划出自身长度范围后，不再与热区接触，触发【移动】的动作。记得在动态面板下面使用元件->矩形增加一个背景(白色)，否则图片超出范围后会显示出绘图区底色(我这里设置的是灰色)。