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

2023-02-01 345

版权

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

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

在这里插入图片描述

一、图形动画

（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导出看一下效果：（两个都在动）

请添加图片描述

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

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

:question:两个动画什么时候用？

①影片剪辑

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

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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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）效果

现在我们看一下效果：

请添加图片描述

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

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

一、图形动画

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

（2）播放一次

（3）单帧效果

二、按钮动画

（1）画一个圆角矩形

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

（3）功能介绍

1）指向

2）按下

3）点击

（4）效果

热门文章

最新文章

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

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

一、图形动画

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

（2）播放一次

（3）单帧效果

二、按钮动画

（1）画一个圆角矩形

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

（3）功能介绍

1）指向

2）按下

3）点击

（4）效果

热门文章

最新文章

相关电子书

相关实验场景