码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift
  • An动画优化之遮罩层动画


    在这里插入图片描述

    文章目录

    • 一、介绍
    • 二、案例
      • (1)解除锁定
      • (2)新建图层
      • (3)画一个椭圆
      • (4)创建关键帧
      • (5)创建补间形状
      • (6)设为遮罩层
      • (7)缓和帧
      • (8)复制
      • (9)锁定看效果
      • (10)效果

    一、介绍

    遮罩层动画:不要的地方遮住,把想看的地方提出来。

    导入一张图片。

    并不能很好的贴合边框。

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

    将它F8转化为元件,类型为影片剪辑。

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

    我们新建一个图层。

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

    然后画一个黑色的矩形,并调整大小刚好是舞台大小。

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

    然后点击图层2,右键“添加遮罩层”。

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

    看一下效果(将不需要的地方遮住了)。

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

    为什么不是遮住的地方看不见?

    因为是把要看到的遮住,然后做成遮罩层后,遮住的地方会显现出来。

    二、案例

    接下来,咱们做一个小案例。

    (1)解除锁定

    先解除它们的锁定。

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

    双击进入小猫咪。

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

    (2)新建图层

    然后我们新建一个图层2。

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

    (3)画一个椭圆

    用【椭圆工具】画一个椭圆。

    放大图片,在最中心画。

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

    (4)创建关键帧

    上下选中图层,按F6创建关键帧。

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

    然后在30帧的位置,将椭圆放大。

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

    (5)创建补间形状

    对图层2,右键“创建补间形状”。

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

    (6)设为遮罩层

    右键,将图层2设为遮罩层。

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

    (7)缓和帧

    先解锁。(点击这个小锁即可)

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

    将整体向后移动。(鼠标左键全部选中,按住不动拖拽)

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

    点击这个点(第25帧),按Ctrl+C复制。

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

    然后在第1帧,按Ctrl+Shift+V原位复制。

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

    图层1同理。(将第25帧复制到第1帧)

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

    后边添加帧直接按F5即可。

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

    (8)复制

    将这一段选中(上下都有),按Alt键复制,拖拽到后边。

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

    然后将这一段,右键“翻转帧”。

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

    (9)锁定看效果

    然后咱们点小锁锁定它们。

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

    然后Ctrl+Enter看一下效果:

    请添加图片描述

    (10)效果

    回到场景1。

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

    点击小锁锁上。

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

    然后看一下最终效果。

    请添加图片描述
    今天的分享就到这啦,拜拜~
    在这里插入图片描述

  • 相关阅读:
    Python实战一:获取某云app登录cookie
    四.Kafka入门到精通-SpringBoot整合Kafka(Producer拦截器&Producer监听器)
    Nginx实战:代理服务-反向代理
    蓝桥杯(日期问题纯暴力)
    目标检测论文解读复现 | 目录一览表
    【openSSH】通过证书文件免密码远程登录
    Everything——检索神兵
    人工智能对我们的生活影响有多大?
    stm32cubemx hal学习记录:PWR 低功耗睡眠模式
    SU-03T语音模块使用简介
  • 原文地址:https://blog.csdn.net/m0_55746113/article/details/126122750
  • 最新文章
  • 【JVM】编译执行与解释执行的区别是什么?JVM 使用哪种方式?
    用 Hashids 优雅解决 C 端自增 ID 暴露问题
    V8引擎 精品漫游指南--Ignition篇(上) 指令 栈帧 槽位 调用约定 内存布局 基础内容
    LLVM Pass快速入门(四):代码插桩
    milkup:桌面端 markdown AI续写和即时渲染
    基于项目工程构建SBOM(软件物料清单)的研究
    鸿蒙应用开发UI基础第二节:鸿蒙应用程序框架核心解析与实操
    .NET 中如何快速实现 List 集合去重?
    扣子Coze实战:从0到1打造抖音+小红书热点监控智能体
    浅谈数据访问层
  • 热门文章
  • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧!!!
    奉劝各位学弟学妹们,该打造你的技术影响力了!
    五年了,我在 CSDN 的两个一百万。
    Java俄罗斯方块,老程序员花了一个周末,连接中学年代!
    面试官都震惊,你这网络基础可以啊!
    你真的会用百度吗?我不信 — 那些不为人知的搜索引擎语法
    心情不好的时候,用 Python 画棵樱花树送给自己吧
    通宵一晚做出来的一款类似CS的第一人称射击游戏Demo!原来做游戏也不是很难,连憨憨学妹都学会了!
    13 万字 C 语言从入门到精通保姆级教程2021 年版
    10行代码集2000张美女图,Python爬虫120例,再上征途
小工具 小游戏
Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1

京公网安备 11010502049817号