最新消息:本站教程基于Axure RP 9.0.0.3723及更高版本,请在学习前确认软件版本是否符合要求,以免因为界面差异导致学习障碍!

带有进度条的图片轮播(中)

教程 小楼一夜听春语 724浏览

在《带有进度条的图片轮播(上)》中,我们一起完成了幻灯片功能模块图片的自动切换,以及点击左右箭头切换图片的交互。

这篇教程中,我们完成剩余的部分。

剩余的部分是左下方的页签,这些页签原本是白色,但在图片切换时,会以进度条的方式呈现为蓝色。

一、准备所需要的元件。

页签元件一共是12个没有边框的矩形。

其中6个白色,6个蓝色。

每个页签的宽度是30像素,高度是2像素。

白色页签的[不透明性]是“50%”。

温馨提示:上图中点中的是白色页签,蓝色是点中后软件自动呈现的颜色,与设置无关。

蓝色页签的尺寸与白色页签一致,只需要将颜色设置为蓝色,颜色代码为“4285F4”。

然后,将蓝色页签覆盖在白色页签之上,并命名为“页签1~6”。

最后,将所有蓝色页签元件隐藏。

二、添加交互事件。

我们需要分析一下呈现蓝色页签的规则。

蓝色页签1~6是顺序呈现,并且在新一轮切换开始之前已经变为蓝色的页签不会恢复为白色。

只有新一轮切换开始时,也就是动态面板的状态是第一个状态时,才会将所有蓝色页签恢复为白色。

所以,在动态面板状态切换时,如果是第一个状态就要让所有蓝色标签隐藏,再显示第一个蓝色标签;而其它状态只需显示对应的蓝色标签。

为动态面板添加[状态改变时]的交互,设置动作[隐藏]蓝色的[页签1]。

然后,多次点击[添加目标]分别[隐藏]蓝色[页签1~6]。

点击[添加动作]按钮,添加[显示]蓝色[页签1]的动作,动画设置为[向右滑动],时长为“4500”毫秒,也就是动态面板的图片切换间隔减去图片切换动画的时间差。并且,这里还要将[向右滑动]设置为匀速的[线性]动画。

完成第一个交互之后,我们[启用情形],情形名称是“第一个状态时”,[添加条件]判断是否第一个状态。

温馨提示:怎么启用情形以及添加条件可以参考《情形(条件)的设置,这是基础,要先牢固掌握。对于复杂的交互实现,巭孬嫑憅。

继续添加情形,名称是“第二个状态时”,[添加条件]判断是否第二个状态。

符合这个条件的情形时,执行动作[显示]蓝色[页签2],动画设置为[向右滑动],时长为“4500”毫秒,并将[向右滑动]设置为匀速的[线性]动画。

以此类推,再添加4个情形,分别判断动态面板其它4个状态,并显示对应的蓝色[页签3~6],同时带有动画效果。

温馨提示:第六个状态时的情形也可以不添加任何条件,因为不是前五种情形必然是第六个状态的情形。

最后一步,动态面板在页面打开时就是第一个状态,此时没有状态切换的动作,也就无法让第一个蓝色页签正常显示。

所以,我们需要在页面载入时,显示蓝色[页签1]。

这个交互可以添加到页签元件上,也可以添加到动态面板上,为了比较统一,我们这里将动作添加到动态面板上。

需要注意的是动画的时间是“5000”毫秒。

为什么?

因为页面打开时没有切换图片的动画,所以要把切换图片的“500”毫秒加在进度条动画上。

到这里,我们在浏览器中查看原型的话,已经有非常完美的效果了。

但是,教程到这里还没有结束,还有最后一部分内容在下一篇教程中讲解。

是什么内容呢?

尝试一下点击左右箭头切换图片,发现问题没有?

这个问题如何解决呢?

/教程源文件/

不习惯看文字教程?还有《Axure RP 9萌新修炼视频》奉上!

转载请注明:iaxure.com » 带有进度条的图片轮播(中)