【原创Axure教程7】用Axure做复杂动效——实例7：“拖拽按住 + 松手” 两段式交互转场

【摘要·简介】

这一次要做的交互转场动画，是“拖拽按住 — 再松手” 的连续的两段式交互转场：1、先拖拽，界面响应操作，引发一段转场；2、再松手，界面再次响应，引发第二段转场。

涉及的技术点：

1、OnDrag和OnDragDrop连起来运用。

2、掌握使用Set Opacity动作和Rotate动作

我们先来看一下完成后的效果：

完成效果的操作录屏视频，教程中所用的素材，以及Axure工程源文件（包含起始状态的工程文件和完成后的工程文件）都在附件中提供下载。

【补充】：因为很多人说看不到附件，我把所有教程附件上传了百度云分享，有兴趣同学自取哈

https://pan.baidu.com/s/1_RTy16FcZ9OHNXlE3Xb0OQ

接下来是正文开始~~

——————————————————分割线———————————————————

【Step1】

1、打开素材文件夹中的“Axure工程文件.rp”，这里我们就省略了页面摆放设计这一步了哈~。可以看到所有的素材文件都已经摆好了位置，我们这些接下来直接开始做动画和交互~如下图2所示：

图2：

——————————————————分割线———————————————————

【Step2】开始做动画和交互——第一段交互操作：拖拽

1、观察一下完成后的效果，可以看到交互操作分两段：第一段，按住拖拽卡片，卡片响应操作被拖歪；第二段，松手，释放卡片，卡片飞走，下方的其他信息相应自动更新。

接下来我们开始制作，先做一段动画。

2、选择“图1-car1”，在右侧栏里的“+Add case”下选择“OnDrag”，即“拖拽”，双击打开case编辑窗口，如下图3所示：

图3：

注意一定要勾选“Fit to Content”

3、在打开的case编辑窗口中，选择添加“move”动作，在右侧栏里选择“图1-car1”，设置参数为x55，y132，即“图1-car1”在拖拽动作发起后略往上移动。如下图4所示：

图4：

然后除了拖拽的时候，除了上移，还有小角度倾斜旋转。所以还要添加小角度旋转的动画，即“Rotate”动作。添加一个Rotate动作，在右侧选择动态面板下的图片部件（Image），设置参数为旋转3度，如下图5所示。

所有参数设置如下图5所示：

图5：

预览一下效果。旋转后，可以看到因为动态面板勾选了“Fit to Content”，动态面板显示范围会自动适应里面的内容变化，所以没有出现图片没有显示全被割裂的情况，但是可以看到出现了横向的略微偏移，导致图片看起来没有居中，所以还需要在x方向的move做微调。选中之前添加的move动作，在右侧栏里选中“图1-car1”，move参数里，x值由原来的55改为69，如下图6所示：

图6：

3、基本上，第一段交互动画效果已经有了。接下来，完善细节。

观察完成后的效果我们可以看到在拖拽的时候，底下还有两层透明度较低的卡片图，也会有相应的轻微倾斜偏移，且透明度会发生变化。所以还是在“图1-car1”的“OnDrag”case上编辑添加。

在“图1-car1”的“OnDrag”case编辑窗口中，选中刚已添加的Rotate动作，在右侧选中动态面板“图2-car2”下的图片部件（Image）和动态面板“图3-car3”下的图片部件（Image），分别设置旋转参数为的顺时针的1度和逆时针的2度，如下图7A和图7B所示：

图7A：顺时针1度

图7B：逆时针2度

4、添加move的移动微调。选中Move动作，在右侧选中动态面板“图2-car2”和动态面板“图3-car3”，分别设置move参数的x值为205和265，如下图8A和图8B所示：

图8A

图8B：

5、修改透明度。添加一个Set Opacity动作，在右侧选中动态面板“图2-car2”下的图片部件（Image）和动态面板“图3-car3”下的图片部件（Image），分别设置透明度为50%和15%，如下图9所示：

图9：

——————————————————分割线———————————————————

【Step3】开始做动画和交互——第二段交互操作：松手后释放卡片 · 01

1、选中动态面板“图1-car1”，双击添加新的case“OnDragDrop”即停止拖拽也就是“松手”。如下图10所示：

图10：

2、在打开的case编辑窗口中，添加一个Move动作和Rotate动作。

3、然后在右侧栏里选中动态面板“图1-car1”，设置move的参数为x1100，y-180；选中该动态面板下的图片部件（Image），设置Rotate的参数为顺时针60度，详见如下图11A和图11B所示：

图11A：move参数

图11B：动态面板“图1-car1”下的图片部件（Image）的Rotate参数

4、在Rotate动作上，在右侧选中动态面板“图2-car2”下的图片部件（Image），设置参数为逆时针旋转至0度，即角度返回至水平0度，注意旋转轴心（Anchor）要选择Top即顶部中点作为旋转轴心，如下图12所示：

图12：

5、添加一个Set Sized动作，在右侧动态面板“图2-car2”下的图片部件（Image），设置大小参数为530x530，如下图13所示

附注：因为勾选了动态面板的“Fit to Content”，所以动态面板内的图片大小改变后，作为容器的动态面板会自动适应图片大小，因此无需再对动态面板添加Set Size动作。

图13：

6、在Move动作上，在右侧再选中动态面板“图2-car2”，设置位置参数为x60，y172；同时还要选中动态面板“图2-car2”下的图片部件（Image），设置位置参数为x0，y0，如下图14所示：

图14：

6、添加一个Set Opacity动作，选中右侧的动态面板“图2-car2”下的图片部件（Image），设置参数为100%，如下图15所示：

图15：

7、第二张图片的动画设置完毕，接下里设置最底下第三张图片的动画，同样要依次设置size大小、move位置和Opacity透明度。

选中Rotate动作，在右侧选中动态面板“图3-car3”下的图片部件（Image），设置参数如下图16所示：

图16：

8、选择下面的Set Size动作，在右侧选中动态面板“图3-car3”下的图片部件（Image），设置参数如下图17所示：

图17： 

9、选择下一个Move动作，在右侧选中动态面板“图3-car3”，设置参数为x70，y216；同时还要选中动态面板“图3-car3”下的图片部件（Image），设置参数为x0，y0。参数如下图18所示：

图18：

——————————————————分割线———————————————————

【Step4】第二段交互操作：松手后释放卡片 · 02

1、在释放卡片之后，下方的字符串、价格等内容也要相应切换。观察完成后的效果可知，上一张卡片的文字内容向上移动同时淡出消失，下一张卡片的文字内容向上淡入出现。

还是选中被拖拽的卡片动态面板“图1-car1”，双击OnDragDrop打开case编辑窗口，添加一个Move动作和Set Opacity动作，均需要在右侧选中“标题1 Corvette C6 ”，设置参数如下图19所示：

图19：

这是标题文字上移消失的动画。间隔一段时长之后，是标题下方的介绍性文字段落上移消失的动画。

2、所以要先添加一个Wait动作，设置时长参数为90ms，如下图20中红色矩形1内所示。

然后添加一个Move动作和Set Opacity动作，在右侧同样要选中“文字段落1 Corvette C6 ”，设置参数如下图20中红色矩形2内所示：

图20：

预览一下原型看看效果。

3、接下来要设置最下方价格字符串元素的上移消失动画。这段动画也是有一定的延迟。所以再添加一个Wait动作，设置时长参数为90ms，如下图21中红色矩形1内所示。

然后添加一个Move动作和Set Opacity动作，在右侧同样要选中“C6价格 ”，设置参数如下图21中红色矩形2内所示：

图21：

4、消失的页面元素的动画已经完成，接下来要制作新的页面元素的进场。

先添加一个Wait动作，设置时长60ms。然后再添加一个Show动作、Move动作和Set Opacity动作，在右侧同样要选中“标题2 Corvette C7 Stingray”，设置参数如下图22中所示：

图22：

5、添加一个Wait动作，设置时长90ms。然后再添加一个Show动作、Move动作和Set Opacity动作，在右侧同样要选中“文字段落2 Corvette C7”，设置参数如下图23中所示：

图23：

6、添加一个Wait动作，设置时长90ms。然后再添加一个Show动作、Move动作和Set Opacity动作，在右侧同样要选中“C7价格”，设置参数如下图24中所示：

图24：

7、最后设置背景大图的渐变动画。

在Move 标题1 Corvette C6 动作前面添加一个Set Panel State动作，选中右侧的“Dymp_背景大图”，设置参数如下图25红色矩形框内所示。

图25:

至此为止，完整的拖拽+松手两段式交互动画已经完成了，切换了一张卡片，接下来大家试试用同样的方法，做切换第二张卡片卡片的两段式交互动画，方法一模一样。

附注：不过在预览原型的过程中发现，运行过程有点问题：在松手后，下一张卡片的透明度有时候不会变成100%，或者要等一段时间才会变成100%，也就是说，在OnDragDrop的Set Opacity to 100%动作有时候不会生效。

这里有一个解决方案，那就是把OnDrag下的Set Opacity动作移动到OnDragStart下，如下图26所示：

图26：