码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift
  • An动画基础之元件的图形动画与按钮动画


    在这里插入图片描述

    文章目录

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

    一、图形动画

    (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)效果

    现在我们看一下效果:

    请添加图片描述

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

  • 相关阅读:
    由点汇聚成字的动效炫极了
    vue3中 inject provide的响应式使用
    [go 面试] 一致性哈希:数据分片与负载均衡的黄金法则
    容器编排学习(一)k8s集群管理
    盒子模型——边框,以及便捷写法和边框合并
    【新的小主机】向日葵远程控制ubuntu
    Springboot流浪狗领养管理系统毕业设计源码260839
    vpn概述总结
    Locust 1.0版本引入的变化
    Go语言技巧之正确高效使用slice(听课笔记总结--简单易懂)
  • 原文地址:https://blog.csdn.net/m0_55746113/article/details/126092686
  • 最新文章
  • 攻防演习之三天拿下官网站群
    数据安全治理学习——前期安全规划和安全管理体系建设
    企业安全 | 企业内一次钓鱼演练准备过程
    内网渗透测试 | Kerberos协议及其部分攻击手法
    0day的产生 | 不懂代码的"代码审计"
    安装scrcpy-client模块av模块异常,环境问题解决方案
    leetcode hot100【LeetCode 279. 完全平方数】java实现
    OpenWrt下安装Mosquitto
    AnatoMask论文汇总
    【AI日记】24.11.01 LangChain、openai api和github copilot
  • 热门文章
  • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧!!!
    奉劝各位学弟学妹们,该打造你的技术影响力了!
    五年了,我在 CSDN 的两个一百万。
    Java俄罗斯方块,老程序员花了一个周末,连接中学年代!
    面试官都震惊,你这网络基础可以啊!
    你真的会用百度吗?我不信 — 那些不为人知的搜索引擎语法
    心情不好的时候,用 Python 画棵樱花树送给自己吧
    通宵一晚做出来的一款类似CS的第一人称射击游戏Demo!原来做游戏也不是很难,连憨憨学妹都学会了!
    13 万字 C 语言从入门到精通保姆级教程2021 年版
    10行代码集2000张美女图,Python爬虫120例,再上征途
Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1
正则表达式工具 cron表达式工具 密码生成工具

京公网安备 11010502049817号