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

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

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

最后一部分内容,可能你会觉得蛋疼,没蛋的可以假装一下。

为什么这么说?因为无法做到十分完美。

当你完成《带有进度条的图片轮播(中)》之后,你会发现,点击左右箭头的时候,效果很诡异。

上图是我在第一个图片显示的时候点了两下右箭头的结果。

你能看到下面的进度条......

这是没有办法的事情,因为Axure的动画效果目前是没有办法打断的。

所以,接下来的解决方案是一种障眼法。

思路上来说是这样的。

1、当显示某个状态时,当前对应的蓝色页签显示出来,其它的蓝色页签(包括进度走到一半的)隐藏。

2、同时,让当前蓝色标签左侧的白色页签改变为蓝色,右侧的恢复白色。

思路看上去棒棒的,但是实际上会出问题。

因为你会发现,隐藏进度走到一半的蓝色标签失败了。

这是因为显示动作的动画还在进行之中,隐藏的动作只能排队,你想插她前面是不合法的。

为了避免这个冲突,我们通过改变元件层级来实现视觉上的效果。

也就是说,让蓝色页签继续加载进度,但是把它放到底层去,被动态面板遮盖住,视觉上就没有问题了。

所以,每个情形都要添加[置于顶层/底层]的动作。

以第二个情形为例,需要将第二个蓝色页签置于顶层,其它的都置于底层。

接下来,就是让白色页签改变颜色。

如果想让元件改变颜色,我们需要使用交互样式。

为前五个白色页签添加选中的交互样式,[填充颜色]设置为蓝色,[不透明]设置为“100”。

想一下,为什么是前五个白色页签呢?

因为无论切换到哪张图片,第六个页签都不需要完全变为蓝色。

而后,再为每个情形添加选中的动作。

以第三个情形为例,需要将第一个与第二个白色页签选中,其它的都取消选中。

为了方便操作,我们为白色页签命名为“白色页签1~6”。

最后,还有一个问题,就是点击向左按钮的话,因为上一个蓝色页签已经显示,不会再出现向右滑动的动画。

所以,我们需要再为每个情形添加隐藏的动作,隐藏当前情形所对应的蓝色标签。

温馨提示:第一个情形已经包含这个动作,无需再次添加。

这个动作,要放在显示蓝色标签的动作之前。

以第四个情形为例。

温馨提示:新添加的动作会在下方出现,用鼠标指针点住新添加的动作,拖动到上方即可。

最后,点击每个白色页签都能切换动态面板到对应的状态,呈现对应的图片。

不要忘记,还要让幻灯片再次循环。

以第一个白色页签为例。

到这里,我们就完成了教程的全部内容。

不过,这个原型与原网站上的幻灯片还是存在差距。

例如,点击右键头切换几次,马上点击左箭头切换的话,就会出现上一次进度条还没加载完成的问题。

这是没有办法解决的问题,因为原型与写代码不同,没办法去控制正在执行的动画。

但是,不要忘了,原型的根本还是清楚的表达需求。

我们目前所完成的原型,完全能够满足表达需求的需要。

所以,在很多时候,我们不需要去苛求原型的交互一定要天衣无缝,有缝可钻未必不是一件快乐的事。

其实,我们教程一开始的这张图,如果让开发人员看到的话,已经能够清楚地表达需求。

那我们为什么还要学习怎么给原型添加交互呢?

因为,在面对某一些目标用户,可能无法通过看一张静态图片来理解产品意图。

这时,我们就要通过给原型添加交互,来满足这样的用户。

所以说,不要一味的非要把原型做到某种程度,面对沟通目标的需求去灵活应用,才是最正确的!

另外,从学习上来时,可能有些知识永远用不到,但是不一定什么时候又需要用到,所以,储备这些能力很重要,不要叔到用时方恨少。

/教程源文件/

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

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