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

系统变量的应用

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

这是一篇黄色的教程。

你都看到了,很黄是不是?

鼠标指针在页面上点击的时候,会出现黄色的...呃,就叫光波吧!

我们通过仔细观察鼠标指针点击页面的时候,可以分析出以下几点。

1、在所有页面元素的顶层,

2、以鼠标指针为中心的地方,

3、光波出现,

4、大波嗖的一下变成了小波,

5、眨眼间,

6、小波消失了,

7、下一次鼠标点击页面时,小波还会变成大波。

上面这几点就是鼠标指针点击页面时,我们要添加的交互内容。

先在画布中放一个圆形,取名为“光波”,边框线段和填充颜色都设置为黄色后隐藏。

然后,点击页面空白处,或者在概要面板中点击页面名称,打开页面的交互面板。

点击[新建交互]按钮,添加[页面单击时]的交互。

第一个交互是把光波置于顶层。

第二个交互是把光波移动到鼠标指针所在的位置。

碰到你的知识盲区了吧?

如何获取鼠标指针的位置,是解决问题的关键。

我们先添加移动“光波”的动作,将“光波”[移动][到达]指定的坐标位置。

以X轴坐标为例。

在坐标值的输入框的后方有[fx]按钮。

温馨提示:关于“fx”是什么,请参考《局部变量的应用》。

点击按钮之后,在编辑值的界面中,我们点击[插入变量或函数]按钮。

在出现的列表中,包含了大量的变量与函数。

我们拉动列表的滚动条,找到关于[鼠标指针]的部分,能够看到有“Cursor.x”和“Cursor.y”两个选项。

“Cursor”表示鼠标指针,“x”和“y”是鼠标指针坐标属性的系统变量。

为什么是变量呢?因为鼠标指针在不同位置时,“x”和“y”的值是不同的。

有了这两个系统变量,我们就可以获取到鼠标指针的位置,从而让“光波”移动过去。

但是注意,元件的位置坐标是指元件左上角那个点的位置。

如果想让鼠标指针与“光波”的圆形重合,我们在移动“光波”时,还要它分别向左和向上移动自身宽度的一半。

我们再次打开[插入变量或函数]列表,找到元件的部分。

在这里能够看到“Target”和“width”两个系统变量。

“Target”表示动作中的[目标]元件。

“width”则是某一元件的“宽度”属性。

了解了以上信息,我们就可以知道,如何计算“光波”移动的位置。

X轴是鼠标指针的X轴坐标值减去目标元件宽度的一半,公式为“[[Cursor.x-Target.width/2]]”。

Y轴是鼠标指针的Y轴坐标值减去目标元件宽度的一半,公式为“[[Cursor.y-Target.width/2]]”,只是改了一个字母而已。

第三个交互是把“光波”显示出来。

第四个交互是设置尺寸,将“光波”以中心点为基准,大波变为小波,变小时是匀速的线性动画,时间是“200”毫秒。

第五个交互是等待大波变小。

这一步是为了等待尺寸改变的动画结束,如果没有这一步,会直接执行下一步隐藏的动作,届时就看不到大波变小波的过程了。

第六个交互是隐藏“光波”。

第七个交互是为了下一次页面点击效果做准备,在看不见的时候,偷偷的把小波弄成大波。

这个过程不想被人看到,所以不用加入动画。

不要忘了,还要以中心点为基准放大,不然这个波...

/教程源文件/

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

转载请注明:iaxure.com » 系统变量的应用