【原创Axure教程1】用Axure做复杂动效——实例1：卡片展开详情和图集的交互转场动效
【这是一个系列教程，内容均为用Axure实现复杂交互动效】
Axure是个非常强大的交互原型工具，可实现各种复杂有趣的交互动效
地址：https://pan.baidu.com/s/1bqmWaE7】
个人非常喜欢和认同这样一种交互动效：即在转场两个页面的动态当中，有一个贯穿转场两个页面的界面元素，可能是一个图标，也可能是一张图片，也可能是一行字符串。最经典案例我认为就是google在Google I/O 2014 发布的 Material Design设计语言中关于动画的那两条principle：“meaningful transition（有意义的转场）”和“visual continuity（视觉连贯性）” 。所涉及实例如下：
以上实例中，用户头像、被点击的图片均在转场动画中通过变形、位移等贯穿两个页面，体现了一条清晰的转场路径，而且指明当前页面是从哪个元素展开的。
关于 Material Design这套设计语言本身，也许尚存在争议，但我个人认为其中关于交互动效设计的这两条principle，应该说是很有指导意义的。dribble上大量出现的越来越多的此类动效设计作品，也说明了在交互动效领域，Material Design的这两条principle应该是说得到了全世界大部分设计师的认可。
基于个人工作需要和兴趣，一直在实践尝试用Axure来实现这些交互动效，既可以查看动态效果，也可以实际体验交互操作，而且axure的跨平台性还不错，只要有浏览器就可以看。因此，积累了一些axure做交互动效的实例，跟大家一起分享交流一下。
【这系列教程均为用Axure实现Material design风格的交互动效】
Axure的功能很强大，实现一种效果可以有多种方法，我自己在这里所写的方法只是个人使用的其中一种，也许有更方便快捷的方法，欢迎大家一起交流~
废话说完，正式开始。
————————————————————分割线——————————————————————
这个教程所实现的是一个卡片展开详情和图集的交互转场动效，图片与色块等界面元素在多次转场中，均通过变形位移等手段贯穿整个交互转场。同时也初步介绍一下Axure的变量和条件逻辑应用。完成后效果看下图gif，也可以下载附件查看清晰版：
事前用PS制作准备好所需的切图素材如下图1.0：
图1.0
（附件中已有包含教程所涉及的全部切图素材）
【附件也已上传百度云盘，链接https://pan.baidu.com/s/1pLjVfBl】
————————————————————————————————————————————
【Step1】
这个动态面板命名为“dymp_总容器”。由于动态面板内的内容只在动态面板大小范围内显示，相当于遮罩的作用，因此，这个作为总容器的动态面板，即可以看作是一个540x960大小的手机屏幕，所有元素均只在这个屏幕范围内显示。所有的操作和编辑也都在该动态面板内进行。如图1.1
图1.1
注：为了固定显示范围，需要在右边的属性面板（切换到properties）中将动态面板的“fit on content（大小自动适应内容）”属性关闭，如下图1.2：
图1.2
————————————————————————————————————————————
【Step2】
双击进入动态面板，开始编辑动态面板里的内容，也就是真正的GUI界面效果。
（附注1：关于Axure的动态面板运用，学过Axure的同学应该很了解，动态面板在Axure里可以做出非常多的各种交互效果，可以说是axure使用最频繁的部件，在这里就暂不再赘述。）
双击动态面板后，会弹出一个弹窗（如图1.3），进行state（状态）的选择，此时选择默认的state1
（附注2：动态面板可以包含多个不同state，每个state可以理解为一个图层，用以存储不同的内容，切换state可以很方便地实现切换多个界面的效果。）
图1.3
进入动态面板“dymp_总容器”的state1之后：
图1.4
————————————————————————————————————————————
【Step3】
观察我们所要制作的效果，可以看出该交互动效中，按照两次交互动作（两次点击）所引发的不同界面变化，可以分为三段场景：第一段场景是默认界面，即图1.5：SC01；第二段场景是第一次点击下方蓝色方块后产生的界面转场变化，即图1.6：SC02；第三段场景是再次点击上部区域的图片，产生的第二次界面转场变化，即图1.7：SC03；
可以看出，从SC01—SC02的转场中，蓝色奥迪图、蓝色色块及上面的字符串元素这几个界面元素通过变形、位移等始终贯穿在转场动画中穿两个场景；这就是楼主上面所提到的meaningful transition动效设计思路的体现。近几年大家可以在dribbble上看到大量类似的动效作品，近年来非常流行。
国内的APP也有不少体现该设计的地方，比如格瓦拉电影中电影列表项至电影详情页的转场动画。
接下来在动态面板dymp_总容器的state1中，导入SC01所需的各个切图素材，摆好位置，如下图1.8：
图1.8：
附注：在右侧的style面板第一项“location+size”中，可以设置部件的位置坐标、旋转、透明度参数。这在做动画的时候需要参考。
————————————————————————————————————————————
【Step4】
将各个界面元素部件进行易管理的命名。在此省略这一步。
另外，楼主有个个人比较喜欢的实用小技巧：对于需要添加交互事件（case）的部件，建议都转换成动态面板，这样做的好处是相当于给部件打了个包，需要替换更新里面素材的时候可以随意自由更换而不影响添加在外面的事件，对于更新替换素材非常方面。而且还有一个好处是动态面板可以自由设置大小，可以做类似遮罩动画的效果。
在这里，分别将“AUDI S5….”的字符串、蓝色色块、蓝色奥迪车图片均转场成动态面板，分别命名为：“dymp_SC01_text”，“dymp_SC01_blue BG”, “dymp_SC01_image”。
准备工作基本完毕，接下来我们开始设置交互事件和动画。
首先分析一下第一段转场动画有哪些部分组成：（1）顶部的actionbar和底部的toolbar分别向上向下位移出画消失；（2）上半部的卡片向上移动淡出；（3）蓝色色块、蓝色奥迪车图片向上移动，蓝色色块同时缩小，图片同时放大，新的白色色块与文字同时淡入出现；下半区新的一段文字向上位移淡入；
分析清楚了有哪些动画，接下来就可以一个个进行制作了。
————————————————————————————————————————————
【Step5】
首先先给蓝色色块添加一个 “click”即点击的case，然后双击打开case editor，如图1.9：
图1.9：
之后开始编辑该交互事件引发的各个部件的actions。Axure的基本原理就是一个交互事件（case）引发部件的行为动作（actions）即部件的动画效果，从而形成一个完整的交互。
点击蓝色区块引发的各部件的actions如下：
（1）actionbar向上移动移出屏幕。在左侧栏里选择添加“move”，在右侧栏里选择actionbar部件，这样就制作了一个 【actionbar部件 因click事件 而引发的move动作】的交互效果。
actionbar的action参数设置如图1.10：
图1.10
附注1：在这里补充一下move by和move to的区别，前者是相对移动距离，比如X轴移动了20像素，后者是移动到一个固定位置，比如移动到坐标X轴20像素的位置上。
附注2：animate选项是设置动画速率曲线和动画时长，在这里选择ease out cubic，即一般的减速曲线。时长设置为500毫秒。
同上所述，toolbar和上半部卡片的消失动画参数设置见下图1.11：
图1.11
附注：除了move动作，上半部卡片还多了一个show/hide动作，这个动作可以实现fade（透明度淡入/淡出）的效果，还可以实现flip、slide等进场退场效果。在这里选择的是fade。动画时长和move一样为500毫秒，这样就实现了位移同时淡出的动画效果。
这样，我们就有了一个初步的交互效果：点击蓝色色块，actionbar以及上半部卡片card1，和toolbar分别向上和向下移动消失。
可以点击axure的右上角preview按钮预览效果。
————————————————————————————————————————————
【Step6】
制作完这几个消失退场的界面元素的动画之后，接下来我们制作蓝色卡片转场到一个全屏详情界面的动画。
分析动画可知，这部分动画由以下几个组成：（1）蓝色奥迪车图向上移动同时放大；（2）蓝色色块向左上移动+同时缩小；（3）蓝色色块文字同步向左上角移动；（4）白色色块及文字向右移动淡入进场；（5）底部的一段详情文字向上移动淡入进场。
接下来我们设置这几个部件的动画参数：
（1）蓝色奥迪车图动态面板“dymp_SC01_image” move to（0,0）, set size（540，322），500ms；
附注：设置蓝色奥迪车图的大小时要注意，不仅要设置作为遮罩外壳的动态面吧你的size，还要设置动态面板里的图片的大小，使画面充满动态面板。图片大小位置见右栏style标签下的参数。如下图1.13所示：
图1.13
（2）蓝色色块动态面板“dymp_SC01_blue BG” move to（0,322），set size（270，270），500ms
与上述的车图动态面板一样，这里的动态面板内，也要设置蓝色色块图的大小使之充满整个动态面板，如下图1.14：
图1.14
（3）蓝色色块文字“dymp_SC01_text” move to（54,387）；
（4）白色色块向右移动淡入进场，文字向上移动淡入进场。
白色色块“sc2 白色板”初始位置设置为（0，270）并set hidden即隐藏。动画参数为：位移 move to（270，322），500ms，即在500毫秒内移动了270像素，淡入动画参数show的方式设置为fade，500ms。
文字“sc2 白板块 字符串”设置初始位置（323，500）并set hidden；然后动画参数为：文字动画要相对其他部件动画延迟250ms进行动画，wait 250ms，位移move to（323，387），300ms；淡入动画参数show的方式设置为fade，300ms。见下图1.15：
图1.15
（5）底部详情文字“detail text” 设置初始位置（35,720），并set hidden隐藏。然后详情文字部件动画参数为：相对白色色块文字再延迟250ms做动画，move to(35,650)，500ms，淡入动画参数show的方式设置为fade，500ms。见下图1.16：
图1.16
OK，现在我们基本有了一个第一段动画转场的初步样子。各个部件的动画时长节奏，大家可以按照自己喜欢的节奏来进行微调~
通过上述的讲解，接不能上我们已经对用Axure做一段相对复杂的转场动画的方法有了一个初步的了解。接下来我们制作第二段转场动画。
————————————————————————————————————————————
【Step7】
第二段动画是由点击上面的图片引发的转场。分析可知，第二段动画由以下几部分组成：
（1）底部的详情文字先向下移动淡出；（2）白色色块与文字向下移动淡出；（3）蓝色色块与文字向下移动淡出。（4）上面大图蓝色奥迪车向下移动；（5）新的标题与一组小缩略图进场；
以上几部分动画是有先后顺序依次按序发生的。
分析完动画组成，接下来进行参数设置：
同样先给被点击的图片“dymp_SC01_image”添加“OnClick”的case。之后进入case editor进行编辑：
（1）底部详情文字动画参数——move to（35，770）500ms（即移动了相对距离120px，其他几个部件消失的相对移动距离均一样），hide方式设置为fade，500ms；
（2）设置延迟wait 100ms，白色色块动画参数——move to（270,442），show用fade500ms；文字动画参数——move to（323,507），show用fade500ms；
（3）再设置延迟wait100ms，蓝色色块动画参数—— move to（0，442），show用fade500ms；文字动画参数——move to（54,507），show用fade500ms；
（4）再设置延迟wait200ms，蓝色奥迪车大图动画参数——move to（0，278），700ms；
（5）再设置延迟wait500ms，一组缩略图从下往上移动进场——导入四组缩略图的时候，从small image1-4，设置初始位置依次为（30，910），（178，910），（325，910），（473，910），统一设置为hidden隐藏。这里设置平均排列的时候，可以使用axure的Distribute功能如下图1.17：
图1.17
然后设置动画参数均为——move by（0，-160），500ms，show用fade500ms；
这里用了相对移动距离，每张缩略图均在Y轴方向移动160px。缩略图1-4，依次间隔设置wait 60ms，即每张缩略图之间间隔延迟100ms移动。
（6）这里新标题“sc3 title”的进场不需要再设置延迟。新标题从上往下移动淡入进场，动画参数move by（0，160）500ms，show用fade500ms；
综上参数设置如下图1.18：
图1.18
————————————————————————————————————————————
【Step8】这里，两段动画就都设置完了。
不过，还有一个很重要的问题：这里的两段转场动画是依次进行的，先有第一段才会有第二段。而现在我们所制作的这个原型，因为这里有两个部件都设置了OnClick点击交互事件，所以可能出现这样的情况：我不是先点击蓝色方块“dymp_SC01_blue BG”，而是偏偏先去点击蓝色奥迪大图“dymp_SC01_image”，这样就导致先引发第二段动画，这样整个原型的交互动画就乱了。
所以这里我们要给第二段转场动画增加一个引发的条件。这里要用到Axure的Variables(变量)和Condition
(条件)。
Axure提供的变量和条件函数还是比较强大的。
（1）首先新建一个全局变量：Project——>Global Variables，打开全局变量设置窗口。如下图1.20：
图1.20
点击“+”图标新建一个全局变量命名为“sc2” ，设置默认值为0，如下图1.21：
图1.21
（2）这个变量是用来判断状态的，变量为X值的时候，点击图片无反应，只有当变量值为Y的时候，点击图片才引发转场动画。那么在这里，我们需要定义只有当蓝色色块被点击引发第一段转场之后，点击图片才会引发第二段转场。
所以，我们在这里需要给蓝色色块的OnClick点击事件引发的动作中，再最后添加一个“Set Variable Value”即定义变量值的action，在右侧选择刚才新建的变量sc2，定义value为1，如下图1.22所示：
图1.22
这样，当我们点击蓝色色块之后，除了引发第一段转场动画之外，还将变量sc2赋予新的值“1”。
（3）接下来我们给蓝色奥迪图的OnClick点击事件添加一个条件。打开case editor后，点击edit condition打开编辑条件窗口，在编辑条件窗口里，点击最左侧的下拉选择框，选择“value of variable”（变量值），如图1.23所示：
附注：在Axure的条件编辑逻辑中用的是If和Else if语句，对逻辑语句有基本了解的同学应该都知道if语句的含义和用法，在这里就不赘述了哈~
图1.23
（4）点击第二个下拉框选择刚才新建的变量sc2，第三个下拉框和第四个下拉框均使用默认设置，然后设置变量值为1。这样，我们就完成了这个条件语句，含义是：If 变量“sc2” 的值 = 1，即“当变量sc2的值等于1的时候”，就引发下面的一系列action动作，即引发第二段转场。如下图1.24、图1.25所示：
图1.24
图1.25
附注：Axure的函数与逻辑条件还是很丰富强大的，运用得熟了，可以实现很多高级效果，后面的系列教程楼主会一一和同学们分享~
这样，只有先点击蓝色色块引发第一段转场，变量值为1的时候，点击蓝色奥迪大图才会有反应引发第二段转场。如果我们先点击蓝色奥迪大图，那么此时的变量值是0，点击蓝色奥迪大图是不会有任何反应的。
OK，到此为止，我们就完成了这段交互动画了。
————————————————————————————————————————————
【Step9】
接下来是导出。
Axure的导出原型可以在大部分浏览器上打开查看。
点击Publish，选择Generate HTML Files，如下图1.26：
图1.26
在打开的导出设置窗口里，大部分都使用默认设置即可，其中General可以设置导出到哪个文件路径下，page项里可以选择导出哪个页面，如下图1.27和1.28所示：
图1.27
图1.28
导出后的文件结构如下图1.29所示，点击home.html文件，即会在浏览器里打开原型，可以进行操作。
图1.29
——————————————————————————————————————————————
【Step10】
那么如何导出到手机中查看呢？
Axure自带的Axure share这个APP虽然可以，但是链接网速非常非常慢，极不好用。楼主在这里推荐另一个方法。
可以先在PC中将刚才导出的一系列文件打成一个压缩包；然后下载一个名为“Air Disk Pro”的app，这是一个压缩工具app，将我们制作的原型压缩包通过airdrop或者itunes 导入到Air Disk Pro中，解压打开，同样是点击home文件打开，这样手机就可以查看使用我们制作的原型了。
OK，此次教程到这里就全部结束了哈，后续继续会更新更多的交互动画效果和大家交流~~
