最后一部分内容，可能你会觉得蛋疼，没蛋的可以假装一下。
为什么这么说？因为无法做到十分完美。
当你完成《带有进度条的图片轮播（中）》之后，你会发现，点击左右箭头的时候，效果很诡异。
上图是我在第一个图片显示的时候点了两下右箭头的结果。
你能看到下面的进度条......
这是没有办法的事情，因为Axure的动画效果目前是没有办法打断的。
所以，接下来的解决方案是一种障眼法。
思路上来说是这样的。
1、当显示某个状态时，当前对应的蓝色页签显示出来，其它的蓝色页签（包括进度走到一半的）隐藏。
2、同时，让当前蓝色标签左侧的白色页签改变为蓝色，右侧的恢复白色。
思路看上去棒棒的，但是实际上会出问题。
因为你会发现，隐藏进度走到一半的蓝色标签失败了。
这是因为显示动作的动画还在进行之中，隐藏的动作只能排队，你想插她前面是不合法的。
为了避免这个冲突，我们通过改变元件层级来实现视觉上的效果。
也就是说，让蓝色页签继续加载进度，但是把它放到底层去，被动态面板遮盖住，视觉上就没有问题了。
所以，每个情形都要添加[置于顶层/底层]的动作。
以第二个情形为例，需要将第二个蓝色页签置于顶层，其它的都置于底层。
接下来，就是让白色页签改变颜色。
如果想让元件改变颜色，我们需要使用交互样式。
为前五个白色页签添加选中的交互样式，[填充颜色]设置为蓝色，[不透明]设置为“100”。
想一下，为什么是前五个白色页签呢？
因为无论切换到哪张图片，第六个页签都不需要完全变为蓝色。
而后，再为每个情形添加选中的动作。
以第三个情形为例，需要将第一个与第二个白色页签选中，其它的都取消选中。
为了方便操作，我们为白色页签命名为“白色页签1~6”。
最后，还有一个问题，就是点击向左按钮的话，因为上一个蓝色页签已经显示，不会再出现向右滑动的动画。
所以，我们需要再为每个情形添加隐藏的动作，隐藏当前情形所对应的蓝色标签。
温馨提示：第一个情形已经包含这个动作，无需再次添加。
这个动作，要放在显示蓝色标签的动作之前。
以第四个情形为例。
温馨提示：新添加的动作会在下方出现，用鼠标指针点住新添加的动作，拖动到上方即可。
最后，点击每个白色页签都能切换动态面板到对应的状态，呈现对应的图片。
不要忘记，还要让幻灯片再次循环。
以第一个白色页签为例。
到这里，我们就完成了教程的全部内容。
不过，这个原型与原网站上的幻灯片还是存在差距。
例如，点击右键头切换几次，马上点击左箭头切换的话，就会出现上一次进度条还没加载完成的问题。
这是没有办法解决的问题，因为原型与写代码不同，没办法去控制正在执行的动画。
但是，不要忘了，原型的根本还是清楚的表达需求。
我们目前所完成的原型，完全能够满足表达需求的需要。
所以，在很多时候，我们不需要去苛求原型的交互一定要天衣无缝，有缝可钻未必不是一件快乐的事。
其实，我们教程一开始的这张图，如果让开发人员看到的话，已经能够清楚地表达需求。
那我们为什么还要学习怎么给原型添加交互呢？
因为，在面对某一些目标用户，可能无法通过看一张静态图片来理解产品意图。
这时，我们就要通过给原型添加交互，来满足这样的用户。
所以说，不要一味的非要把原型做到某种程度，面对沟通目标的需求去灵活应用，才是最正确的！
另外，从学习上来时，可能有些知识永远用不到，但是不一定什么时候又需要用到，所以，储备这些能力很重要，不要叔到用时方恨少。
不习惯看文字教程？还有《Axure RP 9萌新修炼视频》奉上！
转载请注明：iaxure.com » 带有进度条的图片轮播（下）