在过去的几个月里，我一直很想试用 ProtoPie，并自学一些将来可以应用到工作中的实用技巧。
这些年来出现了许多不同的原型工具，我也用过很多。它们各有优缺点，但我一直很想找到一款学习曲线相对较低（说的就是你，Framer），同时又足够强大，能够把 UX 和 UI 设计提升到新层次的工具。
在本教程中，我们将使用 PrototPie 创建一个简单的日历 UI 原型。我建议你免费下载 ProtoPie，整个过程大约需要 20 分钟完成。
ProtoPie 中带有视差图片的日历教程
1. 设置场景
创建你的垂直月份区块。为便于演示，我使用了 532px 的高度（如果你愿意也可以各不相同），并在这些区块之间设置 135px 的间距。
将这些月份分组为 一个垂直滚动区
添加方形背景图片，并将它们放置在场景底部，使其上边缘与底边缘接触。
2. 创建日历垂直滚动
由于我的第 1 张图片会在加载时出现在场景中，这里我会采用略有不同的方式。你可以在图层中把它们全部放进一个 容器 里，保持整洁。
图片容器
x = 0 / y= 532px
height = 375px / width = 375px
第 1 张图片
x = 0 / y= 0
height = 375px / width = 375px
第 2、3、4 张图片
x = 0 / y= 135px
height = 375px / width = 375px
红色圆圈中的数字将显示滚动位置
3. 显示滚动位置（可选）
这会为你节省大量时间，而且添加起来非常简单，在情况变复杂时可帮助你更高效地微调。
添加一个文本图层
给垂直滚动添加一个 Detect 触发器，并从下拉菜单中选择 Scroll
从 Content 下拉菜单中选择 Formula，并添加你的 Scroll 加上 .scrollOffset
4. 视差月度图片
给垂直滚动添加一个 Chain 触发器，并从下拉菜单中选择 Scroll。
为这个 Chain 添加一个 Move 响应，现在我们将逐张添加你的图片。
第 1 张图片
由于它在加载时就放置在场景中，所以会遵循稍有不同的逻辑。
532px （图片出现前的列表滚动位置） = 135px （图片位于场景底部时的 Y 坐标）
1334px （图片出现后的列表滚动位置） = -908px （图片位于场景顶部时的 Y 坐标）
第 2 张图片
这里我们需要做的是，告诉原型列表滚动位置与图片位置之间的关系。这就是 ProtoPie 所说的 Range。
滚动位置范围
532px （图片出现前的列表滚动位置） = 135px （图片位于场景底部时的 Y 坐标）
1334px （图片出现后的列表滚动位置） = -908px （图片位于场景顶部时的 Y 坐标）
1334px 是滚动的结束位置，132px 是第 2 张图片最终的 Y 坐标
最终原型
希望你觉得这个教程有帮助。在接下来的几周里，我将继续讲解以下内容。
Fab/操作按钮
汉堡菜单
月份横向滚动
