如何使用遮罩

mugeda

在时间线上，我们先加入一个图片，如图：



然后新建一层，并点击在上面画一个图形，在时间线上点击“转为遮罩层”按钮，把这一层转为遮罩层，如图：点“转为遮罩层”按钮前



点“转为遮罩层”后：



会发现图层0中的图片只有和遮罩层的图形重合的部分被显示出来，其余部分都被遮掉了。

时间线上还有一个按钮是“切换遮罩”显示，点击后会切换遮罩显示状态和正常状态，点击后效果如下图，如果再次点击就会切换到前一张截图的效果。



时间线上还有另一个按钮：“添加到遮罩”。是用来把新的一层添加到遮罩效果里面的。当点了“转为遮罩层”后，默认只会把相邻的下一层添加到遮罩效果中，如果想把更多的层也加入遮罩效果，就使用这个“添加到遮罩”按钮。

我们在新建一个图层，并把它移动到“图层0”下面，并在上面画一个椭圆。如图；



可以看到新添加的“图层2”中的椭圆并没有被遮罩。然后我们点击“添加到遮罩”按钮，把这一图层加入遮罩，如图：



这一两个图层就都加入到遮罩中了。

在遮罩图层，还可以加入动画效果，比如我们加入关键帧动画：



在第1帧的关键帧把图形的位置向右边移动以便不再和另两个图层的物体重合，并把另两个图层的帧数补齐。这一在一开始这两个物体就是不显示的，随着遮罩层的关键帧动画运行，该图层中的矩形图形和另两个图层的物体逐渐重合，他们也就显示出来，起到逐渐显现的效果。

教程案例预览地址：

http://cn.mugeda.com/client/preview_css3.html?id=1c3bc4dc

教程案例编辑地址：

http://cn.mugeda.com/animation/edit/1c3bc4dc