在《带有进度条的图片轮播（上）》中，我们一起完成了幻灯片功能模块图片的自动切换，以及点击左右箭头切换图片的交互。
这篇教程中，我们完成剩余的部分。
剩余的部分是左下方的页签，这些页签原本是白色，但在图片切换时，会以进度条的方式呈现为蓝色。
一、准备所需要的元件。
页签元件一共是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 » 带有进度条的图片轮播（中）