请打开教程文件同步进行学习。

文件理解

打开文件，你会看到界面已经排列好了，横向滚动的内容都在 Group 里，有5张图。大家可以看到Group 的宽度是 1435，这是由内容决定的，5张图的宽度加上间距，间距为10，并且开始和结束位置也有10 的间距，加起来就是1435 了。

如果你自己完全新建的时候，要注意Anchor 的位置，还有坐标点的规划。

大家可以先摸索和熟悉一下界面基本的布局方法。基础的文件理解到此为此，下面开始学习。

Step 1

选择H-Scroll，Touch > Scroll X，基础的滚动效果添加，因为是横向滚动，所以选择的是X轴方向。

与上一个教程比较大的差别，我们这次滚动的添加是作用在 Group ，而不是图片。

在预览里面操作一下，检查滚动效果是否正常。

我们本次实现的动效是横向的，滚动距离如果太小，将不会滚动到下一内容，所以在这里要针对做一些处理。首先，把Scroll 组件内容的Free 改成 Paging.

在此了解一下 Scroll patch：

Content Layer   指的是滚动的对象

Enable    效果开关，勾掉就没效果了喔

Scroll X   X轴滚动的控制

• OFF          关闭滚动
• Free         自由滚动
• Paging     分页滚动，本教程重点

Scroll Y    Y轴滚动的控制

Settings   针对Scroll 组件的设置，本次教程的重点

OK，回到主题，此时在预览操作，应该能发现不同，不再能随意滚动到任意位置了。但也发现了明显的问题：滚动卡住的位置不对，卡片内容并没有默认居中，被遮挡了。接下来就是要解决问题

Step 2

鼠标放到 Settings 左侧的小圆点上，双击，如下图：

输入Scroll Settings，双击选择组件

基本上大部分属性都不用管，主要修正 2 个地方的数据，Page Size 图片的宽度 275，还有Page Padding 图片之间的间距 10，如下图：

现在我们再看看预览的效果，此时发现中间的内容都在屏幕居中了，第一和最后的也保持10 间距。基于安卓的一些动效特点，调整一下动效的数值

可以自己随便调整数值体验一下效果

Step 3

此时预览效果，“橡皮筋”效果是很棒的，但因为本次做的是Android 案例，在Android 中是没有这样的，iOS倒是无处不在。所以呢，我们要控制滚动效果，在开始、结束的时候不能再滚动。

这个时候我们需要添加控制，使用 Clip 这个 patch 达到我们的目的。

修正里面的数值，Min 为 -1075 ，也就是X轴的结束坐标，Max为 0 ，最开始的坐标，不太清楚这个数值哪来的可以看看Scroll patch 里X坐标的开始和结束的数值。

最后，让我们来连连线，如下图：

最后，在预览操作测试一下，你就发现再也不能任意继续拖动了，搞定！

学习总结：

• 界面组成的基本方法，明白横向滚动的处理方法；
• 深入学习Scroll patch 的属性，如何添加对应的控制patch；
• 初步认识 Scroll Settings；
• 初步认识 Clip patch；
• 初步认知Android 与 iOS 的动效差异；

最后，是本人基于动效比较真实场景的补充，这个就不在教程范围内了，后续会有相关教程