当前位置：网站首页>An动画基础之按钮动画与基础代码相结合

An动画基础之按钮动画与基础代码相结合

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

在这里插入图片描述

上节介绍了按钮的基本使用，这节说一下与基础代码结合的使用。

一、新建按钮

（1）画一个矩形

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

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

（2）转化为按钮

将刚才做的矩形，选中。

按F8转化为元件，类型为“按钮”。

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

二、指向

（1）内部建立元件

双击进入按钮。

“弹起”的时候是蓝色的。

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

在“指向”的位置，按F6转化为关键帧。

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

再次选中，F8转化为元件，类型改为“影片剪辑”。

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

（2）创建关键帧

然后双击进入。

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

在第5帧和第20帧的位置创建关键帧。（快捷键F6）

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

（3）改变颜色

在第20帧的位置，将它的颜色改为绿色。

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

（4）创建补间形状

将第5帧到第20帧中间，右键“创建补间形状”。

这样的话，第5帧到第20帧颜色就是过渡的了。（从蓝色到绿色）

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

三、点击

（1）创建关键帧

先退出现在的元件回到“按钮”。

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

在“按下”的地方，按F6转化为关键帧。

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

（2）换颜色

刚才我们做的“指向”是影片剪辑。

那么，现在还是“影片剪辑”。

我们要Ctrl+B打散，给它换成黄色。

在这里插入图片描述

（3）目前效果

先点出去回到“场景1”。

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

然后Ctrl+Enter查看效果。（这里只演示了鼠标悬停按钮颜色变化，点击按钮就会变成黄色啦，没有演示而已，怕大家颜色混乱）

请添加图片描述

（4）更改代码

可以看到，上边，将鼠标放上去的时候（指向），按钮颜色在不停地闪。

怎样才能不闪呢？

先双击矩形进入“按钮”。

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

点击一下“指向”关键帧。

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

然后再双击进入“矩形（内）”。

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

按下快捷键F9，打开代码。

点击这个小箭头，然后点击“AS”。

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

双击文件“在此帧处停止”。

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

这里就会有代码。

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

（5）效果

然后咱们叉掉这些，点出去回到“场景1”。

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

然后ctrl+Enter看一下效果。

可以看到，当鼠标放上去的时候，按钮颜色（从蓝色变为绿色）很自然地变化，并没有跳动啦。
请添加图片描述

四、小案例

这里做一个鼠标点击，图片轮换的小案例。

（1）插入第一张

在第1帧插入小兔子图片。（调整图片大小与舞台贴合）

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

（2）插入第二张

在第2帧按F7插入“空白关键帧”。

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

然后将小松鼠图片拖拽进来。

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

（3）插入第三张

在第3帧按F7插入“空白关键帧”。

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

然后将小猫咪图片拖拽进来。

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

（4）创建按钮

新建一个图层。

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

在第1帧的位置，画一个矩形，将舞台遮盖。

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

然后将这个矩形转化为元件，类型为“按钮”。（按F8）

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

降低Alpha值，将它调为透明按钮。

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

（5）单击到下一帧停止

在第一帧按F9打开代码，双击文件“单击转到下一帧并停止”。

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

点击“确定”。

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

代码就有了。

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

然后将它们关掉。

看一下效果：

图片太大，无法显示，跳转查看。

（6）在此帧处停止

哎呀，一直跳呀。

我们继续在第1帧按F9调出代码。

双击文件“在此帧处停止”。

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

代码就自动填入了。

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

然后将它们叉掉，看一下效果：（点击一次，转到下一张图）
请添加图片描述

（7）返回到第一帧

刚才的效果，是单击一次，就转到下一张图片。

到最后一张图片，就点不动啦。

现在我想点击最后一张图片，转到第一张。

在图层二，第三帧按F9。

然后双击文件“单击以转到帧并停止”。

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

我们是想从最后一张，转移到第1帧，所以这个地方改为1。

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

叉掉之后，看一下效果：

请添加图片描述
希望文章对你有帮助，原创不易，多多支持~
在这里插入图片描述

原网站

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