AxureRP教程—模拟倒计时

前面在介绍单选框和复选框应用的时候演示的红绿灯效果里面有用到倒计时的效果,即在红灯和绿灯时候有倒计时提示红灯和绿灯的持续时间,当时没有详细介绍如何实现,这里就补充介绍一下倒计时效果的设计实现过程。

倒计时效果需要用动态面板来实现,基本上有需要移动、需要小页面切换显示,需要先隐藏后显示等效果的时候,都需要使用动态面板组件,因此动态面板是AxureRP里的一个很强大的组件,从AxureRP支持的交互事件里大部分都与动态面板相关就可以看出来。掌握动态面板的应用也就显得很重要,这部分掌握了,就算是AxureRP的高手阶段了。

这个例子是简单模仿电影的开场效果,当然倒计时效果的应用一般不是这个,在网页设计的时候,一般都用于加载或关闭时的时间提示,或页面退出页面跳转的时间提示,实现原理是一样的。这里就以5秒得电影开场倒计时效果来做演示,界面设计比较简单。

其实倒计时效果只是把每个动态面板的状态页设计成数字显示了,一个页面放一个数字,实现原理还是利用动态面板的状态切换事件来切换状态达到倒数的效果,一个控制功能来制动倒数的开始,这里使用OnPageLoad事件来使页面加载之后直接开始倒数。一般倒计时都是以秒为单位的,所以控制好等待时间为1000毫秒就可以了。

交互事件选择切换动态面板状态和等待事件,设置每过1000毫秒切换至下一个状态,在交互事件属性里的高级编辑器里可以设置交互事件的排序,这里注意显示状态的顺序就好了,使之达到倒数的效果。

高级编辑器和基本编辑器默认是可以切换的,但当高级编辑器内添加了两个相同的动作之后就无法再切换会基本编辑器了,也就是说在基本编辑器里面,每个动作只能使用一次,要多次使用的时候就必须在高级编辑器里才能实现。高级编辑器下需要在某个动作后插入新动作的话,需要先选中这个动作,然后再添加动作,否则默认动作会添加在所有事件的最下面,可以使用上下箭头来排序。

动态面板的状态切换能演示出很效果,主要看每个小状态页面里面设计的是什么内容,后面还会介绍到。

示例在AxureRP5.5版本下调试通过

点此查看演示

点此下载源文件



无觅相关文章插件,快速提升流量

评论已关闭!