行业

汽车

航空

金融

游戏

医疗科技

物联网

数字产品

使用场景

面向企业

面向个人

面向团队

用于教育

主要特点

硬件与系统集成

公测版

ProtoPie MCP

多设备原型设计

交互逻辑

开发交接

ProtoPie AI

用户测试

插件

Figma

Sketch

Adobe XD

洞见与灵感

博客

白皮书

客户成功案例

活动与网络研讨会

ProtoPie 画廊

产品学习与支持

ProtoPie 学堂

下载 ProtoPie

产品文档

社区

行业

汽车

航空

金融

游戏

医疗科技

物联网

数字产品

使用场景

面向企业

面向个人

面向团队

用于教育

主要特点

硬件与系统集成

公测版

ProtoPie MCP

多设备原型设计

交互逻辑

开发交接

ProtoPie AI

用户测试

插件

Figma

Sketch

Adobe XD

洞见与灵感

博客

白皮书

客户成功案例

活动与网络研讨会

ProtoPie 画廊

产品学习与支持

ProtoPie 学堂

下载 ProtoPie

产品文档

社区

提示

4

阅读时间

创建一个带有 3D 旋转效果的垂直滚动列表

了解如何使用 ProtoPie 的 Chain 触发器和 3D Rotate 响应,快速创建出色的 3D 滚动体验。

梅雷汉·埃拉姆罗西, 产品设计师

快速摘要

滚动视图在当今的数字产品中无处不在。借助 Scroll Container,ProtoPie 让你能够快速原型化流畅的滚动体验。这一次,我想做点不一样的,为我的滚动视图增加一些纵深感,呈现类似 3D 的效果。它看起来可能很复杂,但其实在 ProtoPie 中实现这个效果很容易,你只需要 3 样东西:一个 Scroll Container、一个 Chain 触发器和一些 3D 响应。让我来告诉你它是如何工作的!

你将学到什么

在这个分步教程中,你将学习:

  1. 如何使用 Scroll Container 创建一个可垂直滚动的视图。

  2. 如何基于滚动值,通过 Chain 触发器和 3D Rotate 响应为滚动体验添加纵深感。

**完成时间:≤10 分钟 **

最后,你将能够做出这样的效果!


vertical scroll 3d gif

起始 Pie 文件完成版 Pie 文件

分步说明

第 1 部分:使用 Scroll Container 创建可垂直滚动的视图

先从在场景中创建一个滚动视图开始。

  1. 在你的设计工具中设计一组卡片列表并将其导入 ProtoPie。这就是我们稍后要滚动浏览的列表。请确保在每个卡片图层的属性面板中将 Origin 设置为 center。

  2. 添加一个 Scroll Container,并调整其大小以覆盖整个场景。为了让图层面板结构更清晰,请重命名该 Scroll Container(在我的 Pie 文件中它叫 Scroll list)。

  3. 选择所有卡片图层并将它们拖入你在第 2 步创建的 Scroll Container 中。确保在其属性面板中将容器设置为垂直滚动,你可以在 ProtoPie Studio 界面右侧找到该面板。Scroll 值应为 0。


creating scroll container

什么是 Scroll 值?在 ProtoPie 中,Scroll Container 的 Scroll 值决定了 Scroll Container 应从 x(水平滚动)或 y(垂直滚动)位置开始滚动。

第 2 部分:使用 Chain 和 3D Rotate 创建 3D 滚动效果

现在让我们为 Scroll Container 添加一些纵深感和 3D 质感,打造更独特的滚动体验!

  1. 对 Scroll Container 使用一个 Chain 触发器,并选择 Scroll 属性。


chain trigger scroll property
  • 当从 0 滚动到 y 轴位置 812 时,第一张卡片图层应进行 3D 旋转,角度从 -200 开始并回到 0。

  • 旋转方向设置为“向上”。


3d rotate response ranges

恭喜!

你已经学会了如何创建一个带有 3D 旋转效果的垂直滚动列表。