Origami Studio 教程 第六节 水平滚动

创建水平页面滚动。

有时候需要实现分页滚动或循环幻灯片。通过我们已经掌握的知识搭建这个Facebook Events 的原型，学会如何创建分页滚动原型。下载教程文件。

开始前先下载好安装文件和教程文件。底下的网盘链接里有安装文件 、一个案例文件夹、一个教程文件夹；按自己的需要下载。

选择教程文件中对应名称的文件夹下载，内包含一个（开始）和一个（已完成）文件；（开始）文件用来和教程同步操作，（已完成）是最终结果。

▲▲

1. 设置

打开标记为（开始）的文件。我们有五张尺寸相同的卡片放在需要横向滚动的组 H-Scroll 内，卡之间的相距 10。H-Scroll 的宽度是卡片和间距的总和，最左和最右卡外各有 10 的外边距。

▲ 检查每张卡，了解锚定和位置属性如何影响位置。

▲▲

2. 添加滚动

选择 H-Scroll 图层右上角 Touch 菜单中的 Scroll X 添加横向滚动交互。

编辑器出来了俩模块（下面图中那样）。

可以横着滚动 H-Scroll 组，但是是自由滚动。要实现滚动分页，我们需要将 Scroll X 输入口的属性从Free 改为 Paging。

对于单个卡片宽度等于页面的翻页滚动，这就算完成了。

但卡片宽度小于屏幕的宽度，所以我们需要告诉Scroll 模块这些卡或页面有多大的一个。

添加一个 Scroll Setting 模块。

把 Scroll Settings 模块的输出口连接到 Scroll 模块的 Settings 接口。

这里有很多项属性设置，但一般用不到那么多。首先设置页面宽度，把 Page Size W 的值改为275 - 单个卡片的宽度。

将 Page Padding W 改为10 - 卡之的间距。没有改变高度是因为，Scroll 只有水平滚动，改了垂直方向的也没有用啊。

▲ 变更高度在这里不会生效。

现在再滚动，卡片是一张一张翻动的，会自动吸附一张卡位置。第一张左对齐，最后一张右对齐的，中间的居中对齐。

Android 的动画会比 iOS 的更僵硬。可以将橡皮筋张力 Rubber Band Tension 改为 440，橡皮筋摩擦力 Rubber Band Friction 改为 46。

▲ 默认值是以 iOS 的值为标准。

剪切滚动的尺寸

Origami 中的有 “橡皮筋” 效果。iOS系统中很常见。

但是，假设这是一个 Android 原型，不希望在滚动开始和结束时有橡皮筋效果。

我们需要定义滚动的边界 - 起始 X 位置和结束 X 位置。我们需要使用 Clip 模块来定义值。

添加一个 Clip 模块到编辑器。已知 H-Scroll 图层的 X 起始位置为 0。滚动到最后一张卡片后显示的值为-1075。

▲ 滚到最后一张卡后的 X 位置。

因为-1075 是一个负数，小于0，所以 Clip 模块 Min 输入口值为-1075， Max 输入口值为 0。

▲ Clip 模块的值。

连接 Scroll 模块的 X 输出口到 Clip 模块的 Value 输入口。然后连接 Clip 模块的输出口到蓝色的 H-Scroll 模块的输入口。

▲连接成这样。

再滚一滚，就能发现滚动到第一张和最后一张时的橡皮筋效果没有了。

来源：UI中国

关键字：产品经理

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！