纳米 发表于 2012-7-10 17:52:36

path移动收缩效果

效果展示:
点击“X”按钮,将所有图标收缩到按钮中,并且按钮变成“+”,点击“+”按钮,图标又恢复到展开的样子:




操作步骤:
1.        拖入一个矩形,往矩形中拖入6个图标并右击图标,将图标转换为动态面版,且将图标分别命名为N1-N6,如图1所示。设置完后,可看到axure的动态面版管理中显示如下:

2.        在矩形中拖入一个动态面版,命名为“开关”,然后在动态面版管理器中右键点击“添加状态”,分别将这两个状态命名为:“开”、“关’,双击动态面版管理器中的状态“开”,导入“+”图像,状态“关”导入“X”图像。

3.        双击动态面版管理器中的“关”,在右边的部件属性中选择onclick添加用例,在弹出的用例编辑器中选择【动态面版】→【设置面版状态为指定状态】,在【配置动作】中选择“开关”,选择状态为“关”;
继续添加第二步:【动态面版】→【移动面版】,在【配置动作】中设置分别移动N1、N2、N3、N4、N5、N6到绝对位置,如下图所示:


4.        双击动态面版管理器中的“开”,设置方法参照第三步:


5.        生成html即可


HTML文件:10
源文件:11

尹广磊 发表于 2012-7-10 22:58:26

参考:http://www.hiaxure.com/thread-5062-1-1.html

纳米 发表于 2012-7-11 09:20:14

厉害啊,只是下载要花掉我15个币,级别不够

Μу.ωау 发表于 2012-11-21 16:02:12

不错~

693455510 发表于 2012-11-22 14:53:50

很不错啊,学习了。不过我看到源文件中的用例中都选择了“linear”,不知道选择其他的会有什么不同呢?我试着把他改成swing,但是生产后好像交互效果没有区别的。

陈建平 发表于 2013-4-28 14:57:53

很赞!
页: [1]
查看完整版本: path移动收缩效果