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

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

时间：2018-07-19 20:28:21

一、成品效果

Axure Cloud 案例8 -【动态面板】浏览、翻页、回弹

版本介绍

一、推荐

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.回弹

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

回弹坐标计算：顶部回弹至(0,0)即可，底部回弹y轴坐标=动态面板长度-内容长度。