Axure 实现刮刮乐效果

本文由微信公众号：产品锦李（ID：IMPM996） 授权发布，未经许可，禁止转载

话不多说，先看效果。

界面上有个圆圈，等同于手指，在涂刮区域移动的时候什么也不会发生，当按下这个圆圈，就如同手指按下开始涂刮，移动的时候，手指划过的区域会被刮掉。

这个效果的界面组成如下。

其中【涂刮区域】是由一个个小矩形拼凑起来的，把每个矩形之间的间距拉开一点就可以很清楚地看到每个矩形。

交互的思路就是当作为【手指】的圆圈接触到【涂刮区域】中的矩形后，将对应的矩形隐藏，这里的矩形尺寸越细，涂抹的效果就越逼真。

但如果你真按这个思路做下去，你会开始怀疑人生。

首先这里的【涂刮区域】有超过400个矩形，你要把这个界面画出来就需要不少时间；另外，画好界面后，写交互的时候，需要每个矩形都判断是否与【手指区域】接触到，并进行隐藏，光是这个交互就能把人写废。

所以这里，我要分享通过【中继器】让这个效果实现起来更加简单的方法。

画界面

首先来看一下需要用到的元件以及它们的命名。

注意：

• 背板区域和涂刮点设置一个自己喜欢的颜色就好
• 涂刮点添加元件选中时的样式，将透明度设为0

配置中继器

首先需要往中继器中添加数据，每条数据代表一个矩形涂刮点，我这里添加了499个。

一条一条添加太花时间？我这里有个快捷的方式分享给你。

到 Excel 表格中拖出需要的数据数量，然后复制粘贴到中继器中就可以了。

中继器默认是垂直排列，每行一条数据，显然不符合要求，所以需要在中继器-样式-布局板块中调整一下中继器布局。

调整后的效果如下。

然后把中继器挪到【背板区域】和【中奖文字】正上方。

写交互

首先是当鼠标在页面上移动的时候，【手指区域】跟随鼠标移动。

注意：

• 这里跟随鼠标移动的是【动态面板】中的【圆形】，不是动态面板
• x 值、y 值分别减去【圆形】宽度和高度的1/2是为了确保移动时，圆形的中心正对着鼠标指针

接着给【手指区域动态面板】添加【拖动】事件，拖动时，动态面板跟随拖动进行移动。

接下来进入到【中继器】中，选择中继器内的【涂刮点】矩形，并添加【载入时】的事件，这里判断如果当前的【涂刮点】接触到【手指区域】时，将当前涂刮点设置选中。

最后，跳出中继器，给【手指区域动态面板】添加【移动时】触发【涂刮点】【载入时】的事件。

这样，整个设计就做完了。

整体的逻辑是这样子的：

• 移动鼠标，【手指区域】跟随移动
• 按住【手指区域动态面板】时，动态面板跟随鼠标移动
• 【手指区域动态面板】移动时，触发【涂刮点】载入时的事件
• 每个【涂刮点】判断当前是否与【手指区域】有【接触】，如果有，当前就被【设置选中】
• 【涂刮点】被选中时，样式变为透明，底部的信息就显示出来，呈现出刮掉的效果

几个问题

看到这里，相信你也产生了不少疑问，这个设计虽然简单，但是有点迂回，接下来我整理了一些你可能产生疑问的地方，并说明为什么是这么处理的，希望能厘清你的疑惑。

Q：为什么涂刮点是通过设置选中改变透明度实现，而不是直接隐藏？

A：中继器中的元件如果隐藏，其他元素会进行位置的调整，于是便会变成如下图的效果；但如果只是通过选中来改变透明度，便不会改变元件的位置，才能实现所需要的效果。

Q：在页面上移动的时候，为什么是移动【手指区域】，而不是移动【手指区域动态面板】？

A：如果这里移动动态面板，就会触发动动态面板【移动时】的事件，当鼠标移动到【涂刮区域】的时候，就会刮掉【涂刮点】，无法实现按住时才进行涂刮的效果。

Q：为什么要把事件写的那么迂回，在中继器中写完之后，又跑到中继器外面通过【手指区域动态面板】的移动来调用。

A：首先我们要清楚，【涂刮区域】的【涂刮点】是通过中继器动态生成的，而实际上我们只画了一个矩形而已，如果在中继器外部直接写事件，我们来看看会怎样。

比如我们直接改成在【手指区域动态面板】移动时判断是否接触到涂刮点，如果是，就选中涂刮点。

可以看到，这样改了之后，当【手指区域】移动到某个点时，整个涂刮区域都消失了。

这是因为，在外部调用的时候，会把整个【涂刮区域】都当成一个整体，一旦触发事件，所有涂刮点都会执行。

而把事件写在中继器内部就不一样了，每个涂刮点都是独立的，移动的时候也只判断当前的涂刮点有没有与手指区域接触到，从而实现我们所需要的效果。

Q：上文说，涂刮点尺寸越细，效果越好，怎么不设置为1？

A：中继器比较消耗资源，尤其是数据量大的时候，设置的涂刮点尺寸越细，需要的数据越多，消耗的资源也多，容易造成卡顿。

好了，以上便是本文的全部内容，感谢阅读。