如何做微信轻应用中的擦一擦 —— 下篇

chenyuquan

昨天大家是否都了解了画笔的基本用法呢？如果要再次查看，可以回复“cyc”。​


​

要非常注意的一点是：目前画笔功能一旦画框确定了就无法改变它的大小，如果你已经拉好画框，再调整高度和宽度，会引起整个画笔工具的重置。所以你需要先将素材剪裁好合适的尺寸。例如，你要做微信中手机整屏幕的擦一擦效果，建议图片尺寸等于舞台尺寸（640*1008），适应iPhone6可尝试640*1010。​


​

上篇说到擦子的用法，今天继续介绍做出擦一擦效果的其他两个重要的属性。第一就是画笔的填充颜色。不同于背景颜色，画笔的填充颜色将覆盖所有原本在画框里有的涂鸦线条，所以选择时请谨慎。​


​

无填充颜色前：​

​


​

选择填充颜色后：​

​


​

当选择了填充颜色后，就像在画框的上层增添了一层蒙板，这时候启用擦子，就能擦掉填充颜色，露出画框中原有的图案了。如下图，擦子经过的地方露出了背景颜色（但是之前的涂鸦是没有的了）。​

​


​

第二个重要的属性就是为它设置一个事件了，当你需要擦出一部车来，一个美女来，那需要擦除一定面积后，躲在这个蒙层后面的车或美女图片（默认这个图片已经上传至舞台了）显示出来。​


​

首先设置画笔工具的属性，你可以选择一个填充颜色作为蒙层，透明度可以自由调节来搭配你的需要。我们这里调节为90%，所以可以看到一点后面的图像。注意背景颜色为“无背景颜色”，否则你擦出来还是你的背景颜色。​

​


​

在对象树面板上，画图下面增添事件，这里我们使用的是擦除面积事件，大小调整为65%（根据你自己需要），目标对象为你的画图工具，目标对象为隐藏。这样的定义意思是，当用户在擦除这个蒙层面积65%的时候，画图工具就隐藏了，那在画图工具后面的图片自然就显露了。​

​


​

点击预览查看效果：​

​


​

你当然还可以增加更多的事件，比如出现的不仅仅是一个图片，而是一个动画，那可以增添目标对象为某个动画，目标动作为“播放”的事件。这里所有的交互逻辑的本质即为擦除面积到达一部分之后，可引发一个动作。具体的可在教学实验室里查看1001案例视频。​


​


​

点击阅读原文，可以查看擦一擦的小游戏，看看你能擦除多少冰川呢？​