动态组件

动态组件的作用

动态组件就是为一个组件设置多个状态，通过交互事件使组件动起来，实现页面内的交互动画。

添加组件状态

组件“动”起来的前提是需要有多个不同的状态，所以制作动态组件的第一步便是添加组件状态。在页面中创建一个组件，选中组件后点击右侧栏中的【外观】——【+ 添加组件状态】即可进入组件状态编辑页面。

编辑组件状态

进入组件状态编辑页面后，组件将自动变为“动态组件”，同时新增一个组件状态。 在组件编辑页的左栏可以选中组件的不同状态，右栏可编辑组件的外观和添加交互事件。

1、改变组件状态编辑页中的排列方式：

在组件状态编辑页面的中间部分可选择组件状态横向分布或纵向分布。

2、增添组件状态：

在组件状态编辑页面中，点击【+】即可添加空白组件状态。

点击某个组件状上方的【+】按钮，即可快速添加与该组件状态相同的状态。

3、状态页面移动：

在组件状态编辑页面中，点击下图按钮即可调整组件不同状态的大小与位置。

4、组件状态添加交互事件：

在组件状态编辑页的右栏，可以为组件的不同状态添加事件，动态组件的具体操作方法可以点击参考页面交互教程进行具体操作。 这里以【滚动文字】为例，展示其制作过程。

动态组件还可以实现更多动态效果，例如弹窗、底部导航、下拉菜单等都可以用动态组件功能实现。具体视频演示操作请看交互效果案例演示。

5、设置组件的默认状态

编辑过动态组件后，若想更改动态组件的默认状态，只需鼠标在页面空白处点击后，在弹出的【动态组件设置】中的【状态】处可更改动态组件的默认状态。

6、动态组件预览

点击下图中按钮，即可快速预览该动态组件效果。

7、退出组件状态编辑页面：

选择组件状态编辑页面中的【退出】按钮和【画布】，即可返回至画布。

删除组件状态

若想删除组件状态，有两种方法可实现。

• 1、在图层编辑栏中选中组件状态，右键并选择【删除】即可。

• 2、点击组件状态上方的【垃圾箱】按钮，即可删除该组件状态。

动态组件转为静态组件

双击进入动态组件，将多余的状态删除，只剩下一个状态并退出编辑。选中组件并点击鼠标右键，选择分离当前状态，即可将动态组件转换为静态组件。

动态组件嵌套

嵌套组件的使用可以使原型设计软件更加灵活和功能强大。