Axure RP 8中图片轮播新的实现方式

AxureRP8.0教程 小楼一夜听春语 3869℃ 0评论

在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秒钟的动作之后,又通过最后一个【选中】下一个圆点标签的动作触发了下一个圆点标签【选中时】的交互。

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

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

感谢大家对Axure原创教程网的支持!

源文件下载:http://downloads.iaxure.com/new_slide.rp

最后,邀请大家关注微信订阅号“iaxure”(二维码在本站首页右上方),及时获取本站最新动态内容。

推荐阅读:

Axure原型中文件的在线存储

 

 


~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师再出新作,倾力打造Axure RP 8精品课程系列,以最短的时间高效完成学习目标,入门进阶与实战案例并重,是0基础的新手从入门到精通的必备课程。

《AxureRP 8 入门与实战 - 入门篇》------从零入门进阶的最佳课程------【点此查看详情】

《AxureRP 8 入门与实战 - 案例篇》------实战手册图书的同步视频------【点此查看详情】


转载请注明:Axure原创教程网 » Axure RP 8中图片轮播新的实现方式

喜欢 (22)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(2)个小伙伴在吐槽
  1. 使用这种方式做轮播图 怎么同时做从选中点开始循环
    laura.luo2017-06-26 11:31 回复
  2. 我试图给每个tag加上点击该tag就从这个tag开始的交互动作,但是事实情况是 原本轮播顺序是1-2-3-4-1-2-3-,如果在3的时候点击1,就成了1-2-3-1-4-2-1-3-2-4-3...,两个逻辑混起来了 我个人感觉应该给转到下一个的tag加上限定条件,仅当其他tag没有被选中的时候,但是事实上好像也不能解决这个问题...
    Oranizor2017-09-10 16:02 回复