在数字设计中，对引人入胜的用户体验的追求永无止境。基于滚动的动画，如同河流的潮起潮落，是一种变革性的力量，引导用户在沉浸式设计中展开一场视觉之旅。当你将其与迷人的视差效果以及逼真的 3D 360 度产品渲染结合时，一个令人兴奋的全新创意世界便在眼前展开。
在本文中，我们将踏上一段穿越原型设计深海的航程。我们将使用 Chain 和 Detect 触发器，以及 变量、 公式和 组件。准备好驶入滚动动画的浪潮，我们将打开想象力的闸门，揭示在 ProtoPie中打造真正迷人体验的秘诀。
1. 3D 动画
目前，ProtoPie 不支持 3D 格式。不过，你可以使用视频渲染并控制其播放。这种技术有助于在原型中模拟三维对象。
假设你正在为一家高端家具制造商设计网站。该设计的焦点是一个高分辨率的交互式产品图像。你可以使用任何展示镜头围绕物体旋转的视频。我使用了一个快速的 Blender 设置来渲染环绕视图。
对象约束属性
我已经准备好了对象和一个简单的三点布光方案。此外还有一个相机和一条圆形曲线。
在相机的 对象约束属性（Object Constraint Properties） 中，添加 Follow Path 和 Track To 约束。将目标路径设置为圆形，将跟踪目标设置为椅子。现在相机会沿着路径移动，同时始终指向椅子。
将视频渲染为 mp4 格式。
Blender 中的对象约束
2. 布局
在 Figma 中设计
转到 Figma，为主页创建一个极简布局。我们需要一个带导航的页眉，以及至少两个文本区块。
接下来，使用 ProtoPie 插件导出你的设计以进行原型制作。
将 UI 设计从 Figma 导出到 ProtoPie
在 ProtoPie 中设置
我们需要在 ProtoPie 中调整一些元素。首先，添加环绕视频。默认情况下，自动播放选项未勾选。这正是我们想要的。
在屏幕上缩放并定位你的视频。你也可以将原点改为中心，这样更容易对齐。
我的视频开头是相机正对椅子前方，但我希望先看到 3/4 视角。如果你也想调整首帧，可添加 Start 触发器，并使用 Playback 响应将其设置为 Seek 到某个时间戳（我的例子是：0:01.0）。
在 ProtoPie 中添加视频
要触发基于滚动的动画，你需要一个滚动容器。在 Properties Panel（属性面板）中，将包含文本区块的组设置为垂直滚动。现在你就可以开始制作原型了！
设置滚动行为
3. Chain 触发器
视差效果
视差是一种视觉效果，其中对象看起来以不同速度移动。在 UI 设计中，视差效果通过在二维界面中制造三维空间的错觉，营造深度感和沉浸感。
模拟这种效果最简单的方法是使用条件触发器。选中页眉，并将 Chain 属性设置为滚动容器及其滚动值。然后，为页眉元素添加 Move 响应并调整图层映射范围。当从 0 滚动到 48px 时，让页眉沿 Y 轴从 0 移动到 -72px。这样，页眉对象会比其余内容稍快地向上移动。
同样地，将视频位置链式绑定到容器的滚动偏移。在我的示例中，我将滚动范围 [0;360] 映射到 Y 位置范围 [520;360]。因此视频会比内容移动得更慢。
带滚动属性的 Chain 触发器
视频播放
当你尝试对视频播放做同样的处理时，会发现行不通。 Chain 触发器中没有 Playback 响应可用。
所以问题来了：不使用 Chain 触发器，如何将播放与滚动位置关联起来？
Chain 触发器与 Playback 响应
4. 滚动动画
检测滚动
Detect 触发器像救生圈一样前来救援！将触发器设置为监听滚动容器中 Scroll 的任何变化。然后，添加一个本地数字变量，并点击变量名旁边的小虫图标。这样你就能在预览窗口中显示它的值。
在 Detect 触发器内，添加一个 Assign 响应，并用这个公式将当前滚动偏移保存到变量中： scroll-container****.scrollOffset
变量值应会在预览中自动更新。
检测滚动偏移
Playback 响应
给 Detect 触发器创建一个 Condition。当滚动变量值小于 320 时，添加一个带 Seek 动作的 Playback 响应。我使用的公式是： 1+scroll/60。现在我们就拥有了一个完全由滚动偏移控制的视频播放。
连接视频播放与滚动偏移
文本组件
最后还有一件能增添些许亮点的事：文本动画。为文本区块创建一个包含标题和段落的组件。添加 Receive触发器，并监听来自 Parent Channel 的 start 消息。将不透明度从 0 动画到 100，并让文本轻微向上移动。
为文本组件添加动画
Send 响应
使用 Send 响应将一切串联起来。在 Start 时，将 start消息发送到第一个区块组件。在 Detect 中，当滚动变量至少为 240 时，将同样的消息发送到第二个区块组件。
触发组件动画
4. 最终结果
我们已经抵达目的地。你可以收起船帆，享受滚动动画的乐园小岛了 ;)
最终结果
开启你的 UX 旅程与原型设计
通过 ProtoPie 和 ProtoPie School，迈出掌握高保真原型设计的第一步。
