恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
Axure 在动态面板中实现图像的放大与缩小的方式
0.0°
2015-11-20 原创文章 经验/观点 原作者: 原作者 举报 7071 21 32 0

前几天自己在做交互碰到一个向左伸缩效果,刚开始用以前的方式做发现效果很不稳定,于是自己摸索几天做了一个完整稳定的,随便总结了一下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中动态面板尺寸交互的几种方式,如有不全望自行补充上传,再次感谢产品前辈们在网上无私提供产品交互案例。


更新:2015-11-20

下载
收藏

21人已收藏

BenKe

有挑战项目免费服务(微信15852917900)

  • 16

    作品

  • 161

    粉丝

  • 61

    关注

  • Axure 高保真交互练习(一)
  • Axure原型交互案例-广告轮播效果
  • Axure交互案例—自己设计高保真游记网站
  • Axure制作的苹果(5s)ios系统开机高保真原型

    猜你喜欢

      2015-11-20 原创文章 经验/观点 原作者: 原作者 举报 7071 21 32 0

      Axure 在动态面板中实现图像的放大与缩小的方式

      0.0°

      你确定要举报Axure 在动态面板中实现图像的放大与缩小的方式

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2015年09月16日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      32
      21
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录