提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
前几天自己在做交互碰到一个向左伸缩效果,刚开始用以前的方式做发现效果很不稳定,于是自己摸索几天做了一个完整稳定的,随便总结了一下Axure中三种放缩方式。
鉴于网上伸手党的要求,在把这个案例进行发散性扩充,整个在Axure能遇到的动态面板放缩效果:中心向四周放缩,左右放缩(单向/双向),上下放缩(双向),都补齐了,亲,我只能帮你们到这!
在线链接:http://jhita2.axshare.com
网盘下载:http://pan.baidu.com/s/1eQ9DUEI
Axure 在动态面板中实现图像的放大与缩小的方式有以下几种:
案例在线:http://4bcfw3.axshare.com
http://jhita2.axshare.com (完整版)
1. 部件左顶点放缩效果(Axure中动态面板尺寸变化都基于这个方式)
2. 部件中心向四周放缩效果
在1方式的基础上移动动态面板来抵消原来单一向右下放缩效果实现中心向四周放缩效果。
在实际案例中发现上面的方法很难完成一些左右或者上下方向伸缩效果。
(在动态面板实现放缩效果是一定要注意最外层动态面板“部件属性与样式”勾选“调整大小与适合内容”)
3. 向左伸缩效果
案例分析:
部件组成:事件部件:动态面板2个,矩形框1个(伸长后的矩形框放在最里层动态面板)
触发部件:图片热区1个,全局变量1个
步骤:
1. 在“项目(P)”中启用默认全局变量OnLoadVariable,默认值为空。
2. “页面交互”将全局变量赋值为最外层动态面板的宽度(初始宽度为10 )
3. 触发部件交互:
备注:这样通过全局变量赋值动态面板状态,保证伸缩效果稳定,如果是使用鼠标移入和移出触发,鼠标在快速移动过程会出现伸缩效果延迟或者部件移动。
在实际工作中会碰到很多向左/右伸缩交互效果,Axure基于左顶点放缩效果达不到要求,网上也很难找到左/右伸缩交互的案例,通过研究前辈上传的中心放缩效果,经变形成左/右伸缩交互效果,随便总结一下Axure中动态面板尺寸交互的几种方式,如有不全望自行补充上传,再次感谢产品前辈们在网上无私提供产品交互案例。
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册