打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
Axure:使用动态面板实现拖动的方法 | 人人都是产品经理

本文分享了一个在Axure中利用动态面板实现拖动效果的方法,一起来看看~

分析:

在Axure元件库中,动态面板是唯一一个能够实现拖动效果的元件。所以,实现步骤大体应该如下:

  • 元件放入动态面板的首个状态中;

  • 为动态面板添加“拖动时”的用例。

实现:

步骤1:添加两个元件:滑块外框,命名为“外框”,滑块,命名为“滑块”,如下:

此时:“外框”元件的的X轴坐标为100,宽度为202,高度31;“滑块”元件的X轴坐标为100,宽度为48,高度31,如下:

步骤2:将“滑块”元件,【转换为动态面板】,命名为“滑动动态”,放置于外框左侧处,如下:

步骤三,为“滑块”添加【拖动时】的用例。

用例分析,产生滑动的效果,需将此元件水平拖动至最右,即拖动距离为 100(边框X轴坐标)<=X<=302(边框X轴坐标+边框宽度)。

用例设计如下:

F5预览,可以在界限内随意拖动了!

原型链接,欢迎下载。

链接:https://pan.baidu.com/s/1XpiW0EPQA4PmNy7NKduoXA 密码:u1hy

本文由 @小甜甜不甜 原创发布于人人都是产品经理。

题图来自 Unsplash ,基于 CC0 协议

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
Axure|中继器,实现筛选和排序功能
Axure RP8 动态面板之折叠和展开
PM干货|原型交互设计入门的工具
Axure9和10的差别
第4章 用Axure动态面板制作动态效果
Axure快速完成微信产品交互效果
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服