Axure高保真图标换位。 获赏10金币 案例教程 基础教程

大马猴 超级版主 5月前 744

大家好,我是大马猴,又见面了,今天给大家带来一个图标换位的教程,如果大家对我的教程及作品感兴趣,可以到我的商城店铺去看看其他作品,都是高端交互制作,欢迎大家一起交流学习。

商城地址

https://www.axureshop.com/shop/3602 


大家先看图标换位的效果:


一、下面开始给大家说下实现方式

1、我们先创建一个动态面板(里面加个图标,或者矩形,或者其他形状都可以,看个人喜好)


2、接下来我们把这个动态面板添加事件为拖动时移动动态面板。

3、然后我们要加4个全局变量,来获取互相换位置的这2个动态面板的xy的坐标值。


ax ay 对应开始移动的那各图标的横纵坐标。

bx by 对应你要交换的那个图标的横纵坐标。

4、我们要给动态面板添加事件为移动开始时设置ax=这个坐标的x值,ay=这个坐标的y值。

里面细节


5、继续添加事件为移动时设置bx,by的坐标值

里面细节

 

6、给这个动态面板再加一个拖动开始时置顶的事件,这样每个动态面板拖动时就都在最上面显示了。这样第一部分的工作就完成了。


7、接下来,我们可以复制一个动态面板了,起名1跟2,这样方便找到。


8、给1增加判断当1拖动结束时如果接触2了,就让2移动到1的起始位置,让1移动到2的当前位置。如果1没有接触到2,就设置返回拖动时的位置。


9、现在给2设置相同的判断事件,当2接触1时,就让1移动到2的起始位置,让2移动到1的当前位置。同理


10、现在大家可以按F5来试试看,是不是都互换位置了。很简单吧。如果想做多一些图标的话,就复制复制复制再复制,然后记得把判断加上,每增加一个图,都要多判断一条。

十个图的判断如下:

二、总结:

1、首先要对面板进行可拖动事件处理,并且图标会有上下遮挡的情况,所以要拖动图标时置顶图标。

2、然后拖动图标时要获取到两个图标互换位置前x,y坐标值,用了4个全局变量。

3、接下来判断两个图标接触时应该互换位置,未接触时应该返回原位置。

4、最后祝福大家在设计的道路上砥砺前行。

axure商城
上传的附件:
快速回复
打赏排行 用户名 打赏金额
第1名 沈十三 10金币
最新回复 (21)
  • xiayuxiong 普通用户 16小时前
    0 引用 22
    谢谢
  • 123456ZZZ 普通用户 5天前
    0 引用 21
  • qinggg_1577584265 普通用户 8天前
    0 引用 20
    感谢,非常好用
  • 暖暖_1594784296 普通用户 18天前
    0 引用 19
    感谢
  • beyondzr 普通用户 28天前
    0 引用 18
    感谢
  • TonyMak 普通用户 1月前
    0 引用 17
    感谢楼主分享
  • 宸枫 普通用户 1月前
    0 引用 16
    十分感谢
  • Victor Guo 普通用户 2月前
    0 引用 15

    感谢分享。。。

  • 15079208394 普通用户 2月前
    0 引用 14
    谢谢
  • babybear619 普通用户 3月前
    0 引用 13
    感谢分享
  • Q愚仔 普通用户 3月前
    0 引用 12
    牛逼 
  • 大马猴 超级版主 3月前
    0 引用 11
    chusan 拖动后,2到达ax、ay,2也是bx、by,1也跟着跑到2当前的位置了,请问下怎么解决
    如果9楼是复制出来的话,看一下全局变量里是否有ax ay bx by 这4个全局变量~如果没有,请先添加后 在往里复制。
    或者9楼可以加我微信详细说明一下。75009945微信号
  • 。_1587429836 普通用户 3月前
    0 引用 10
    好厉害
  • chusan 普通用户 3月前
    0 引用 9
    拖动后,2到达ax、ay,2也是bx、by,1也跟着跑到2当前的位置了,请问下怎么解决
  • chusan 普通用户 3月前
    0 引用 8
    之前一直不知道“if”and“Else if Ture”怎么操作
  • lemon_1583160942 普通用户 3月前
    0 引用 7
    感谢分享,好人一生平安!
  • 普通用户 4月前
    0 引用 6
    111
  • 曾鹏宏 普通用户 4月前
    0 引用 5
    厉害啊!
  • 单单 普通用户 4月前
    0 引用 4
    谢谢
  • 沈十三 管理员 4月前
    0 引用 3
    感谢分享,已获得10金币奖励!
  • 陈硌 普通用户 5月前
    0 引用 2
    强强强
返回
axure商城