介绍
滚动选择器非常直观，而且非常常见。最常见的场景是你在在线表单中选择出生日期，或从一个较短的列表中选择某个项目时。你要做的就是在选择器中滚动到目标项，然后，搞定！
虽然滚动选择器非常易用、易懂，但它也可以带来非常愉悦的使用体验！在本文中，你将学习如何创建一个滚动的滚轮选择器，并通过使用 ProtoPie 的 Chain 和 3D Rotate 功能，提供额外的视觉纵深感。
你将学到什么
使用分页容器（Paging Container）制作可滚动视图
使用变量（Variable）获取滚动数值
基于滚动数值，使用Chain和3D Rotate增加额外的纵深感
使用Start为每个列表项设置初始旋转
最终，你将能够做出像这样的效果！
分步说明
1. 使用分页容器创建可滚动视图
这里，我们将创建一个可滚动的基础组件。
1. 添加一个Paging Container，并将尺寸设置为327 x 216，使其覆盖场景中的白色框。为了便于识别，将该容器重命名为Paging。
2. 选中所有月份图层，即June、July，一直到December。将这些图层拖入 Paging Container。这就是将在容器内变为可滚动的列表。
💡 为Paging Container使用这些尺寸（尤其是高度216）非常重要，因为：
它有助于在滚动时让每个列表项在容器中居中。每个月份图层的高度都是72，而在分页容器中，会同时显示三个这样的图层——因此高度为216（即3 ✕ 72）。
它会成为屏幕上唯一响应用户触摸滚动的区域。
3. 选中 Paging Container，并在属性面板中进行以下更改。
将Page by从Container改为Custom，并将数值设为72。这样做会让每次滚动间隔（分页）等于 72，这与每个月份图层（例如June）的高度72直接对应。二者配合可确保每个月份图层在滚动时都能完美对齐。
将Scroll改为72。这样会在场景开始时将滚动偏移设置为 72。由于列表中的第一个月份是June（高度为 72），这个 72 点偏移将使第二个列表项（即July）显示为被选中状态。
4. 在列表末尾添加额外留白，使最后一项（即December）能够在滚轮中央显示为选中状态。为此，我们可以添加一个矩形（rectangle）。将其重命名为Margin。
确保Margin位于Paging容器内，并且与其他月份图层尺寸一致，即217 ✕ 72。这样可以确保December出现在中间位置。
另外，确保Margin的Opacity设置为0，否则你会看到列表中出现一个不美观的额外项。
5. 再次选中容器Paging（once more）*,* 并在属性面板中确保启用Clip Sublayers。这样会隐藏组件边界框外部的所有内容。
2. 使用变量获取滚动数值
为了实现后续交互，我们需要知道用户滚动了列表多远。为此，我们将使用一个变量来检测并存储滚动值。步骤如下：
1. 为此场景创建一个变量。为了便于识别，将该变量重命名为Scroll。选择For this scene很重要，因为我们将把公式直接赋给这个变量，而这仅适用于场景变量。
2. 选中变量Scroll后，在属性面板中启用Use Formula选项。
3. 在下方出现的公式框中，使用公式 'Paging'.scrollOffset。其中 Paging指定容器Paging，scrollOffset返回其当前的滚动值。
4. 点击 Scroll 旁边的调试图标，即可在预览窗口中实时查看变量值。再次点击该图标可在预览窗口中隐藏滚动值。
3. 基于滚动数值，使用Chain和3D Rotate增加额外纵深感
这一步是打造真实且视觉愉悦原型的关键。具体如下：
1. 为 Paging Container 添加一个Chain触发器，并在属性面板中将数值设置为Scroll。
2. 为图层June.添加一个3D Rotate响应。
在3D rotate的属性面板中，使用以下数值：
在Range 1开始时，Paging 的滚动值为0时，应将图层June的 3D 旋转设为0，即保持当前平面状态。在 Range 1 结束时，将 Paging 滚动到72时，应将图层June旋转到35度。
将Rotation Direction设置为upward。
以上设置会让June在 Paging 的滚动从 0 到 72 时，向上从0º旋转到35º。
3. 同样地，为July图层添加3D Rotate响应。这一次，我们需要在 Paging 向上滚动时让图层向上旋转，在 Paging 向下滚动时让图层向下旋转。为此，我们将使用两个Range。
对于 Range 1，将Paging从 0 滚动到 72 时，应让July从 -35º 旋转到 0º。由于使用了负角度（-35º），方向设置为upward。
对于 Range 2，将Paging从 72 滚动到 144（即 72 ✕ 2，因为 July 是第二个项）时，应让July从 0º 旋转到 35º。方向设置为upward。
4. 这个过程需要对每个月份图层重复一遍。
查看完成版 pie，确保你已正确设置 chain 数值。
4. 使用Start为每个列表项设置初始旋转
正如你在预览窗口中看到的（或在上方的录屏中所示），月份图层的旋转角度会从 0 瞬间变化——例如，注意September首次出现在屏幕上时，会从平面状态突然变为旋转状态。
这是因为我们为每个图层定义了特定滚动范围内的 3D 旋转，但像September这样的图层在原型开始时位于该范围之外。当它们进入该范围时，3D 旋转会瞬间发生，因此看起来会有些突兀。
从视觉上看，这有点像卡顿，但很容易修复！方法如下：
1. 在交互面板中点击Add Trigger，并选择Start。
2. 在 Start 触发器内，为June图层添加一个3D Rotate响应。将 Rotation 改为Rotate To，并将数值设为35。方向设为upward。最后，将Duration设为 0。
💡 将时长设置为 0会在场景开始时立即将图层旋转到 35º。我们希望该效果是瞬时的，这样用户在场景开始时就不会看到动画过程。
3. July不需要设置 Start 值，因为场景开始时它默认就在 0º。对于August 以及后续每一层，需要重复上述过程——但只改一项：Rotate To数值应设为-35º。
4. 大功告成！在预览窗口中试试你的原型吧。
就是这样！
干得漂亮！你已经学会了如何创建分页容器，并通过变量设置其初始值和实时滚动值。你还学会了如何将Chain触发器和3D Rotate响应应用到该滚动值上。最后，你也了解了使用Start初始化场景的作用，以及它所带来的优化。
试着用这些知识多做尝试，你将能够创建出更有趣的交互！我们很期待看到你的创意实验。创建你自己的原型，并在Twitter或Instagram上带上#MadeWithProtoPie分享出来吧。
