【Axure教程之高级交互原型1——简单开胃菜】：banner多图自动轮播
此篇是笔者的axure高级技巧实例教程的第二系列的开胃菜，相对简单，算是一个入门吧：一个banner自动轮播图片并循环的交互原型。
地址：https://pan.baidu.com/s/1bqmWaE7】
【摘要·简介】
此篇教程是笔者的axure高级技巧实例教程的第二系列的开篇开胃菜，相对简单，算是一个入门吧～效果也比较简单，就是一个banner自动轮播图片并循环的交互原型，手动加以拨动则停止循环。此案例涉及的技术点：
（1）动态面板的自动切换状态循环；
（2）停止和开始动态面板自动切换状态的循环；
（3）OnMouseEnter和OnMouseOut动作
我们先来看一下完成后的效果：
清晰版视频与教程中所用的素材，以及Axure工程源文件都在附件中提供下载。
【前面先啰嗦一下】
到目前为止，我们已经陆陆续续练习只做了5个实例教程，相信大家已经对AXURE制作复杂的material design交互转场动画的方法技巧有所心得了，所谓举一反三，这五个教程所涉及到的技术要点，如果大家精通并灵活运用，可以制作出千千万万种不同的复杂的交互转场，让交互设计师的高保真原型更加精彩逼真。接下来，用Axure制作转场动画的教程系列将会告一段落，接下来会和大家分享另一个系列的Axure教程：如何用Axure实现各种复杂逻辑的交互原型。重点不再是交互转场，而是重点深入讲解逻辑、条件、表达式、中继器等技术点。
这篇教程笔者的axure高级技巧实例教程的第二系列的开篇开胃菜，相对简单，算是一个入门吧～效果也比较简单，就是一个banner自动轮播图片并循环的交互原型，手动加以拨动则停止循环。此案例涉及的技术点：
（1）动态面板的自动切换状态循环；
（2）停止和开始动态面板自动切换状态的循环；
（3）OnMouseEnter和OnMouseOut动作
接下来是正文开始~~
————————————————————分割线—————————————————————
【Step1】
依然像上次教程提到的那样，第一步是用动态面板建立一个大小为750x1334的总的容器，命名为“dymp_总容器”。参数如图1中红线圈内所示：
图1：
—————————————————————————————————————————
【Step2】
接下来我们先来这个原型中涉及的动态与交互效果，主要有哪些组成部分。
第一部分：载入页面后，每隔若干秒，上面的banner区图片自动切换一张；
第二部分：鼠标或者手指拨动banner 区，banner停止自动切换并响应手指或者鼠标的动作进行手动切换。
第三部分，底部的长条状图片，在页面载入后自动缓慢移动。
然后让我们开始一个个去实现吧！
—————————————————————————————————————————
【Step3】制作并组合页面元素
在开始动手制作交互效果之前，首先需要完成页面的设计。
·1 双击刚创建的动态面板“dymp_总容器”，并进入state1，之后再创建一个动态面板拖入，大小为750x400，并命名为“Dymp_banner 轮播”，如下图2所示：
图2:
·2 双击此动态面板“Dymp_banner 轮播”，在弹出的state manager窗口中，连续点击“+”再添加5个state，如下图3所示：
图3:
·3 打开教程附件中的“所用到的素材”文件夹，分别将6张图片（名称为“banner 图片1”～“banner 图片6”）分别拖入6个state中，每张图片的location参数均为（0，0）。如下图4所示：
图4:
·4 从左侧部件库中拖动矩形、字符串等部件到页面上并进行编辑，再从素材文件夹中拖入四张正方形小图片，组合出其他页面元素，最终效果如下图5所示：
当然，这一步可以大家自己自由发挥～
图5:
·5 制作最底部的长条形动态图片banner
新建一个动态面板，命名为“Dymp_banner 底部动态图”，大小和位置参数如下图6所示：
图6:
然后再在这个“Dymp_banner 底部动态图”动态面板中拖入一张图片（素材文件夹中的“底部长条banner图.jpg”），位置参数如下图7所示：
图7:
·5 最后，我们再在“Dymp_banner 底部动态图”动态面板上添加两行文字。至此，页面设计制作完成。如下图8所示：
图8:
—————————————————————————————————————————
【Step4】设置页面加载时的banner开始自动轮播循环
·1 双击进入最外层的总容器动态面板“dymp_总容器”，进入后点击页面空白处，在右侧栏里选择“OnLoad”事件（event），如下图9所示：
图9:
·2 双击“OnLoad” 事件（event）打开case editor窗口，将case命名为“case1_banner轮播”，并添加一个Set Panel State的动作（action），选中动态面板“Dymp_banner 轮播”，设置select state为“Next”，如下图10所示：
图10：
next意即向后逐个切换动态面板的state。
·3 然后我们还需要设置其他的参数：（1）设置repeat every为3000ms，意即每隔3000毫秒重复一次next切换state的动作；（2）勾选wrap from last to first，即切换到最后一个state的时候，继续回到第一个state，开始继续向后切换state也就形成了一个循环；（3）设置animate in和animate out为slide left（向左移动）；这3个参数设置完后，最终效果看起来就是每隔3秒以向左移动的动画效果切换一张图片，并无限循环。参数如下图11所示：
图11：
如果觉得3秒切换一次太慢，大家可以按照自己感觉自由调整时长。
OK，最基本的效果已经制作完成，预览原型可以看到，打开页面，banner图片3秒一次自动切换；
接下来，我们要让用户能够控制停止循环播放和手动切换banner图片。
—————————————————————————————————————————
【Step5】设置手动控制banner图片轮播
· 1 选中动态面板“Dymp_banner 轮播”，双击“OnMouseEnter”为这个动作添加case，该事件含义为“鼠标移入”，如下图12所示：
图12：
在双击打开的case编辑窗口中，添加“Set Panel State”的action/动作，并在右侧选中动态面板“Dymp_banner 轮播”，下方设置选项为“Stop Repeating”，即当鼠标滑入时，停止动态面板的自动循环切换，如下图13所示：
图13：
· 2 当然，我们还要制作当鼠标移出banner时动态面板继续自动轮播图片。选择双击“OnMouseOut”为这个动作添加case，该事件含义为“鼠标移出”，然后我们可以直接将先前制作的“case1_banner轮播”直接拷贝过来，重命名为“case2_banner继续轮播”，如下图14所示：
图14：
· 3 接下来，我们再来制作用左右滑动切换动态面板图片的交互。之前我们在Axure动画教程系列《【原创Axure教程2】用Axure做复杂有趣的交互动效——实例2:滑动切换中图片视差移动效果》中，有讲到过“OnSwipeRight”和“OnSwipeLeft”用来控制左右切换的交互，在这里略微更简单一些。我们就当做一次简单的小复习哈~
（1）选择动态面板“Dymp_banner 轮播”，双击“OnSwipeLeft”在弹出的case编辑窗口中，重命名case为“Case3_向前切换”，添加“Set Panel State”的action/动作，并在右侧选中动态面板“Dymp_banner 轮播”，参数设置如下图15所示：
图15：
（2）然后再双击“OnSwipeRight”在弹出的case编辑窗口中，重命名case为“Case4_向后切换”，添加“Set Panel State”的action/动作，并在右侧选中动态面板“Dymp_banner 轮播”，参数设置如下图16所示：
图16：
OK，Axure高级交互原型系列教程的第一篇简单开胃菜，已经制作完成，接下来，我将会和大家进一步分享其他相对高阶的Axure复杂交互原型制作的经验～
