AxureRP教程–焦点应用

AxureRP在焦点应用上提供了两个交互事件OnFocus和OnLostFocus,一般在设计上应用的比较少,因为本身组件自带有设置选中,轮换样式的功能,有时候再选中的时候会产生特殊效果的时候才会用到,不过一般都只是显示不同颜色之类的,这里也只是介绍一下焦点的应用。

前面已经介绍过很多动态面板的应用例子,应该知道动态面板可以移动的功能特性了,这里就以控制动态面板移动为例子来讲解。上面的例子是常规的移动方式,即通过鼠标单击事件来控制动态面板的位移,这里还是要说一下,移动的方式有多种,都可以采用位移或者坐标定位的方式。一种是一步到位式的移动,即只调用一次移动动作,一种匀速移动的方式,即将距离做等分,然后隔相同的时间,一种是变换式移动,可快可慢,看设置而定。因此移动也是多种多样的,视应用而定,这里演示的先慢后快再慢的移动方式,位移量先少后多再少,等待时间都是一样的。

下半部分是用焦点来演示移动的过程,其实也只是应用到了OnFocus和OnLostFocus两个交互事件而已,让大家看看这两个事件可以做什么。例子的实现原理是通过输入一个数字,然后设置焦点在第一个选项上,这时判断计数器里面内容的长度与输入数字的大小,如果小于则将焦点移至下一个选项,这时在计数器的输入框里打印一个字符,使动态面板移动10个位移,并将焦点重新设置在第一个选项上。

这里需要注意的是set focus和set selected是不一样的,就是设置焦点和选中的区别,查看了演示之后大家也能看出来,单选按钮的选中状态一直都没有变更过,一直只是选中了第一个选项,设计这个示例也是为了可以好好的区分一下焦点和选中的区别,其实用单行文本框更能说明,焦点在单行文本框时是可以输入的,选中单行文本框并不能输入。

这个示例也可以用来演示打印字符效果,实际设计当中比较少应用到OnFocus和OnLostFocus事件,有更好的示例可以拿出来分享。

示例在AxureRP 5.5版本下调试通过

 

点此查看演示

点此下载源文件



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

评论已关闭!