当前位置：网站首页>An动画基础之元件的图形动画与按钮动画

An动画基础之元件的图形动画与按钮动画

2022-08-03 12:29:00 【雨翼轻尘】

在这里插入图片描述

文章目录

一、图形动画

（1）图形动画与影片剪辑动画区别

我们打开上次做的毛毛虫动画。

新建一个图层。

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

然后复制一个毛毛虫至此。

Ctrl+C复制第一个图层的毛毛虫，然后Ctrl+V粘贴进来即可。

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

将右边复制出来的毛毛虫，转化为“图形”。

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

当“影片剪辑”变成“图形”之后，是播放不了的。（Ctrl+Enter查看）

如下：（左边是影片剪辑，右边是图形）

请添加图片描述

然后我们在40帧的位置，上下全选，然后F5创建帧。

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

再次Ctrl+Enter导出看一下效果：（两个都在动）

请添加图片描述

在内部，我们拖动这个条，只有“图形动画”在动。
请添加图片描述

“图片动画”有利于在内部进行调整，“影片剪辑”需要每次导出，观察之后再进行调整。

两个动画什么时候用？

①影片剪辑

需要一个滤镜效果的时候。

比如，我们添加一个模糊。

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

导出之后，它就是模糊的。

请添加图片描述

②图形动画

图形动画的优势在于循环。（可以控制播放次数）

有这几种：“循环”、“循环一次”、“循环单帧”、“倒放”、“反向”。

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

（2）播放一次

比如，“播放一次”。

我们双击进入图形动画内部，看一下里面有多少帧。

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

一共有30帧，那么“播放一次”就是从第1帧到30帧停止。

将帧数增加一点（增加到50帧），方便查看。

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

看一下效果：

请添加图片描述

可以看到，“图形动画”运行30帧之后停止运动，然后执行完全部的50帧。再重新开始循环。

（3）单帧效果

我们在40帧的位置，插入一个关键帧。

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

将循环选项为“单帧”。

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

这里举个例子，将第1帧选在20帧。

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

看一下效果：

请添加图片描述

在第20帧的时候，图形动画会停止运动。不管前面播放到哪一帧，停止的位置只会在第20帧。

二、按钮动画

（1）画一个圆角矩形

用【矩形工具】画一个矩形，将圆角改为80。

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

（2）元件类型转化为按钮

可以将颜色改为绿色。然后将它F8转化为元件，类型选择“按钮”。

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

双击进入按钮内部，左上角是按钮图标。

请添加图片描述

（3）功能介绍

下方有部分功能。分别是“弹起”、“指向”、“按下”、“点击”。

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

1）指向

点击“指向”，按下F6转化关键帧。

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

将颜色改为蓝色。

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

2）按下

点击“按下”，同样F6创建关键帧。

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

颜色改为红色。

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

3）点击

“点击”的话，速度有点快，快的看不见效果，暂时咱们不动它，后边有机会再说。

（4）效果

现在我们看一下效果：

请添加图片描述

原创不易，多多支持~
在这里插入图片描述

原网站

版权声明
本文为[雨翼轻尘]所创，转载请带上原文链接，感谢
https://blog.csdn.net/m0_55746113/article/details/126092686

边栏推荐

猜你喜欢

随机推荐