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

文章目录

  • 一、图形动画
    • (1)图形动画与影片剪辑动画区别
    • (2)播放一次
    • (3)单帧效果
  • 二、按钮动画
    • (1)画一个圆角矩形
    • (2)元件类型转化为按钮
    • (3)功能介绍
      • 1)指向
      • 2)按下
      • 3)点击
    • (4)效果

一、图形动画

(1)图形动画与影片剪辑动画区别

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

新建一个图层。

An动画基础之元件的图形动画与按钮动画_第1张图片

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

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

An动画基础之元件的图形动画与按钮动画_第2张图片

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

An动画基础之元件的图形动画与按钮动画_第3张图片

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

如下:(左边是影片剪辑,右边是图形)

An动画基础之元件的图形动画与按钮动画_第4张图片

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

An动画基础之元件的图形动画与按钮动画_第5张图片

再次Ctrl+Enter导出看一下效果:(两个都在动)

An动画基础之元件的图形动画与按钮动画_第6张图片

在内部,我们拖动这个条,只有“图形动画”在动。
An动画基础之元件的图形动画与按钮动画_第7张图片

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

❓两个动画什么时候用?

①影片剪辑

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

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

An动画基础之元件的图形动画与按钮动画_第8张图片

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

②图形动画

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

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

An动画基础之元件的图形动画与按钮动画_第9张图片

(2)播放一次

比如,“播放一次”。

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

An动画基础之元件的图形动画与按钮动画_第10张图片

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

将帧数增加一点(增加到50帧),方便查看。

An动画基础之元件的图形动画与按钮动画_第11张图片

看一下效果:

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

(3)单帧效果

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

An动画基础之元件的图形动画与按钮动画_第12张图片

将循环选项为“单帧”。

An动画基础之元件的图形动画与按钮动画_第13张图片

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

An动画基础之元件的图形动画与按钮动画_第14张图片

看一下效果:

An动画基础之元件的图形动画与按钮动画_第15张图片

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

二、按钮动画

(1)画一个圆角矩形

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

An动画基础之元件的图形动画与按钮动画_第16张图片

(2)元件类型转化为按钮

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

An动画基础之元件的图形动画与按钮动画_第17张图片

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

An动画基础之元件的图形动画与按钮动画_第18张图片

(3)功能介绍

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

An动画基础之元件的图形动画与按钮动画_第19张图片

1)指向

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

An动画基础之元件的图形动画与按钮动画_第20张图片

将颜色改为蓝色。

An动画基础之元件的图形动画与按钮动画_第21张图片

2)按下

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

An动画基础之元件的图形动画与按钮动画_第22张图片

颜色改为红色。

An动画基础之元件的图形动画与按钮动画_第23张图片

3)点击

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

(4)效果

现在我们看一下效果:

An动画基础之元件的图形动画与按钮动画_第24张图片

原创不易,多多支持~
An动画基础之元件的图形动画与按钮动画_第25张图片

你可能感兴趣的:(An,An,图形动画,按钮动画)