Axure RP 8中图片轮播

首先,我们先来看一下要实现的案例效果。

上面这张图,我们基本上能看出来这个案例要实现的交互。

1、同一区域有四张广告图片进行不停的切换;

2、广告图片对应的底部圆点标签同步被选中。

按照以往大多的实现方式,是在一个动态面板的多个状态中放置不同的图片,开启动态面板的循环功能,并且在动态面板状态切换时,通过判断当前是哪一个状态,选中对应的圆点标签。

这种常用的方式有个小问题,就是圆点标签选中的切换是在图片切换的动画之后。

在这里,我们换一种方式。

我的思路是这样的:

1、让底部的圆点标签有唯一选中的效果;

2、每一个圆点标签选中时都做三个动作,设置动态面板状态为对应的状态、等待一定时长以及选中下一个圆点标签;

3、页面打开时,选中第一个圆点标签,这样就能开启幻灯片的轮流播放。

接下来,我们先准备好元件,并为元件命名。

然后,我们一起来看实现步骤。

1、先让圆点标签有唯一选中的效果。

我们需要做三件事,来完成这个需求,这里我们先完成其中的两件。

  • 全选圆点标签,为它们设置一样的【选中】时的交互样式;这一步是为了圆点标签变为选中状态时能够改变颜色。
  • 继续在上一步的功能界面中,为全部圆点标签【设置选项组名称】为“Tag”;这一步是为了让一组圆点标签中,只有一个能够变为选中状态。

2、我们给任意一个圆点标签添加交互,以第一个圆点标签“Tag1”为例。

在圆点标签被【选中时】,要将动态面板“SlidePanel”切换到对应的状态从而显示对应的广告图片。

这里大家注意,【设置面板状态】的动作设置中,我们要将目标元件“SlidePanel”的状态选择为【Value】,也就是值。

选择之后,在下方出现了新的设置“状态名称或序号”,也就是说我们可以通过动态面板状态的名称或序号,将动态面板切换到指定的状态。

这里我们要用的是序号。

动态面板状态的序号就是在概要面板中,各个状态由上至下排列的顺序号。

也就是当我们点击圆点标签“Tag1”的时候,要把动态面板切换到序号为“1”的状态;

点击圆点标签“Tag2”的时候,要把动态面板切换到序号为“2”的状态;以此类推。

那么,这个序号我们可以填写固定的数字。

不过,大家能够看到圆点标签名称的最后一位字符就是与序号相同的数字,如果我们取到这个数字,填在输入框中,也可以完成这个设置。

这个数字我们可以通过公式“[[This.name.slice(-1)]]”来获取。

公式中“This.name”可以获取到当前被选中的圆点标签的名称。

而“.slice(-1)”是字符串截取函数,它可以输入两个参数(截取的起始位置和终止位置),也可以输入一个参数(截取的起始位置);当只输入一个参数时,能够对字符串对象从起始位置截取到末尾;并且。这个函数的参数可以为负数,输入负数的话,是从末尾进行倒数的位置;这里的“-1”,表示倒数第1位字符。

所以,公式“[[This.name.slice(-1)]]”的意思是获取“当前元件的名称的最后一位”。

填入公式之后,我们再设置一下状态切换的动画,就完成了这个动作。

3、继续上一步,我们再添加一个【等待】的动作,以便等待“2000”毫秒后,选中下一个标签。

4、继续上一步,添加【选中】下一个圆点标签的动作,因为是在给第1个圆点标签“Tag1”添加交互,这里我们选中下一个圆点标签就是“Tag2”。

这一步,就是圆点标签唯一选中效果要做的第3件事,把圆点标签变为选中状态。

5、完成了上面的几步之后,我们把第1个圆点标签【选中时】的交互复制,粘贴给其它三个圆点标签。

粘贴之后,从第2个圆点标签开始,逐一修改最后一个选中圆点标签的动作,为选中当前圆点标签的下一个标签。

6、为第1个圆点标签的【载入时】添加交互,【选中】当前这个圆点标签。

这样,在页面打开后,第1个圆点标签会被选中,从而触发第1个圆点标签的【选中时】交互,通过运行交互中的动作,在完成动态面板的状态切换以及等待2秒钟的动作之后,又通过最后一个【选中】下一个圆点标签的动作触发了下一个圆点标签【选中时】的交互。

以此类推,形成了循环的效果。

以上就是整个案例的实现过程。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章