Axure做material design风格的复杂交互动效1：深入axure遮罩动画-教程-中文社区

Axure做material design风格的复杂交互动效1：深入axure遮罩动画获赏10金币案例教程 基础教程

kebot 普通用户 2020-4-3 2667

我把所有教程附件上传了百度云分享，有兴趣同学自取哈

地址：https://pan.baidu.com/s/1bqmWaE7】

这次做的是一个典型的material design风格的动效设计。涉及到的技术细节与要点：

（1）用动态面板做遮罩动画的深入练习（局部遮罩和全遮罩的切换过渡）；

（2）合理运用wait动作，来调整交互转场动画的节奏感

（3）滑动case运用

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

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

接下来是正文开始~~

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

【Step1】

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

图1：

—————————————————————————————————————————

【Step2】

接下来我们先来观察和分解我们要制作的动画效果，主要有哪些组成部分。

首先，这次的动效转场可以分两个阶段：

第一阶段：向左滑动一小段距离，右侧下层出现局部地图；如下图2所示：

图2：

第二阶段：继续向左滑动，滑出全部地图之后，整个页面整体往上移动，并出现新的列表元素进场；如下图3所示：

图3：

通过对两个阶段转场的分别进一步仔细观察，我们可以得到如下几个要点：

第一阶段的动画细节：

（1）actionbar固定不动；

（2）蓝色汽车图片在卡片框架内部往左移动一短距离，注意图片自带阴影；

（3）露出下面一层的背景底图即地图图片；

（4）卡片下方的白色长条背景的文字信息往左移动透明度淡出消失，同时新的文字信息同步透明度淡入进场；

第二阶段的动画细节：

（1）蓝色汽车图片向左移动完全移出卡片内部消失；

（2）下方的其他汽车卡片缩小透明度淡出消失；

（3）背景地图向上移动并放大，固定到屏幕上部区域；

（4）白色长条背景与文字信息也向上移动；

（5）新的图片与列表部件向上移动透明度淡入进场；

这其中，比较有点复杂和难度的主要是卡片框架内的图片移动和阴影，以及地图的放大，两个都涉及到到动态面板的使用，这在之前的几个教程中都有讲到，我们就再来熟悉一下哈~

—————————————————————————————————————————

【Step3】摆放各个部件元素，拼成完整界面

·1 双击“dymp_总容器” 进入state1，如图4所示：

图4：

·2 接下来，把所有不需要制作成动态面板的元素部件先全都摆放到屏幕上，并做好各自命名。

（1）我们先来做一些结构组成比较简单的基础元素，如actionbar、底层大背景，以及下方的另两个卡片部件，命名和各个位置参数如下图5所示：

图5：

（2）接下来我们制作将作为动效主体的卡片部件，即页面上的第一张卡片。因为后面的动效中，下方的白色长条和上半部的图片是会分开做动画的，因此这里做两个动态面板分别用来做图片和白色长条标签的容器。其命名、位置、大小尺寸参数如下图6所示：

图6：

注意一定要把两个动态面板都取消勾选“Fit to Content”

接下来，我们为刚新建的两个动态面板加入内容元素。

（3）先为上半部分的动态面板添加内容。

先双击dymp_card1并双击state1打开，进入该动态面板。然后将图片“card1-前层图片.png”和“card1- 后层内阴影.png”放置进来，前者在上层，后者在下面一层，位置参数均为（0，0），分别命名为“card1-前层图片”和“card1- 后层内阴影”，如下图7A和图7B所示：

图7A：

图7B：

最后，再添加一张地图图片，位置参数同样为（0，0），命名为“card1-后层地图图片”，如下图8所示：

图8：

（4）接下来为下半部分的白色长条标签动态面板添加内容。

先添加一个白色背景，将素材包里的“底部白色标签-bg.png”添加进来，位置参数（0，0），命名为“底部白色标签-bg”，如下图9所示：

图9：

然后将其他元素（在附件素材包中均有）添加进来，位置参数如下图10所示：

图10：

第一阶段的动画中，白色标签内的字符串有两条过渡切换，因此我们再添加一条字符串（用axure自带的字符串部件），编辑文字内容为“There's no replacement for cubic displacement”（这里大家完全可以自己随便编辑），然后将部件命名为“card1-标题2”，设置位置参数为（97，35），然后设置字体为Helvetica且Light细体，字号大小为15，然后设置隐藏。如下图11所示：

图11：

—————————————————————————————————————————

【Step4】制作第二阶段的动效中，进场进来的新页面元素

ok，目前为止，我们第一阶段动效所涉及的页面元素已经全部制作完成，接下来我们制作第二阶段动效所涉及的页面元素。

·1 如前所述，第二阶段的动画细节中，新进场的图片与列表部件是向上移动透明度淡入进场，而且更细节的在于作为背景底板的白色矩形仅作位置移动，大小不变；而图片和列表部件是一边向上移动一边从小到大放大。所以图片和列表部件需要和背景白色底板分开来。

所以一开始需要将这些第二阶段动效新进场部件元素放置在下方。

我们从素材库中将图片素材拖入进来，其命名、位置参数、如下图12所示

图12：

·2 接下来，设置其隐藏，如下图13所示：

图13：

OK，到此为止，我们所有的需要的元素均制作完成，接下来，正式开始制作动画部分吧~~

—————————————————————————————————————————

【Step5】制作第一阶段的动画

·1 添加向左滑动手势。

选择部件“dymp_card1”，在右侧选择OnSwipeLeft事件，右击菜单中选择Add Case为其添加case（双击也可直接弹出case编辑弹窗），意即通过向左滑动动作事件，触发某种交互case。如下图14所示：

图14：

·2 制作图片的移动动画

在弹出的case编辑窗口中，添加move动作，并在右侧选择“card-前层图片”，设置参数如下图15：

图15：

即向左滑动手势动作，触发“card-前层图片”向左移动100像素，动画时长300毫秒，采用ease out cubic动画曲率。

·3 制作下方白色标签内的字符串切换动画。

在case编辑窗口中，选择刚添加和编辑的move动作，在右侧选择“card1-标题1”，设置参数如下图16所示：

图16：

然后再添加一个show/hide动作，依然是选择“card1-标题1”，设置参数为hide，动画方式为fade（即淡入淡出）时长300ms，如下图17所示：

图17：

为了避免两个元素在同时淡入淡出过程中叠加在一起而造成效果不好，因此我们需要让第二条字符串进场的动画延迟一些。在左侧添加一个wait动作，设置时长为200ms，如下图18所示：

图18：

在刚添加的wait动作后面，再添加一个show/hide动作，在右侧再选择“card1-标题2”，设置参数为show，动画方式fade，时长300ms，如下图19所示：

图19：

OK，到此为止，第一阶段的动效已制作完成。但是，我们还得补上向右滑动即返回的动效。

—————————————————————————————————————————

【Step6】制作第一阶段的动画的返回转场

·1 添加相反的向右滑动手势。

选择部件“dymp_card1”，在右侧选择OnSwipeRight事件，右击菜单中选择Add Case为其添加case（双击也可直接弹出case编辑弹窗），意即通过向左滑动动作事件，触发某种交互case。

因为返回的时候，所有的动效都是向左滑动时候动效的相反效果，是一一对应的，所以我们就不一定要重新一个个action开始编辑，我们可以先将向左滑动OnSwipeLeft事件的case复制一下，拷贝到刚刚新建的OnSwipeRight事件上，然后在其基础上进行编辑，这样也不会漏掉某个action。

如下图20所示，拷贝OnSwipeLeft事件的case。

图20：

然后，黏贴到刚刚新建的OnSwipeRight事件上，如下图21所示：

图21：

·2 编辑返回动画参数。

然后双击打开case编辑弹窗，分别将参数修改成如下图22所示：

图22：

注意需要将card1-标题1和card1-标题2在上下顺序上换个位置，因为返回到的时候，就应当是标题2先消失，标题1再出现。

预览一下效果，我们发现再返回的时候，标题1只有淡入淡出动画，没有向右移动的动画，这是因为在上面的case的action中，在wait了200ms后，标题1才show出现，所以前面做move动画的时候，标题1依然是隐藏状态，所以看不见move的移动动画。

解决方案是将标题1的move动作移动到标题1的show动作下方。具体方法是先取消勾选第一个move动作中的“card1-标题1”，然后在最后即card1-标题1的下方新建一个move动作，设置参数如下图23所示：

图23：

这样，返回动画就完成了。

—————————————————————————————————————————

【Step7】制作第二阶段的动画之第一部分

·1 在dymp_card1的OnSwipeLeft事件上再添加第二个case，重新命名为“Case2_第二阶段”，如下图24所示：

图24：

·2 接下来，我们得明确一下：现在OnSwipeLeft事件上有两个case，我们需要用全局变量来定义什么时候执行第一阶段动画的case，什么时候执行第二阶段动画的case。类似的制作技术我们在之前的教程中有讲到过。

点击顶部的project菜单，选择Global Variables，在弹出的弹窗里新建一个命名为“Card1transition”，设置默认值为0，如下图25所示：

图25：

然后我们来编辑第一阶段动效的case1的条件，设置条件如下图26所示：

图26：

在case1中，最后添加一个设置变量的action，修改变量值为1，即第一阶段转场之后，变量变为1，那么第二次再向左滑动的时候，就要基于这个条件（变量值为1的条件），才能触发第二阶段的动效“Case2_第二阶段”，编辑case1如下图27所示：

图27：

接着，我们来编辑第二阶段的动效的“Case2_第二阶段”的触发条件，设置如下图28所示：

图28：

·3 通过观察完成后的效果可知，第二阶段的动画中，首先是dymp_card1中的上层图片完全移出卡片内部，这就需要添加move动作，设置参数如下图29所示：

图29：

·4 与此同时，下面的另两张卡片即部件“other card2+card3”同时缩小并淡出消失。因此需要添加set size和show/hide两个action，设置参数如下图30和图31所示：

图30：

图31：

—————————————————————————————————————————

【Step8】制作第二阶段的动画之第二部分

·1 制作上方actionbar的背景往上移动出画面消失。

依然选中并双击打开“Case2_第二阶段”的编辑窗口。仔细观察完成后的动画可知，actionbar的动画、地图的放大、白色标签的上移、新的列表的出现，这几个动画都相对前面的第一部分动画有所延迟，所以我们要先添加一个wait动作，设置后面的动画在刚刚制作的第一部分动画开始后延迟等待若干时长后才开始。

顺便说一下，在交互动画中，如果涉及多个部件的转场，那么掌握好各个部件开始做动画的节奏是很重要的，掌握得好，这一组交互动画就会非常有节奏感，转场更舒服，反之，若没有好的节奏感，可能会造成这个交互转场非常混乱、杂乱，导致用户不知道哪个界面元素是怎么出现哪个界面元素又到了哪里等问题。

所以，我们在涉及比较复杂的交互转场的时候，各个元素的动画时机要掌握好节奏。

添加一个wait动作，并设置其参数为100毫秒，如下图32所示：

图32：

添加一个“move”动作，在右侧选中部件“actionbar bg”并设置参数图下图33所示：

图33：

·2 接下来设置actionbar上的文字向下移动的动画

然后再选中“group_actionbar文字”，设置其move参数如下图34所示：

图34：

·3 接下来制作地图放大和白色标签上移的动画。

选中move动作，在右侧选中白色标签部件“dymp_card1-白色标签”，设置参数如下图35所示：

图35：

·4 下一步，制作地图的放大。我记得前面的教程有涉及到过大小的动画制作方法。

先添加一个Set Size动作，然后选中动态面板部件“dymp_card1”，设置其大小参数如下图36所示：

图36:

这里我们只是放大了地图，我们还需要将这个动态面板部件往上移动。因此我们再添加一个move动作，选中部件“dymp_card1”，我们设置其参数如下图3

7所示：

图37：

预览的时候我们发现还需要将这个动态面板内的那个内阴影要隐藏掉，所以我们再添加一个show/hide动作，选中部件“card1-后层内阴影”，设置其参数如下图38所示：

图38：

·5 动画的最后一部分，就是将新进场的列表元素，即前面隐藏起来的部件“sc02-白色底板”、“sc02-part1”和“sc02-part2”，为它们制作进场动画。

观察前面的完成后效果可知，这几个sc02的部件，均是向上移动同时透明度淡入的动画，且“sc02-part1”和“sc02-part2”同步还有放大的动画。那么我们就一个个来制作吧！

—————————————————————————————————————————

【Step9】制作第二阶段的动画之第三部分

·1 依然选中并双击打开“Case2_第二阶段”的编辑窗口。

在后面先添加一个show/hide动作，将隐藏的这三个部件显示出来，参数如下图39所示：

图39:

再添加一个move动作，并先选中部件“sc02-白色底板”，设置其参数如下图40所示：

图40：

同样我们也为另外两个sc02的部件添加响应的合适的move参数，如下图41和42所示：

图41：

图42：

·2 然后再来设置部件“sc02-part1”和“sc02-part2”的放大动画，添加一个Set Size动作，在右侧选中“sc02-part1”和“sc02-part2”，设置其参数如下图43所示：

图43：

—————————————————————————————————————————

【Step10】完善细节

·1 通过预览发现，虽然整体上效果基本oK，但是还是有一个不足够完善的细节瑕疵：在第二阶段转场中，card1的汽车图片移动退场消失动画尚未完全做完，后面的地图就开始放大并上移，会有一个汽车图片的残影。解决方案是，我们在sc02的三个部件（“sc02-白色底板”、“sc02-part1”和“sc02-part2”）的进场动画顺序上移到“地图放大+白色标签上移动画”之前，然后在sc02的三个部件进场动画之后再加一个wait动作，即让“地图放大+白色标签上移动画”再晚100ms做转场动画。这就是交互动画节奏的细节把握，并没有什么放之四海而皆准的法则，主要是从设计师的日常工作经验中积累的。

·1 首先将sc02的三个部件（“sc02-白色底板”、“sc02-part1”和“sc02-part2”）的进场动画顺序上移，如下图44所示：

图44

·2 然后在中间添加一个wait动作，设置其参数为100ms，如下图45所示：

图45：

对了，别忘了再最后补上一个设置变量的动作，改变条件中那个全局变量“Card1transition”的值，并且为前面制作的返回手势OnSwipeRight的case添加一个条件，只有当变量值为“Card1transition”为1的时候，向右滑动的返回手势才能有效触发返回动画。参数设置如下图46和47所示：

图46：设置变量值