当我们浏览互联网时，很容易找到带有循环滚动轮播的网站。在首页使用它来展示图片或横幅是很常见的做法。在这篇文章中，我们将学习如何为你的网站制作一个循环滚动轮播原型，这可以通过滚动触发器、变量和条件来实现。
概览
你将学到什么
一步一步：如何制作循环滚动轮播原型
1. 使用分页容器制作轮播视图。
2. 根据滚动偏移更改图片名称
3. 制作循环滚动
你的轮播原型完成了！
你将学到什么
使用 Paging Container 制作轮播视图原型
根据滚动偏移更改图片名称（耶，变量！）
制作循环滚动
最后，你将能够做出像这样的效果！
一步一步：如何制作循环滚动轮播原型
1. 使用分页容器制作轮播视图。
首先，我们需要把图片编组到一个容器中。我们需要使用分页属性，因为我们希望滚动动画能够“吸附”到图片上，而普通滚动会更灵活。
1.** 添加一个 Paging Container**，并将宽度设置为与屏幕同宽，高度设置为与图片高度相同。将需要滚动的元素拖拽到容器中——IMG 1、IMG 2 和 IMG 3。
2. 在 Paging Container 的属性面板中，将滚动方向设置为** horizontal**，因为图片将水平移动。点击左右箭头。让我们将这个容器重命名为“Paging”，这样更方便引用。
3. 如果你想禁用滑动交互，可以将 Paging Container 的高度设置为 0。原因是使用鼠标光标进行“滑动”并不自然。不过这是可选的——如果你想保留滑动交互，也完全可以！
4. 如果你决定隐藏滑动交互，添加一个新容器来裁切溢出的图片。将宽度设置为与屏幕同宽，高度设置为与图片高度相同。然后把 Paging Container 放进这个新容器里。
前往右侧属性面板，向下滚动并点击 Clip Sublayers 来隐藏溢出的图片。如果你缩小查看，会看到屏幕左右两侧溢出的图片现在已被隐藏。
5. 要让右箭头图标可点击，添加一个** Tap trigger。** 我们将使用** Scroll By **属性，让 Paging Container 的滚动位置移动 1171px。
💡 为什么我们使用“Scroll by”而不是“Scroll to”？
因为我们希望按一段距离移动，而不是设置到一个固定位置。例如，如果当前滚动位置是 0。使用“Scroll to”逻辑时，我们会把滚动位置移动到 1171px。那之后再点击右箭头会发生什么？什么都不会发生，因为它已经在 1171 了。
这就是为什么我们要使用“Scroll by”。无论当前情况如何、滚动位置在哪里，只要用户点击右箭头，我们就会让滚动移动 1171px。如果再点一次右箭头，它会再次移动 1171px。
💡 好吧，但为什么是滚动 1171？
因为 1171 是我们在该原型中网站的宽度。
6. 使用相同方法为左侧图标制作交互。不过将 scroll by 的值设置为 -1171。
💡 提示与技巧
为了制作后续交互，我们需要知道 Paging Container 的滚动偏移。快速获取滚动值的方法是使用变量来检测其值。下面是几个步骤：
1. 创建一个新变量。
2. 在属性面板中，点击 Use Formula 复选框以启用公式输入。这个公式仅适用于 Variables For This Scene。
3. 我们在这里使用的公式是 "Paging".scrollOffset，它会返回 Paging Container 当前的滚动值。
4. 在预览窗口中，你暂时还看不到任何内容。将鼠标悬停在你刚创建的变量上，然后点击右侧的“bug”图标。完成后，你就可以在左上角看到当前滚动值了。
2. 根据滚动偏移更改图片名称
现在我们可以检测滚动值了，就可以有一个指示器来帮助我们知道当前可见的是哪张图片。例如，我们可以显示当前正在查看图片的正确名称。开始吧！
1.** 给 Paging Container 添加一个 Detect trigger。** 在属性面板中，选择检测它的滚动值。我们在这里做的是“检测”滚动值的变化。然后根据滚动值，相应地更改图片标题。
💡 什么是 detect trigger？ 一种用于检测图层属性或变量变化的触发器。如果检测到变化，就会激活响应。
2. 为了正确获取图片名称，我们需要检测 Paging container 的滚动位置。添加一个条件：当 Paging Container 的滚动值为“0” 时。因为我们希望在页面尚未滚动时（滚动位置 = 0）显示正确的图片名称。
3. 当滚动值为 0 时，为标题添加 opacity 响应。 这里使用的值是：
Modern Architecture：Opacity = 100
Museum：Opacity = 0
Minimal Plaza：Opacity = 0
你也可以使用文本响应来更改文字。在这种情况下，你只需要 1 个标题图层。不过，opacity 可以带来更平滑的过渡效果。
我们也会把同样的逻辑应用到“ct-bg”图层中的背景图片。这些图片位于 ProtoPie 中创建的“Background Blur”图层之后。当“Modern Architecture”的 Opacity 为 100 时，“ct-bg”中对应名为“Modern Architecture”的图片也应设置为 Opacity 100。
将同样规则应用到其他图层：如果某张图片在轮播中可见，那么“ct-bg”中对应的图片 Opacity 应设为 100；而未显示的图片 Opacity 应设为 0。
如果你现在尝试原型，会发现无论显示哪张图片，Modern Architecture 都一直在那里。这是因为我们还没有为其他标题设置条件。接下来，我们将对 Museum 和 Minimal Plaza 做同样的设置。
4. 使用相同方法，当滚动值为 1171 和 2342 时添加响应
如果值 = 1171，
Modern Architecture：Opacity = 0
Museum：Opacity = 100
Minimal Plaza：Opacity = 0
如果值 = 2342，
Modern Architecture：Opacity = 0
Museum：Opacity = 0
Minimal Plaza：Opacity = 100
让我们在预览窗口中检查一下。现在你已经有了一个可点击滚动且标题动态变化的横幅！但是……还有点不对。到末尾后，横幅不会循环。接下来，让我们让它循环起来！
3. 制作循环滚动
要实现“循环”，我们需要复制第一张图片并放到最右边。同时，复制最后一张图片并放到最左边。这 2 张图片也必须在分页容器内。
现在你已经看到了，我们其实并不是真正在循环同一张图片。相反，我们是伪造循环，让它在原型中看起来像在循环。聪明吧？
1. 在 detect trigger 中添加一个条件。我们将使用 Paging Container 的滚动值，并设置为** -1171。**
2. 在该条件下，为分页容器添加 scroll to，使其滚动到 2342。将 duration 设置为** **0。
这就是我们刚才讨论的伪循环。所以每次滚动值为 -1171 时，该条件都会立即把它移动到 2342。 duration 需要为 0，因为我们不希望用户看到任何视觉变化。我们希望它瞬间滚动到 2342。
3. 再添加一个条件。当 paging 的滚动值为** 3513 时，将分页容器滚动到 0**。别忘了将** duration **设为 0，因为我们希望滚动是不可见且瞬时的。
让我们在预览窗口中检查一下……你刚刚完成了一个循环滚动轮播！
你的轮播原型完成了！
试着操作这个轮播，看看体验有多么顺滑！这很有趣。
在这个教程中，你实现了滚动触发器、变量和条件。更不用说循环效果了！
试着运用这些所学内容，你将能够创建出更有趣的交互！我们很期待看到你疯狂的实验。用 ProtoPie 创建你自己的原型，并在 Twitter 或 Instagram 上使用 #MadeWithProtoPie 分享它
