这个原型实现了你能想到的任何旋转木马互动，享受〜

　一、前期准备

APP侧的旋转效果适合于横幅的显示，在实战中有很多用途。首先，我们应该考虑一下，接口上的旋转木马风格应该是什么，不过两点，一个是横幅，第二个是旋转木马的点。在第一步中，我们应该在Axure中推出横幅和点样式。在这里，我设置了三个横幅的旋转样式。对于用于横幅和轮播的点，它涉及在不同状态之间切换。这里我们使用动态面板。动态面板可以有许多不同的状态。可以通过添加交互式用例来实现面板之间的切换。 。

对于横幅和旋转木马，我们创建了一个动态面板，并将其命名为“  banner”。和“dot””用于未来的运营。在横幅面板中创建了三个状态，名为“1”，“&”和“2”，每个状态都有一个要显示的横幅。

这里要注意两个细节：

三个州的横幅大小必须相同;

最好为三张图片添加浅色边框。原因是它很漂亮。第二是防止横幅背景和界面颜色重叠。这两者之间并没有很好的区别。这是我的边框颜色是F2F2F2。

类似地，dot也建立三个状态，名为“1”，“&”和“2”，每个状态对应一个不同的横幅，红点表示当前状态被选中，灰色点表示当前状态不是选择。

这里的红色我没有选择FF0000最红的颜色，而是选择了较弱的DD0000，颜色应该看起来更好，同样，灰点的颜色仍然是浅灰色的F2F2F2。

具体风格如下所示：

设置好货架后，我们必须考虑转盘之间的相互作用。我在实时网络中列举了常见的轮播交互：

循环滚动处于正常状态。

手指从左向右滑动的样式会发生变化。

手指点击点后样式发生变化（这种相互作用并不常见，因为点现在越来越小）。

这三点从简单到复杂，然后我们将依次实现这三个相互作用。

　　二、常规状态下的循环滚动

这种交互在当前网络的原型教学中很常见，但对于初学者来说，只知道他们不知道为什么，许多细节都没有被注意到，无法推断。具体步骤，我们可以先考虑APP端旋转木马的效果，页面加载后，横幅会开始旋转，所以我们在选择页面加载时添加一个交叉用例“rdquo;设置面板状态并分别设置点和横幅。对于横幅和点面板，请检查状态选择到“下一步”，然后在面板当前状态的下一个状态旁边。并检查以下反向循环，反向循环意味着：如果当前面板是最后一个状态，则接下来将跳转到面板的第一个状态。有些同学会误认为向后循环勾选了，面板就会一直轮播下去，其实不然。要想让面板轮播，还需勾选上“循环间隔”，这样才能保证面板的循环轮播。

下一步是优化细节。在通常的轮播中，横幅将具有从左到右的路径，并且点的交互式样式是红点逐渐变为灰色，并且灰点逐渐变为红色。因此横幅和点，横幅选择和“横幅选择”有不同的动画效果。向左滑动”，点选“ldquo;逐渐地“rdquo;完成后，单击“保存”。运行后，我们会发现当我们第一次进入页面时面板已经开始旋转。我们没有时间看到的第一个状态成为第二个状态。这时，我们应该在页面中加载。时间”添加等待一秒钟的交互，然后再次运行它，效果要好得多。

具体操作如上图所示。通过使用Axure实现APP的旋转来完成。

　三、手指往左往右滑动的样式改变

这是APP方面最常见的互动。这种交互要求来自这种情况。用户尚未看到先前横幅显示的具体细节。由于时间关系，用户更改为下一个横幅。用户想要返回以查看先前的横幅，因此手指的左侧和右侧之间的交互出现。

对于面板的左右滑动，Axure给出了“向左拖动”和“向右拖动”的交互情况，左侧相当于滑动到下一个横幅，相当于右边。滑动到上一个横幅，清除这个，我们可以添加交互，在“向左拖动”，选择设置面板状态，分别检查横幅和点，因为它是显示下一个横幅，在选择状态下，选择“下一步”&ndquo;并检查“向后循环”。在这里，由于它正在滑动到下一个横幅，因此无需检查“循环间隔”。向右滑动也是如此。唯一的区别是向右滑动是滑动到上一个横幅，因此选择状态并选择“上一个”。具体操作如下所示：

面板的动画与之前的轮播相同。横幅选择向左滑动/向右滑动，逐渐选择点选择。保存后，实现左右滑动手指的效果。

　四、手指点击dot之后的样式改变

这种需求的原因类似于手指滑动的原因。如果有很多横幅（超过五个），滑动手指找到横幅是非常低效的。单击点将直接转到指定的横幅。

具体方法是将交互案例添加到点面板中的不同状态。 Dot面板中有三种状态。每种风格对应不同的横幅。对于与第一个横幅相对应的点，我们将交互情况添加到点中的三个点。我们选择第二个点（表示我们要跳转到第二个横幅），在鼠标点击时添加交互案例，选择设置面板状态，分别检查横幅和点面板以增加交互，因为它是1跳到2，我们在选择状态时，选择“2”，然后分别设置横幅和点的动画，由于1跳到2是下一个横幅，横幅动画向左滑动​​。具体操作如下所示：

以同样的方式，我们设置了3次鼠标点击的交互效果。对于1状态，单击1本身，我们在此处给出了等待交互效果。设置状态1的交互，并根据提升机设置状态2和状态3的交互。

这里要注意的一个细节是2跳到1，是前一个横幅，动画效果选择向右滑动，2跳到3，是下一个横幅，动画效果选择向左滑动，动画状态3的效果与这种类型的推动相互作用。

完成此设置后，我们运行它并发现在点击点后，我们可以成功完成横幅切换，但是没有静态和无旋转。造成这种现象的原因是我们在动态面板中添加了操作，并且首页上没有横幅面板这样的东西，因此整体上将动态面板添加了交互式案例。这将导致主页不会更改，只是点动态面板内的更改，主页中的更改将在页面加载时触发我们的交互案例设置（对于轮播），并且动态面板中的内部更改将导致留下来的过程。动态面板，而忽略“页面加载”的交互案例设置，因此横幅不会被旋转。

想要让横幅继续旋转，我们的方法也很简单，在点面板内的交互中添加一个，继续旋转，如下面的蓝框所示（图片中的红框是上一步操作）。

单击完成并运行后，单击点后，您还可以实现轮播。这样，也实现了手指点击点的交互式。

资源共享：

Axshare：http://rjsu3g.axshare.com

网络磁盘链接:https://pan.baidu.com/s/1qYlzebU密码: uf4m

« 美图处理：互联网分析企业代购源码网站建设行业的现状，并将其交给仍然健康的中小企业 | 视觉连接：世界杯交通口号广告商如何获得最佳外观？ »