下載教程文件** ·····密碼: ahgt**

選擇對應名稱的文件夾下載，內包含一個（開始）和一個（已完成）文件；（開始）文件用來和教程同步操作，（已完成）是最終結果。

Create horizontal paging carousels. 創建水平頁面滾動。

Sometimes we want scrolling to be paginated, or in a carousel. We are going to build this Facebook Events prototype, with paginated scrolling, building upon what we've learnt in the Scrolling Views. Make sure you download the tutorial files to follow along.

有時候需要實現分頁滾動或循環幻燈片。通過我們已經掌握的知識搭建這個Facebook Events 的原型，學會如何創建分頁滾動原型。下載教程文件。

Setting up 配置

If you're starting from the tutorial files, you should see that we have our assets in place. We have five cards for our carousel, each the same width, and each the same distance from each other at 10 points. They are placed in a Group that is the width of all the cards in line, with the usual 10 points padding at the start and end.

打開標記為（開始）的文件。我們有五張尺寸相同的卡片放在需要橫向滾動的組 H-Scroll 內，卡之間的相距 10。H-Scroll 的寬度是卡片和間距的總和，最左和最右卡外各有 10 的外邊距。

Inspect each card to understand how the Anchor and Position properties affect placement. 檢查每張卡了解錨定和位置屬性如何影響位置。

Adding scroll 添加滾動

We add scroll like any other interaction — by hovering over the layer, clicking on Touch, and then clicking on a Scroll option. We want horizontal scrolling, so select Scroll X.

選擇 H-Scroll 圖層右上角 Touch 菜單中的 Scroll X 添加橫向滾動交互。

What we end up with on the Patch Editor is a Scroll patch, connected directly to the X position of that layer — the H-Scroll Group.

編輯器出來了倆模塊（下面圖中那樣）。

Scrolling the H-Scroll Group works fine, but it is set to Free scrolling. To make the Scroll Paging, we need to change the Scroll X input from Free to Paging.

可以橫著滾動 H-Scroll 組，但是是自由滾動。要實現滾動分頁，我們需要將 Scroll X 輸入口的屬性從Free 改為 Paging。

For any full-width paging scrolling, this would be fine. But because our cards are actually smaller than the width of the screen, we need to tell the Scroll exactly how big one of these cards, or pages, is.

對于單個卡片寬度等于頁面的翻頁滾動，這就算完成了。
但卡片寬度小于屏幕的寬度，所以我們需要告訴Scroll 模塊這些卡或頁面有多大的一個。

To give the Scroll settings, we need to add a Scroll Settings patch. Double-click on the Patch Editor Cmd Enter and type to find Scroll Settings. Press Enter.

添加一個 Scroll Setting 模塊。

Connect the output of the Scroll Settings patch to the Settings input on the Scroll patch.

把 Scroll Settings 模塊的輸出口連接到 Scroll 模塊的 Settings 接口。

There's a ton of settings here, and we don't usually need to use them all. Start by changing the Page Size input to have a width of 275 — the same as an individual card.

這里有很多項屬性設置，但一般用不到那么多。首先設置頁面寬度，把 Page Size W 的值改為275 - 單個卡片的寬度。

Change the Padding to a width of 10 — the same as the padding between each of the cards. We are not changing the height from 0 because vertical scrolling is not applicable in this prototype.

將 Page Padding W 改為10 - 卡之的間距。沒有改變高度是因為，Scroll 只有水平滾動，改了垂直方向的也沒有用啊。

Changing the Height properties of any of these inputs would not have an effect on our prototype. 變更高度在這里不會生效。

Now when we Scroll, our cards take up one swipe or scroll movement. The first and last are aligned to the sides, and the middle ones are centered.

現在再滾動，卡片是一張一張翻動的，會自動吸附一張卡位置。第一張左對齊，最后一張右對齊的，中間的居中對齊。

Android is a little more rigid than these animation inputs. We can change Rubber Band Tension to something like 440, and the Rubber Band Friction to 46.

Android 的動畫會比 iOS 的更僵硬。可以將橡皮筋張力 Rubber Band Tension 改為 440，橡皮筋摩擦力 Rubber Band Friction 改為 46。

Scroll Settings uses iOS behavior by default. 默認值是以 iOS 的值為標準。

Clipping the scroll

Scrolling in Origami has the 'rubber banding' effect by default. This is what you see in many use cases of scrolling, and almost everywhere in iOS. This is an Android prototype however, so we do not want this over-drag at the start and end of the Scroll。

Origami 中的有 “橡皮筋” 效果。iOS系統中很常見。
但是，假設這是一個 Android 原型，不希望在滾動開始和結束時有橡皮筋效果。

We need to contain the Scroll to certain bounds — the Start X position and End X position. We need to use the Clip patch to contain values.

我們需要定義滾動的邊界 - 起始 X 位置和結束 X 位置。我們需要使用 Clip 模塊來定義值。

Double-click on the Patch Editor Cmd Enter and type to find Clip. Press Enter . We know our H-Scroll Position X start value is 0. Scrolling to the last card should show a value of -1075.

添加一個 Clip 模塊到編輯器。已知 H-Scroll 圖層的 X 起始位置為 0。滾動到最后一張卡片后顯示的值為-1075。

The Position X at the last card. 滾到最后一張卡后的 X 位置。

Our Clip patch Max input should be 0, since that is the larger of the values. Our last card is, again, at -1075. Because that is a negative number and therefore less that 0, make -1075 the value of the Clip Min input.

因為-1075 是一個負數，小于0，所以 Clip 模塊 Min 輸入口值為-1075， Max 輸入口值為 0。

The Clip patch with new values. Clip 模塊的值。

Connect the Scroll X output to the Clip Value input. Then connect the output of the Clip to the input of the blue H-Scroll position Layer Property Patch.

連接 Scroll 模塊的 X 輸出口到 Clip 模塊的 Value 輸入口。然后連接 Clip 模塊的輸出口到藍色的 H-Scroll 模塊的輸入口。

Connections between your patches should look similar to this. 連接成這樣。

Once this is done, try scrolling once again. As soon as we get to the start and end of our H-Scroll Group, it becomes clipped within the two values.

再滾一滾，就能發現滾動到第一張和最后一張時的橡皮筋效果沒有了。

相關教程

5. 滾動 Scrolling Views
滾動頁面。

相關案例

5. Facebook New Stories
當新聞滾動一定距離時觸發提示出現。

6. Facebook Popular Events

創建一個簡單的水平滾動。

11. Messenger Home
滾動對話列表。

相關模塊

Clip Scroll Scroll Settings

NEXT UP
7. 切換屏幕 Screen Transitions
創建屏幕切換流程。