【原创Axure教程6】用Axure做复杂动效——实例6：卡片切换缩放与三段式交互动画

Kebot

上海/产品设计师/7年前/4134浏览

版权

Kebot

这一次要做的，是一个卡片切换缩放与三段式交互全屏页面的转场，依然是一个典型的material design风格的动效设计。

【摘要·简介】

这一次要做的，是一个卡片切换缩放与三段式交互全屏页面的转场，依然是一个典型的material design风格的动效设计。

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

清晰版视频与教程中所用的素材，以及Axure工程源文件都在附件中提供下载。

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

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

接下来是正文开始~~

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

【Step1】

1、依然像之前教程提到的那样，第一步是用动态面板建立一个大小为540x960的总的容器，命名为“dymp_总容器”。参数如图1中红线圈内所示：

图1：

2、然后，双击进入该动态面板。

之后将素材文件夹中的“Basic BG.png”和small image1~6的图片，按照如下样式布局排列好。如下图2所示，每张小图的命名参见各个红色矩形框内箭头所指。依次命名small iamge1~6。

图2：

3、然后，导入素材文件夹中的Big image 6.png，如下图3所示，图片的大小位置参数见红框内，并命名为“Big Image 1”。

图3：

再从素材文件夹中添加两个字符图片素材分别是“Renault concept car.png”和“Symbioz.png”，大小位置参数如下图4A和图4B所示：

图4A：

图4B：

4、接下来，同时选择这三个部件，右键弹出菜单中选择“convert to dynamic panel”，即转换为动态面板，命名为“Dymp1_转场图片组1”，如下图5所示：

图5：

注意！必须要取消勾选动态面板属性中的“Fit to Content”。如下图5B所示：

图5B：

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

【Step2】

1、接下来我们来制作第二个转场图片组。导入素材文件夹中的“Big image 7.png”，大小和位置参数如下图6中红圈所示，并命名为“Big Image2”：

图6：

2、将刚添加的图片转换为动态面板，并设置动态面板的大小为156x156，并微调位置参数，命名为“Dymp2_转场图片组2”，如下图7所示：

图7：

3、双击进入动态面板，再从素材文件夹中导入两个字符图片“Benz concept car.png”和“Biome.png”，位置参数如下图8的红色箭头所指

（附注：之所以字符串是在下面，是因为字符串是在转场完成变成大图之后才出现的，在转场过程中，字符串相对动态面板的位置不变，即转场完成后，字符串透明度淡入显示。）

图8：

之后，需要设置两个字符串为隐藏（右击弹出菜单选择“Set Hidden”）

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

【Step3】开始制作交互动作和动画

1、选择“Dymp1_转场图片组1”，选择“OnSwiftLeft”（即向左滑动）这一case，双击打开case编辑窗口，如下图9所示：

图9：

2、先添加一个Move动作，在右侧栏里选择“Dymp1_转场图片组1”，设置move相关参数如下图10所示：

图10：

3、接下来再添加一个Set Size动作（即重设尺寸），先在右侧栏里选择“Dymp1_转场图片组1”，再选择动态面板Dymp1_转场图片组1下的“Big Image1”，这两个Set Size动作相关参数设置如下图11A和图11B所示：

图11A：

图11B：

因为缩小动态面板仅仅是缩小了容器大小，容器内的图片也需要相应缩小，所以需要两个Set Size动作。

预览一下我们发现，图片位置稍有偏移，没有与上半部分的其他小图对齐，我们为图片部件“Big Image1”再添加一个move动作为其做微调，稍微往下移动2px，参数如下图12所示：

图12：

再预览一下，我们发现基本对齐了。

4、第4步，为字符串添加透明度淡出消失动画。添加一个Hide动作，在右侧栏里选择“”和“”，如下图13所示，消失动画时长均为200ms。

图13：

5、第5步，观察完成后的效果我们可以发现，在动画进行到大约一半时候，所有的大小图还会做一次平移动画。所以我们再为所有大小图部件添加Move动作，但是在这之前，需要先添加一个wait动作，即需要在开始动画后等待一段时长，才开始做这些大小图的平移动画。如下图14所示，在之后添加Wait动作，设置参数为200ms。

图14：

接下来设置各个大小图片的位移动画，参数如下图15中各个红色矩形圈1~3内所示：

图15：

6、第6步，因为其他图片往前移动了，最后还要修改下上由大变小的“Dymp1_转场图片组1”的move参数，参数修改如下图16所示，改为x315，y85。

图16：

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

【Step4】下半部分界面元素的转场

1、先来制作下面一行小图的第一张图片即“Dymp2_转场图片组2”由小到大转场的动画。

依然选中动态面板“Dymp1_转场图片组1”，在其OnSwiftLeft的case上添加新的动作。双击打开case编辑窗口，注意，新的关于“Dymp2_转场图片组2”的动作必须要添加在那个Wait动作之前，因为其转场是和由大变小的“Dymp1_转场图片组1”同时进行的。如下图17所示，在第一个Wait之前再添加一个Move动作，选中右侧栏的“Dymp2_转场图片组2”，设置参数如图17中红色矩形框内所示。

图17：

2、设置尺寸由小到大的动画。再添加一个Set Size动作，选中右侧栏的“Dymp2_转场图片组2”，设置参数为x570，y456，同时还要同步设置动态面板内图片的尺寸也要相应变大，选中右侧栏“Dymp2_转场图片组2”下的Big Image2，设置尺寸参数为x546，y432，如下图18所示：

图18：

3、预览一下原型，发现“Dymp2_转场图片组2”内的大图还需要做一次位移的微调，再添加一个move动作，选中右侧栏“Dymp2_转场图片组2”下的Big Image2，设置参数为x12，y6，如下图19所示：

图19：

4、预览一下，基本转场效果已出来了。

接下来为下面的三张小图添加向前位移的动画。这些小图的位移动画需要添加在Wait动作之后。三张小图的位移参数分别见下图20中的红色箭头框1、红色箭头框2、红色箭头框3所指，

图20：

5、添加动画细节。观察完成后的效果可以看到，小图的位移还有依次延迟效果。

因此，我们还是要使用Wait动作。添加wait动作之前，先调整一下各个小图的move动作的先后顺序如下图21所示。附注：同时按住ctrl/command+上下键可以移动顺序。

图21：

除了第一个small image4的move动作，后面的move动作之前依次添加一个wait动作，分别设置参数为40ms，如下图22所示：

图22：

6、添加阴影。转场完成后的第二张大图“Dymp2_转场图片组2”缺少阴影，接下来我们为其新建一个带阴影的矩形部件放到后层，代替作为“Dymp2_转场图片组2”的阴影。新建一个大小尺寸为156x156的白色矩形部件，命名为“ 转场图片2_shadow”，设置位置参数为x158，y891，设置阴影参数如下图23中红色矩形框3内所示：

图23：

7、按住 ctrl/command+[ 键，往下移动几层到图片之后，如下图24效果所示：

图24：

8、在“Dymp2_转场图片组2”由小到大转场的时候，阴影也要随之移动和变大。

选中“Dymp1_转场图片组1”双击打开case编辑窗口，在“Dymp2_转场图片组2”的move动作上，在右侧栏再选中“ 转场图片2_shadow”，设置参数为x46，y346，如下图25A所示；同时在“Dymp2_转场图片组2”的Set Size动作上，在右侧栏再选中“ 转场图片2_shadow”，设置参数大小为（546,432），如下图25B所示：

图25A：