-模块二基础动画-1728200039452.pptx

→模块二：基础动画遮照动画《前端互动设计》课程讲授人：彭珂珂

遮罩动画需要两个条件才能完成。第一个条件是需要两个图层才能完成动画。第二个条件上层为遮罩层它是显示区域、下层为被遮罩层是显示的内容。

以这个案例为例，这个黑色为上层，黄色为下层，那么依照这个定义来说，黑色在上层为遮罩层它就是显示区域，下面这层是黄色它是被遮罩层它就是显示内容。可以把这个黑色当成是镂空的地方，可以理解为一张纸被减去了五个黑洞。黄色是底下是露出来的颜色。用黄色做了一个变形动画，它经过第一个孔的时候就露出来，运动到灰色的地方是不会露出来的，然后经过第二个孔露出来了，透过黑色的孔能够看到黄色的，这就是一个这样的遮罩动画，黄色经过黑色地方才会出现，没有经过黑色地方将是隐藏起来的，看下效果。

这个案例理解后，可根据这个原理新做一个案例。1.新建一张纸，贴一张纸，然后点开图库，找到目标图形。如果你们没有案例图形，则先把图形导入图库。这里一个额外的知识点：如果用图片的方式导入进来的话，是不能加选的，图片的方式导入进来，只能一张一张的点图片进来，是按CTRL键是没有用的。如果需要很多张图片一起导入到舞台当中来的时候，我们必须要点开素材库，这个时候按住一个按住CTRL图片，按第二个添加两个图形都到舞台中了。

2.选中图形，按住Q键缩小到合理的位置就行，先把红色地方挪出来，然后按CTRL+X剪切掉。3.新建图层2，形成两个图层。一个作为被遮照层，一个作为被logo层。在图层2的空白关键帧的地方，按住ctrl+shift+v把剪切的图形复制到同等位置。并重新命名两图层以便于操作。

4.制作遮照层。先把轮廓线图层的眼睛关掉。在logo层上面新建图层3，在图层3上面画一个能遮住logo的形状作为遮照层。用框选工具沿着这个logo稍微画大一点点，一定要把logo能够覆盖住，在属性面板里换个深红色，因为整个logo为深红色。

制作遮照层动画。用节点工具调整红色遮照层，使其形成波浪线做了一个运动。

比方说，现在这个红色区域遮到了黑色的部分，那么显现出区域就是“华信实业”这几个黑色的字，以此往上也是同理。红色的波浪在上面这一层，可以把它理解为显示的区域。就是这一块空的区域，出现在哪，哪个地方的图形就能够显现。

6.形成遮照。选中红色波浪层，找到下面这三个按钮，第一个按钮作为转为遮罩层，点击它，它这里就会形成一个承接关系，代表遮罩层做好，我可以预览一下。

同理,想反对换操作一样，理解原理自己操作即可

谢谢观看！主讲人：彭珂珂