AxureRP教程–拖动效果

拖动效果是通过拖动类似游标一样的按钮来改变状态显示或者小页面显示的功能,有点点类似进度条,不过拖动有状态改变。在AxureRP里做要动的效果一般都是用到动态面板组件的,不过这里是用游标的位置来控制动态面板状态切换。例子是别人做的,网上下的实例中提取出来的,用来说明拖动效果。

例子的原版有英文的实现原理说明,比较复杂,是通过监控鼠标移入事件来控制游标的移动,也监控游标移动的位置以控制改变动态面板的状态显示。上面的用于内容显示的动态面板的控制很简单,主要是在下面部分,在移动轴上分成了四个部分:trigger1, trigger2, trigger3, trigger4,每个trigger负责了一定的区域,这个就是用来触发内容切换的。主要部分就是游标控制,控制拖动部分由很多个图片映射组件组合而成,每个图片映射组件控制的区域和移动的距离不一样,就会造成鼠标放上去之后跟随鼠标移动的效果。

?

两个示例,右边的是用来作拆解演示的,从这里可以比较清晰的看出整个效果的控制实现。这个例子看源文件基本上能看明白实现的原理,但却看不出设计思路来,虽然知道实现了拖动的功能,但不知道设计思路,让人很难真正明白。这里提供这个例子供大家参考。

例子给人感觉很复杂,但也证明用AxureRP来设计原型的牛人还是存在的,能琢磨的比较透,设计出来的原型能被别人一看就明白的不算什么,设计出来的原型别人看了源文件都还不能完全明白的,就厉害了,呵呵。源文件见本站AxureRP资源下载中的《部分AxureRP设计技巧实例》。

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

《原型设计》微电子杂志? 点此订阅

点此查看演示

点此下载源文件



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

“AxureRP教程–拖动效果”2 条评论

Ratt | 2013-02-5 19:36 |

很有参考价值,多谢了

Demo | 2013-03-26 23:19 |
commenter

请问控制游标范围的动作具体怎么写