An动画优化之遮罩层动画

2023-02-01 278

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： An动画优化之遮罩层动画

在这里插入图片描述

一、介绍

遮罩层动画：不要的地方遮住，把想看的地方提出来。

导入一张图片。

并不能很好的贴合边框。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MefwCy8A-1659423884342)(D:\Typora图片\image-20220802093901815.png)]$

将它F8转化为元件，类型为影片剪辑。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SPbwEnIf-1659423884344)(D:\Typora图片\image-20220802094003042.png)]$

我们新建一个图层。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-c3X8iMrt-1659423884348)(D:\Typora图片\image-20220802094019628.png)]$

然后画一个黑色的矩形，并调整大小刚好是舞台大小。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dSciXfhW-1659423884349)(D:\Typora图片\image-20220802094150029.png)]$

然后点击图层2，右键“添加遮罩层”。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mB0BZ2MC-1659423884349)(D:\Typora图片\image-20220802094311050.png)]$

看一下效果（将不需要的地方遮住了）。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BOnpWMrT-1659423884349)(D:\Typora图片\image-20220802094357225.png)]$

为什么不是遮住的地方看不见？
因为是把要看到的遮住，然后做成遮罩层后，遮住的地方会显现出来。

二、案例

接下来，咱们做一个小案例。

（1）解除锁定

先解除它们的锁定。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4M94ji29-1659423884350)(D:\Typora图片\image-20220802141738248.png)]$

双击进入小猫咪。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LAtB0ImA-1659423884350)(D:\Typora图片\image-20220802141808414.png)]$

（2）新建图层

然后我们新建一个图层2。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TElYE8gW-1659423884350)(D:\Typora图片\image-20220802142049063.png)]$

（3）画一个椭圆

用【椭圆工具】画一个椭圆。

放大图片，在最中心画。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xE7pQDFY-1659423884351)(D:\Typora图片\image-20220802142207564.png)]$

（4）创建关键帧

上下选中图层，按F6创建关键帧。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Zi4R5R86-1659423884352)(D:\Typora图片\image-20220802142358700.png)]$

然后在30帧的位置，将椭圆放大。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-co0ChDn5-1659423884353)(D:\Typora图片\image-20220802142652078.png)]$

（5）创建补间形状

对图层2，右键“创建补间形状”。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ztlArvmj-1659423884353)(D:\Typora图片\image-20220802142854983.png)]$

（6）设为遮罩层

右键，将图层2设为遮罩层。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UlNu5vC0-1659423884354)(D:\Typora图片\image-20220802142956480.png)]$

（7）缓和帧

先解锁。（点击这个小锁即可）

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tnDyGZSW-1659423884354)(D:\Typora图片\image-20220802143328673.png)]$

将整体向后移动。（鼠标左键全部选中，按住不动拖拽）

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hLJuZ5Fm-1659423884354)(D:\Typora图片\image-20220802143433024.png)]$

点击这个点（第25帧），按Ctrl+C复制。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zgMcO6gW-1659423884354)(D:\Typora图片\image-20220802143228201.png)]$

然后在第1帧，按Ctrl+Shift+V原位复制。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rYVZLomP-1659423884355)(D:\Typora图片\image-20220802143356391.png)]$

图层1同理。（将第25帧复制到第1帧）

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-U0Pt42p2-1659423884355)(D:\Typora图片\image-20220802143502117.png)]$

后边添加帧直接按F5即可。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-P4Bw9B1E-1659423884356)(D:\Typora图片\image-20220802143616914.png)]$

（8）复制

将这一段选中（上下都有），按Alt键复制，拖拽到后边。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-B5ZZ2Zx1-1659423884356)(D:\Typora图片\image-20220802144023650.png)]$

然后将这一段，右键“翻转帧”。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BY6pHjrP-1659423884357)(D:\Typora图片\image-20220802144042400.png)]$

（9）锁定看效果

然后咱们点小锁锁定它们。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-afhx9E2m-1659423884357)(D:\Typora图片\image-20220802144316060.png)]$

然后Ctrl+Enter看一下效果：

请添加图片描述

（10）效果

回到场景1。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HRwrdH3Q-1659423884365)(D:\Typora图片\image-20220802144941032.png)]$

点击小锁锁上。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QU1AH0CY-1659423884367)(D:\Typora图片\image-20220802145019845.png)]$

然后看一下最终效果。

请添加图片描述
今天的分享就到这啦，拜拜~
在这里插入图片描述

An动画优化之遮罩层动画

一、介绍

二、案例

（1）解除锁定

（2）新建图层

（3）画一个椭圆

（4）创建关键帧

（5）创建补间形状

（6）设为遮罩层

（7）缓和帧

（8）复制

（9）锁定看效果

（10）效果

热门文章

最新文章

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

An动画优化之遮罩层动画

一、介绍

二、案例

（1）解除锁定

（2）新建图层

（3）画一个椭圆

（4）创建关键帧

（5）创建补间形状

（6）设为遮罩层

（7）缓和帧

（8）复制

（9）锁定看效果

（10）效果

热门文章

最新文章

相关电子书