动态面板:能够在一个固定的区域切换显示的内容。能实现很多动态效果。
其本身是一个透明的元件。一个动态面板里有若干个【状态】。“若动态面板是幻灯片的放映机,而状态则是幻灯片。” 打开状态的编辑界面,即可放置各种各样的元件,组成内容。
有几种特性:容器、多状态、拖动、循环、适应宽度、相对固定。
动态面板-容器:能够让装载的内容有统一的动作。实现多个元件的统一移动或现实隐藏。
场景一:登录面板的灯箱效果
1. 准备工作
制作背景图,预想点击【下载PSD】则弹出【登录面板】
在空白处制作【登录面板】,然后全选,右键-转换为动态面板
把【登录面板】放在【背景图】中间,并【置于顶层】,勾选【隐藏】
2. 热区
把热区拖到按钮位置,并添加用例【鼠标单击时】-【显示】- 选择LoginPanel -【灯箱效果】
在动态面板LoginPanel中的关闭按钮添加用例【鼠标单击时】-【隐藏】- 选择LoginPanel
如果想取消动态面板,想增加一些内容的话,选中动态面板-右键-从首个状态中脱离
其他
只要是多个元件需要统一显示/隐藏,都能够用动态面板/组合实现
场景二:水平菜单移入时弹出隐藏效果
1. 准备工作
制作一个“一级菜单”,下方放置数个矩形作为“二级菜单”,并全选【二级菜单】,右键,转换为动态面板,命名为Submenu,状态为隐藏
2. 添加用例
选中【一级菜单】,添加用例【鼠标移入时】-【显示】- 选中动态面板Submenu -【弹出效果】
(弹出效果能够实现鼠标在一级菜单和二级菜单的范围内时,二级菜单保持显示;当鼠标离开,二级菜单自动隐藏)
动画可自由选择
场景三:垂直菜单单击时展开,再次单击时收起
1. 准备工作(与上述场景的准备工作一样)
2. 添加用例
选中“一级菜单”,添加用例【鼠标单击时】-【切换可见性】- 选中动态面板 - 勾选【推动/拉动元件】
(推动/拉动元件(以默认的向下为例):展开二级菜单向下推动其他菜单,收起二级菜单拉起下方其他菜单的效果)
3. 预览
把做好的全选(包括“一级菜单”和“二级菜单”)并复制放在下方
预览,达到效果
3. 尝试
同样,我尝试了使用两个用例想要达到点击一次【显示】二级菜单,再点击一次【隐藏】二级菜单的效果,如下图
结果是不行的
或者一个用例里弄两个动作,也是不行的。所以一定要用【切换可见性】