事件变量的使用方法

事件变量的用法

Framer 中的事件允许组件中的操作触发父级组件或画布上的变化,例如打开和关闭叠加层。本指南介绍如何添加事件,以在组件之间创建无缝交互。

在大多数情况下,当您向嵌套组件添加交互时,Framer 会自动生成功能事件变量。例如,如果某个组件内部的子组件具有交互,Framer 会检测到该操作并自动设置所需的事件。

然而,在更复杂的流程中,或需要更精确控制特定交互触发时机时,手动添加事件会非常有用。

示例:使用卡片内的按钮打开固定覆盖层

假设您希望卡片中的一个按钮可以打开一个固定的覆盖层,以显示更多详情。由于固定覆盖层无法直接存在于卡片组件内部,您可以使用事件将按钮与覆盖层连接起来。

Framer 中设置事件的步骤

  1. 在项目中设计一个按钮组件。在“交互”面板中点击“+”图标,选择“新建事件”,并为其命名(例如,“打开覆盖层”)。

  2. 创建一个卡片组件,并将按钮添加到其中。该按钮将作为触发器。

  3. 为卡片组件添加另一个事件变量,以将按钮的事件暴露到卡片外部。这使得从主画布中也能访问按钮的交互。

  4. 设计一个固定覆盖层组件。在覆盖层设置中,于“显示于”选项下选择“打开覆盖层”事件。现在,点击按钮即可触发覆盖层显示。

  5. 要关闭覆盖层,请创建一个“关闭覆盖层”事件。为覆盖层组件添加交互,并在交互设置中选择“关闭覆盖层”事件。

Framer 中的事件变量是处理嵌套组件的强大工具。它们能让卡片内的按钮等元素触发项目其他位置的操作,例如打开或关闭覆盖层。尝试将事件应用于其他场景,比如菜单项触发父级组件的不同变体,从而实现组件之间更丰富的动态交互。

Create a free website with Framer, the website builder loved by startups, designers and agencies.