这是一篇黄色的教程。
你都看到了，很黄是不是？
鼠标指针在页面上点击的时候，会出现黄色的...呃，就叫光波吧！
我们通过仔细观察鼠标指针点击页面的时候,可以分析出以下几点。
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 » 系统变量的应用