介绍
近年来，视差效果已成为网站和移动应用中的一种趋势。视差滚动效果是一种让网站背景以比前景更慢的速度滚动的技术。其目的是在网站的 2D 场景中实现一种深度错觉。
在本文中，我们将学习如何在 ProtoPie 中使用 Chain 触发器构建视差滚动效果。
你将学到什么
理解视差如何运作
创建滚动容器以实现可滚动视图
使用 chain 为背景元素设置不同速度
最后，你将能够做出像这样的效果！
理解视差如何运作
在开始制作原型之前，让我们先了解视差滚动是如何工作的，并组织好图层结构，以优化视差滚动效果。
它是如何运作的？
要实现视差效果，每个元素都会以不同的速度和时间移动。即使我们是在 2D 中滚动，这也能实现深度错觉。
经验法则是让“最远”的对象移动最少，就像现实世界中看到的那样。
原型图层结构
在视差滚动中，你需要将每个元素放在不同图层中，以便单独调整其属性。查看资源文件，看看图像资源是如何被放在独立图层中的。
分步说明
1. 创建滚动容器以实现可滚动视图
我们需要一个滚动容器来触发其他图层的视差运动。让我们添加一个全屏尺寸的 (1440900)* 滚动容器。
将 Others 和 Front 图层拖入滚动容器。我们希望这 2 个图层与滚动容器一起移动。
如果你点击预览，即使上下滚动页面，也暂时看不到任何视差效果。原因是我们还没有为 chain 触发器添加任何响应，这正是我们接下来要做的！
💡 提示：如果你在原型预览中看不到任何滚动交互，请将 Scroll Paging 图层属性设置为 Scroll，并将 direction 设置为 vertical。
2. 使用 chain 为背景元素设置不同速度
使用 Chain 触发器
Chain 是一种条件触发器，它使我们能够根据另一个图层属性的变化来改变某个图层的属性。
例如，在下图中，当我们上下拖动绿色方块时，红色方块的大小会发生变化。在 ProtoPie 中，我们可以做到这一点，因为红色方块的缩放被“链式关联”到绿色方块的 Y 轴位置上。
在本视差滚动教程中，我们将把元素的位置“链式关联”到滚动容器的滚动位置。
为滚动容器添加一个chain 触发器。
还记得视差的经验法则吗？滚动时，最远的对象应当移动最少。
在资源文件中，Front 图层最近，Sky 图层最远。由于 Front 图层位于滚动容器内，我们不需要为 Front 图层添加 chain 响应。
选中 Second 图层，然后在 chain 触发器下方添加一个移动响应。首先，将滚动范围设置为 0 到 900。然后，将 Y 范围 设置为 525 到 -225。
这些数字是什么意思？这表示当用户从 0–900 像素滚动时，Second 图层将移动 750px——也就是初始位置 (525) 与图层结束位置 (-225) 之间的距离。
💡 提示：你可以自由调整图层的起始和结束位置。不过，要获得良好的视差滚动效果，请确保它小于滚动范围。图层不应与滚动同步移动，而应稍微有一点拖拽感。
使用相同的方法为其他图层设置移动响应。
从视觉上看，图层越远，移动距离越短。请将图层的移动距离设置为递减值。
就是这样！
现在你可以点击预览，看看原型中的视差滚动效果。多尝试一下，享受你刚刚制作的细腻动画吧。
在这篇教程文章中，你已经学习了什么是视差、如何实现视差效果、如何使用 chain 触发器，以及如何为它设置响应。
更重要的是，你现在已经能够在 ProtoPie 中创建视差滚动效果；这相当了不起！
这个用例教程对你有帮助吗？欢迎参与这份 1 分钟调查 ，帮助我们改进教育内容。
