提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
▶ 1.1 动态面板简介
把动态面板放到画布中,看上去它是一个半透明的形状。但是,如果在浏览器中查看原型,是看不到动态面板的存在的。也就是说,动态面板本身是个透明的元件(如下图)。
接下来,介绍动态面板的结构和特点。
对于一个陌生的元件,可以双击试试看。双击动态面板,弹出一个窗口,这个窗口的标题是“面板状态管理”。可以单击【+】按钮,添加新的状态。也可以单击上下箭头按钮,调整状态的顺序。还可以选中一个状态,然后单击【复制】按钮,复制一个状态。还有【删除】按钮,可以删除状态(如下图)。
但是,状态又是什么呢?如果要做一个比喻的话,可以将动态面板想象成幻灯片的放映机。而状态就是幻灯片。幻灯片里面可以放置内容,状态也一样可以编辑。可以单击编辑状态的按钮,或者直接双击某个状态的名称,打开状态的编辑界面。状态的编辑区域和页面的编辑区域一样,可以放置各种各样的元件,组成内容(如下图)。
动态面板的样式设置中,可以单独为各个状态设置背景颜色或图片(如下图)。
▶ 1.2 动态面板特性——循环
案例——使用循环实现图片轮播
步骤1 把一个图片元件放到画布中,双击图片元件导入第一张宣传图片。
步骤2 在图片上单击鼠标右键,在弹出的快捷菜单中选择【转换为动态面板】命令。
步骤3 双击动态面板,在弹出的编辑界面中将动态面板命名为“ImagePanel”,然后选中第一个状态,将其复制5 次。
步骤4 修改状态“State2~State6”的图片为其他几张宣传图片。比较快捷的方法是双击两次概要中相应的图片,即可进行导入。
步骤5 页面打开时,图片就会自动循环切换播放,切换时为渐变效果,所以,为动态面板“ImagePanel”添加【载入时】的用例,设置动作为【设置面板状态】,勾选“当前元件”或“ImagePanel”,{ 选择状态} 为【Next】;勾选【向后循环】和【循环间隔】复选框,设置间隔时间为“3000”毫秒;勾选【首个状态延时3000毫秒后切换】复选框;{进入动画}选择【逐渐】,{ 时间} 为“500”毫秒;{ 退出动画} 也选择【逐渐】,{ 时间} 为“500”毫秒。用例动作如图所示。
交互事件如图所示。
▶ 1.3 动态面板特性——适应宽度
案例——横向铺满屏幕的背景条
步骤1 放入一个动态面板到画布中;在动态面板的样式设置中,设置动态面板的高度为背景图片的原始高度“160”;然后,为状态“State1”【导入】背景图片,设置图片【填充】动态面板的状态。
步骤2 勾选动态面板属性中的【100%宽度】复选框。
▶ 1.4 动态面板特性——相对固定
案例——导航菜单顶部固定的效果
步骤1 放入两个图片元件,分别双击并导入代替导航菜单与页面内容的图片,将它们摆放在合适的位置(图10-55)。
步骤2 在代替导航菜单内容的图片上方单击鼠标右键,在弹出的快捷菜单中选择【转换为动态面板】命令。
步骤3 在动态面板属性中单击【固定到浏览器】,在弹出的对话框中勾选【固定到浏览器窗口】复选框,{ 水平固定} 选择【居中】,{垂直固定} 选择【上】。
更多内容:http://www.ui.cn/detail/257312.html
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册