⚙️ 简单开关控件 · 完全使用手册

交互式控件 · 绑定隐藏/显示 · 视频控制 · 状态同步

通过简单开关，快速构建图层切换、视频播放控制、AB内容替换等丰富交互。本教程涵盖添加控件、五种绑定方式、解除绑定及典型场景。

1. 控件简介

简单开关控件是一个具有“开/关”两种状态的交互元件，外观为圆角矩形滑块。它可以绑定多种交互行为，用于控制画布上其他元素的显示/隐藏、视频播放/暂停、状态切换等。在文件列表中，开关控件的名称显示为“开关”，并会附加绑定标识（如【开关绑定:图片1,图片2】）。

✅ 核心能力：开关打开→触发指定动作；开关关闭→触发反向动作。支持多目标、多绑定共存。

2. 添加开关控件

📌 操作步骤
  1. 点击顶部工具栏的 “控件库” 下拉菜单。
  2. 在下拉选项中选择 “开关”。
  3. 开关控件将自动添加到画布中心位置，同时出现在左侧文件列表中。

💡 添加后，您可以像拖动普通图片一样移动开关位置，也可以缩放、旋转它。

3. 绑定功能详解（右键菜单）

在开关控件上单击鼠标右键，会弹出功能菜单，包含以下绑定选项：

菜单项 功能说明 视频案例地址
绑定元素（隐藏/显示+置底/置顶） 开关打开 → 显示目标元素并置顶；关闭 → 隐藏目标元素并置底 视频案例
绑定视频播放/暂停 开关控制指定视频的播放与暂停 视频案例
同步跟随 使两个开关状态保持同步（单向或双向）
绑定开启状态到元素 开关打开时显示一组元素（同时置顶），关闭时自动隐藏它们
绑定关闭状态到元素 开关关闭时显示一组元素（同时置顶），打开时自动隐藏它们

🔹 3.1 绑定元素（隐藏/显示 + 置底/置顶）

此功能让开关控制其他元素的可见性和层级（顶层/底层）。

📌 操作步骤
  1. 选择要控制的元素：在画布上单击选中一个或多个元素（支持多选，可跨类型选择）。
  2. 右键点击开关，在菜单中选择 “绑定元素（隐藏/显示+置底/置顶）”。
  3. 系统提示“请点击要绑定的元素（可事先多选，点击后批量绑定）”。
  4. 再次点击开关自身（或点击已选中的元素），完成绑定。
✨ 效果说明：开关打开 → 被绑定的元素：显示 + 置顶（移至最上层）；开关关闭 → 隐藏 + 置底（移至最下层）。适用于图层切换、弹窗控制、菜单折叠。

🔹 3.2 绑定视频播放/暂停

让开关直接控制视频的播放与暂停。

📌 操作步骤
  1. 确保画布上已有一个视频元素。
  2. 右键点击开关，选择 “绑定视频播放/暂停”。
  3. 系统提示“请点击要绑定的视频元素”。
  4. 点击目标视频，完成绑定。
✨ 开关打开 → 视频播放；开关关闭 → 视频暂停。绑定成功后，开关文件名会显示【播放暂停绑定:视频名】。

🔹 3.3 同步跟随

实现两个或多个开关之间的状态同步（例如开关A打开时，开关B也自动打开）。

📌 操作步骤
  1. 右键点击一个开关，选择 “同步跟随”。
  2. 系统提示“请点击要同步的另一个开关”。
  3. 点击另一个开关，弹出方向选择对话框：
    • 单向同步：源开关控制目标开关，目标开关不反控源开关。
    • 双向同步：两个开关互相控制，状态始终一致。
  4. 选择方向后完成绑定。
✨ 绑定后，当其中一个开关状态改变时，另一个会自动跟随变化。

🔹 3.4 绑定开启状态到元素

此功能让开关打开时显示（同时置顶）一组指定元素，关闭时自动隐藏它们。

📌 操作步骤
  1. 在画布上选中一个或多个元素（这些元素将在开关打开时显示）。
  2. 右键点击开关，选择 “绑定开启状态到元素”。
  3. 系统进入绑定模式，再次点击开关自身（或点击已选中的元素），完成绑定。
✨ 开关打开 → 绑定的元素显示；开关关闭 → 隐藏。适用于“仅控制显示/隐藏”场景。

🔹 3.5 绑定关闭状态到元素

与“绑定开启状态到元素”相反，开关关闭时显示（同时置顶）指定元素，打开时隐藏它们。

📌 操作步骤
  1. 选中一组元素（这些元素将在开关关闭时显示）。
  2. 右键点击开关，选择 “绑定关闭状态到元素”。
  3. 系统进入绑定模式，再次点击开关自身（或点击已选中的元素），完成绑定。
✨ 开关打开 → 隐藏；开关关闭 → 显示。可制作“默认显示内容A，打开开关后显示内容B”的替换效果。

4. 解除绑定

如果一个开关已绑定了某种功能，右键菜单中会出现对应的解除绑定选项。

📌 操作步骤
  1. 右键点击已绑定的开关。
  2. 在弹出的菜单中选择对应的解除绑定项（例如“解除绑定（隐藏/显示）”、“解除播放/暂停绑定”等）。
  3. 绑定关系立即解除，开关恢复为普通状态。
📌 注意：如果开关同时绑定了多种功能（例如同时绑定了隐藏/显示和视频播放），需要分别解除每一项。

5. 取消绑定模式（ESC键）

在进入任何绑定模式后（系统提示“请点击...”），如果您想取消操作：

6. 操作示例场景

🎬 场景一：控制图层面板

  1. 添加一个开关，命名为“图层开关”。
  2. 选中三个需要控制的图层元素（如图片A、文字B、形状C）。
  3. 右键开关 → 绑定元素（隐藏/显示+置底/置顶） → 点击开关完成。
  4. 现在开关打开时，三个图层显示并浮于顶层；关闭时隐藏并沉入底层。

🎬 场景二：视频播放控制器

  1. 添加开关和视频各一个。
  2. 右键开关 → 绑定视频播放/暂停 → 点击视频。
  3. 开关打开 → 视频播放；开关关闭 → 视频暂停。

🎬 场景三：AB内容切换（显示/隐藏替换）

  1. 添加开关。
  2. 选中“内容A”元素 → 右键开关 → 绑定开启状态到元素 → 点击开关。
  3. 选中“内容B”元素 → 右键开关 → 绑定关闭状态到元素 → 点击开关。
  4. 效果：开关打开时显示A、隐藏B；关闭时显示B、隐藏A。

7. 注意事项

⚠️ 重要提醒
• 绑定前先选中元素：对于“绑定元素（隐藏/显示+置底/置顶）”、“绑定开启状态到元素”、“绑定关闭状态到元素”这三种功能，建议先选中要控制的元素，再右键开关选择菜单，然后点击开关完成绑定。这样可一次性绑定多个元素。
• 锁定元素不可绑定：如果目标元素已被锁定，绑定操作会失败并提示。
• 文件名标识：绑定成功后，开关在文件列表中的名称会追加绑定信息（如【开关绑定:图片1,图片2】），方便识别。
• 多绑定共存：一个开关可以同时拥有“隐藏/显示绑定”和“播放/暂停绑定”，两者独立工作，互不干扰。
• 同步跟随仅限开关之间：该功能只能在简单开关之间使用，不支持与多档开关或滑动条同步。

8. 常见问题

❓ 为什么右键菜单中没有“绑定开启状态到元素”？
✅ 请确保您使用的是简单开关（控件库中的“开关”），而不是多档开关（二/三/四档开关）。多档开关的菜单不同。

❓ 绑定后开关没反应？
✅ 检查被控制的元素是否被锁定（🔒）。锁定状态的元素无法被开关控制。请先解锁元素。

❓ 如何让开关控制多个不同类型的元素？
✅ 在绑定前，使用 Ctrl + 单击 或 Ctrl + 框选 多选元素，然后再进行绑定操作即可。

❓ 绑定后如何修改控制的目标？
✅ 需要先解除原有绑定，然后按照上述步骤重新绑定新的目标元素。

💡 简单开关是构建交互式演示的核心工具，灵活运用上述绑定功能，可以快速实现图层切换、视频控制、状态切换等常用交互。搭配“置顶/置底”和“显示/隐藏”组合，可创造丰富的动态效果。