【Axure教程之高级交互原型7】拖动Icon合并组成文件夹
本次教程是应一位站酷朋友私信请求，希望能做一期关于“拖动icon合并组成文件夹”的axure交互教程
【摘要·简介】
好久不见啦！本次教程是应一位站酷朋友私信请求，希望能做一期关于“拖动icon组成文件夹”的axure交互教程，一直太忙没有时间做，最近终于有时间腾出来研究了一下，于是就有了这么一期新教程。
关键技术点：
1、进一步掌握灵活使用全局变量和循环模式；
2、学习area of widget条件的使用
我们先来看一下完成后的效果：
高清版预览可以在附件或者网盘分享文件里看视频～
完成后的工程文件和初始工程文件网盘链接：
https://pan.baidu.com/s/1QiX8he9qlNSSzMrKJTJ37Q 提取码：Q5u0
接下来正式开始～
——————————————————分割线———————————————
【Step1】搭建场景，建立拖拽icon的第一步交互操作：长按icon放大进入移动模式
（1）打开附件压缩包中的“教程初始状态的Axure工程文件.rp”工程文件；
可以看到所需的UI元素已经都摆放好了；
图1：
（2）首先我们观察各种移动设备桌面系统的“拖动icon”这一交互，基本都有一个共性：那就是都通过长按之后激活icon移动模式，icon自身则会切换为另一种形态，可能是变，也可能是更改了透明度。
我们先完成这个交互。
（3）选中icon1 的动态面板组件“Icon1”，在右侧栏里点击“More Events”，如下图2所示：
图2:
（4）在弹出的菜单中选中“OnLongClick”，这是一个长按事件，如图3所示：
图3:
（5）此时会弹出Case editor窗口，在窗口的左侧栏里选中“Set Size”动作，设置参数如下图4所示：
图4:
图中参数的含义是：当长按时，icon1动态面板部件内的image图片素材，以center中心为缩放轴心，在时长200毫秒内放大到210x210的大小。
然后点击OK，试着运行一下效果，应该可以看到当长按时，icon放大；
——————————————————分割线———————————————
【Step2】建立拖拽icon的第二步交互操作：移动，以及建立一个全局变量用来监测是否处于长按移动模式，从而确定是否能被拖动
（1）此时我们需要建立一个全局变量，来监测当前的icon是否处于长按移动模式。因为我们不能在任意时候就能拖动icon，只有长按后处于移动模式的时候才能拖动。
若变量值为初始值0，则处于静态模式，拖动icon不会有反应；长按触发移动模式后，变量值变为1，当前处于移动模式，可以被拖动；
点击顶部菜单栏的“Project”，在弹出的下拉菜单选择“Global Variables”，如下图5所示：
图5:
（2）设置全局变量名为“LongClickOnOff”，初始值为0，如下图6所示：
图6:
（3）再次选中icon1 动态面板，双击OnLongClick的case，进入case编辑窗口，在左侧栏里选中“Set Variable Value”，设值为1，如下图7所示：
图7:
（4）接下来我们来建立拖动的交互。还是选中icon1动态面板，在右侧栏选中并双击OnDarg事件，进入case编辑窗口，如下图8所示：
图8:
（5）case编辑窗口中，在左侧栏点击选中“Move”动作，并设置move的方式为“with drag”，即跟随拖动而移动，也就是实现了icon1部件随着拖拽而移动，如下图9所示：
图9:
（6）最后，我们还需要添加一个条件，即必须在处于长按后的移动模式下，才能被拖拽，此时前面我们所建立的全局变量就派上用场了。点击case编辑窗口顶部的“Add Condition”，在弹出的condition编辑窗口中，设置条件参数如下图10所示：
图10:
即只有当全局变量LongClickOnOff值为1即被长按激活移动模式后，才能被拖动；
OK，我们已经实现了“长按-拖动”这样一个交互，试着运行一下看看效果～
——————————————————分割线———————————————
【Step3】接下来需要建立一个循环，来实时监测跟踪被拖拽的icon处于什么状态下？是否和其他icon区域有重合？从而决定被拖拽icon的运动和状态。
（1）前面很多教程都讲到了使用动态面板的OnMove事件来建立循环，从来实现实时监测跟踪的机制。这里就不再赘述，详见前面的教程。我们只贴一下这个命名为“move触发器”的动态面板的OnMove事件的case设置，如下图11所示：
图11:
这里说一下，之所以加上Wait，是为了给循环设定一定的时间间隔，否则，循环速度过快会使得运行非常卡。。。
另外拖动icon的时候，在icon1动态面板的OnDrag事件的case中，最后还需要加一个Move动作，拖动的时候move一下“move触发器”动态面板，从而启动循环。如下图12所示：
图12:
只有实现了对被拖拽icon的实时监测跟踪，才能在拖拽中和松手时，决定下一步改icon该如何运动，是回到原位？还是到一个新的位置？还是和另一个icon区域有重合从而合并形成一个新文件夹？
（2）在拖拽中和松手时应该发生什么？
第一，如果停止拖拽的时候，被拖拽的icon1，没有和其他icon区域重合，则自动回到原位；
第二，如果被拖拽的icon1，松手的时候被拖动所至位置已经与其他icon重合，则合并称一个文件夹icon。
我们先来定义第一个交互。
这里可以用到OnDragDrop事件（拖拽停止），以及case编辑中condition条件种类里的“area of widget”，这个condition条件的含义是“部件的区域”，被拖拽的icon是否与其他icon重合，就可以用到这个条件。
如下图13的参数设置所示：
图13：
（3）条件编辑窗口第二个下拉菜单中选择“icon1”，即icon1的area of widget/区域，第三个下拉菜单选择“is not over”，即“不覆盖”，第四个下拉菜单也是area of widget/区域，第五个下拉菜单是选择哪个部件是否被覆盖，选择icon2，如下图14所示：
图14:
我们知道，只是不覆盖icon2一个部件是不够的，我们总共有五个icon，所以需要再添加3个条件，满足条件设为“all”，即需同时满足四个条件。如下图15所示：
图15:
（4）满足以上定义的条件，则在OnDragDrop即松手之后，icon1自动回到原位，添加一个move动作和Set size动作，定义参数如下图16A和图16B所示
图16A：
图16B：
——————————————————分割线———————————————
【Step4】定义第二个交互，如果被拖的icon1与其他icon重合了，则应该组合成一个文件夹icon。
这里需要特别注意，被拖拽的icon与其他icon组成一个文件夹，不是在松手后发生的，而是在正在拖拽过程中发生的。这里，我们之前建立的那个实时监测的循环机制就要发挥作用了
（1）我们先想一下，在拖拽中，被拖拽的icon1是不适合用来做触发新case的，因为此时无法定义新的事件，OnDrag事件也无法用来随时触发新case，所以我们要用另一个部件来触发新case——就是那个能够做到实时监测状态的空白动态面板“move触发器”，因为它的OnMove事件是一直在持续不断触发的。
选中“move触发器”的OnMove事件，双击，弹出新的case编辑窗口，如下图17所示：
图17:
点击Add Condition，编辑条件如下，先以“与icon2重合并组成新文件夹icon为例”，如下图18所示：
图18:
（2）然后我们分解一下，两个icon组成一个文件夹，会有哪些转场动效？
一、出现一个新的文件夹背景icon（这里是一个新的圆角矩形）；
二、过一会儿，新的文件夹背景icon变大；
三、两个icon同时移动到合适的位置；
最终效果如下图19所示：
图19：
（3）先来制作第一个子动效果——“出现一个新的文件夹背景icon（这里是一个新的圆角矩形）”
以icon2为中心，新建并在合适位置摆放一个圆角矩形，命名、位置、大小参数设置如下图20所示：
图20:
然后先设该部件为隐藏，右击弹出菜单中选择“Set Hiden”，如下图21所示：
图21:
再次选中“move触发器”部件，并双击刚新添加的case2，在弹出的case编辑窗口中，点击添加Show/Hide动作和Set Size动作，参数如下图22所示：
图22:
另外还同样需要添加wait和move动作用来启用循环，并且这两个动作排序要在Show/Hide和Set Size之上，如下图23所示：
图23:
还记得前面我们刚开始建立循环时候编辑的case1吗？此时这两个case会有冲突，在运行时候你会发现文件夹背景icon出现的动效并未生效，我们需要再更改一下case的条件。
选中case2往上拖动，更改排序到case1之前，并右击case1在弹出的菜单里点击选中“Toggle IF/ELSE IF”，将case1的条件更改为else if，如下图24所示：
图24:
然后我们再来运行一下试试看效果。可以看到效果已经生效了，但是我们会发现被拖拽的icon1被叠在文件夹背景icon后面，我们需要在case2再添加一个“Bring widget to Front/back”动作，并且还需要适当降低icon1的透明度（使用Set opacity动作），参数设置如下图25所示：
图25:
再运行一下试试看效果。
（4）我们接下来制作第二个和第三个动效，但注意：新的动作并不是添加在move触发器的case2上，因为这是一个循环动作，最后会造成动效循环不断，所以我们需要将它添加给另一个部件——文件夹BG。点击选中文件夹BG的Move Events，在弹出的菜单里选中OnShow事件，如下图26所示：
图26：
进入case编辑窗口
我们需要在保持当前状态一段时间后，才启动第二个动效，所以需要先添加一个wait动作，设置为1000毫秒，然后第二个动效+第三个动效是放大文件夹BG，同时和两个icon一起移动到合适位置。所以需要添加Set Size和Move动作，
添加一个Set Size动作和Move动作，在右侧选中“文件夹BG”，参数如下图27所示：
图27:
试着运行一下效果，我们发现了一个bug：在文件夹放大并移动后，又缩小回了之前的大小。这是什么原因？
其实是那个move触发器的循环机制造成的。因为此时被拖拽的icon1仍然还覆盖在icon2上，所以，还是会触发文件夹BG出现并设置size为250x250的动作。我们需要给move触发器的case2再添加一个限制条件，除了icon1覆盖了icon2之外。我们还是要用到全局变量。
回到选中move触发器并双击case2弹出case编辑窗口，点击edit condition，点击右侧的绿色“+”按钮，添加一个新的条件，第一个下拉菜单选择“value of variable”，如下图28所示：
图28:
第二个下拉菜单选择“Add New”，即新建全局变量，如下图29所示：
图29:
设置全局变量命名和初始值如下图30所示：
图30:
然后再设置新的条件参数如下图31所示：
图31:
那么如何利用这个条件来终止循环呢？就是在文件夹BG的OnShow事件触发之后，立即将这个新建的变量值修改为其他值，比如1，而且特别注意：必须把这个为变量赋值的动作排序在第一位，否则无法生效，文件夹BG仍然为变回刚显示时较小的样式。如下图32所示：
图32:
试着运行一下效果，可以看到文件夹显示和放大的动效已经生效啦！
（5）再来添加一些细节，比如文件夹放大展开以后的背景半透明蒙版。新建一个1080x1920尺寸的透明度60%的黑色矩形，并设为Hide暂不显示，命名为“BG 半透明蒙版”，如下图33所示：
图33:
然后我们要更改一下文件夹动效触发以后的部分icon的顺序，被拖拽的icon1、被覆盖一起合并称文件文件夹的icon2、文件夹BG这三个部件需要排序到新添加的半透明BG之上，我们仍然使用Bring to front/back动作。
选中move触发器的OnMove事件的case2，双击打开case编辑窗口，在之前已经定义的Bring icon1 to front动作之前，再添加一个Bring to front/back动作，在右侧分别勾选icon2部件和文件夹BG部件，如下图34所示：
图34:
接下来再为文件夹BG的OnShow事件的case，添加一个Show/显示半透明蒙版的动作，如下图35所示：
图35:
（6）icon1和icon2需要一起移动到放大后的文件夹BG内。还是选中文件夹BG，为其OnShow事件的case再添加move动作，如下图36所示：
图36:
在右侧栏选中icon1和icon2，分别设置move参数如下图37所示：
图37:
同时，icon1还要恢复到原始大小，再添记一个set size动作，注意这个动作需要在前面添加的move动作之前，参数如下图38所示：
图38:
（7）运行一下效果我们发现，在松手后，icon1回到了原始位置。所有，我们需要给move触发器的OnDargDrop事件添加一个条件，此时也可以利用前面的那个FileShow变量，除了前面添加的其他条件，还必须当FileShow值为0，也就是尚未触发文件夹生成时，松手，才回到原始位置
如下图39所示；
图39：
——————————————————分割线———————————————
【Step5】补完最后整个操作的最后一步交互：完成文件夹创建后，点击蒙版空白处，文件夹缩小回到普通icon大小，同时所有的icon重新排布位置。
（1）选中“BG 半透明蒙版”，双击OnClick事件，弹出case编辑窗口，如下图40所示：
图40:
（2）我们首先需要添加条件，因为只有当文件夹生成，也就是全局变量FileShow值为1的时候，点击动作才生效，条件设置如下图41所示：
图41：
（3）文件夹缩小为普通icon大小的动效，分解一下有以下几步：
半透明蒙版消失；
文件夹BG缩小到180x180的普通icon尺寸大小，并移动到合适位置；
icon1和icon2跟随一起缩小并移动至合适位置；
所有icon重新排序；
我们一步步分解来做。
首先是最简单的半透明蒙版消失，添加Show/Hide动作，设置如下图42所示：
图42:
（4）再添加一个Set Size动作和move动作，在右侧选中文件夹BG、icon1、icon2，分别设置参数如下图43A、图43B、图43C所示：
图43A:
图43B：
图43C：
另外我们要补充一个属性编辑，需要将icon1和icon2两个动态面板的右侧properties/属性栏中，勾选“Fit to Content”，如下图44所示：
图44:
这样的话， 动态面板的显示范围，会随着动态面板里面的内容区域大小一起变化，有时候这是一个很有用的属性。
试着运行一下效果，我们发现文件夹BG的圆角太大了，目前我使用Axure8最新版本还无法支持设置更改圆角，所以我们只能暂时先凑合一下啦～还有一个办法， 就是不要用axure中的矢量矩形部件来创建文件夹BG，而改用图片素材，这样可以做到圆角随着size缩放而变化，效果会更好一些。
另外还有个问题是icon1和icon2的文字text部件也无法跟随缩放，所以可以在文件夹icon缩小的同时，暂时隐藏，添加show/hide动作并设置参数如下图45所示：
图45:
（5）最后一步是其他icon的重新排布。在添加一个move动作，在右侧栏选中“icon3”、“icon4”
、“icon 文件夹”，参数分别设置如下图46所示：
图46:
此时，整个拖拽icon合并成文件夹的交互动效已经基本完成了。
基本原理如此，大家还可以再探索一下是否有更简单的方式，或者更加好的效果，自己再添加一些更丰富的细节～
