快好知 kuaihz

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

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:拖动  拖动词条  面板  面板词条  实现  实现词条  方法  方法词条  使用  使用词条  
原型

 Axure:菊花转(页面加载动画...

本文分享了页面加载动画如何制作,希望对大家有所帮助。先看效果:以下是制作步骤:第一阶段,素材准备(1)拉入一个圆注意:调整圆的大小,示例中是50*50。(2)设...(展开)

原型

 Axure原型设计之放大器

京东,天猫,淘宝等等这些电商的商品主图都会有放大器的功能,用户只需要将鼠标移到主图上就可以将图片放大查看细节。这种放大器方便用户更加深入地了解图片中的信息,从而...(展开)

原型

 Axure8.0实例 | 数量编...

在诸多购物平台中,包括app端,在下订单是时基本都需要选择购买的数量,此处需要有一个数量编辑器。该数量编辑器的主要特点是,可以通过左右两侧的加减号改变数量,也可...(展开)