CocosCreator3.8研究笔记(二十四)CocosCreator 动画系统-动画编辑器实操-关键帧实现动态水印动画效果

这篇具有很好参考价值的文章主要介绍了CocosCreator3.8研究笔记(二十四)CocosCreator 动画系统-动画编辑器实操-关键帧实现动态水印动画效果。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


上一篇,我们介绍了动画编辑器相关功能面板说明,感兴趣的朋友可以前往阅读: CocosCreator3.8研究笔记(二十三)CocosCreator 动画系统-动画编辑器相关功能面板说明。


熟悉了动画编辑器的基础操作,那么再使用动画编辑器制作动画就比较简单了。


今天,我们来介绍动画编辑器实操案例,以关键帧动画实现动态水印效果。


在进行实操之前,我们需要知道什么是关键帧?如何使用关键帧?


一、关键帧的概念


在了解关键帧之前,我们需要先了解一个概念-什么是帧?


1、什么是帧?

帧就是动画中最小单位的单幅画面,相当于电影胶片上的每一格镜头,在动画编辑器的时间轴上,帧表现为一格或一个标记。


如下图所示:

时间控制线处为第10帧,往前面数,有10个格子,每一个为1帧。


cocos creator动画编辑器,CocosCreator3.8,笔记,编辑器,CocosCreator3.8,CocosCreator,typescript


2、什么是关键帧?

关键帧-顾名思义,指物体变化或者运动过程中,关键动作所处的那一帧,它对制作更加精细的动画效果起到非常关键的作用,是动画或者视频制作中经常用到的一个功能。


例如:下图 第 1 ,4,9 帧均为关键帧。

cocos creator动画编辑器,CocosCreator3.8,笔记,编辑器,CocosCreator3.8,CocosCreator,typescript


二、关键帧的使用


1、添加关键帧

添加关键帧的方法有很多种:

  • 选中动画属性,使用快捷键 K,将会在在时间控制线所在位置添加关键帧。

    例如下图:

    我们选择 Label-001节点 的属性 postion ,然后在时间控制线 第10帧的位置,按下快捷键k ,即添加了关键帧。


cocos creator动画编辑器,CocosCreator3.8,笔记,编辑器,CocosCreator3.8,CocosCreator,typescript


  • 移动时间控制线到需要添加关键帧的位置,点击动画属性右侧关键帧按钮,即可在当前动画属性轨道上添加关键帧。

如下图,我们将时间控制线移动到第8帧的位置,然后按下属性 postion 右侧的 菱形按钮:

cocos creator动画编辑器,CocosCreator3.8,笔记,编辑器,CocosCreator3.8,CocosCreator,typescript


也添加了关键帧:

cocos creator动画编辑器,CocosCreator3.8,笔记,编辑器,CocosCreator3.8,CocosCreator,typescript


  • 在动画属性的属性轨道中,右键点击需要添加关键帧的位置,在弹出的菜单中选择 添加关键帧

    如图:

    在第7帧的位置,右键弹出菜单,选择添加关键帧。

cocos creator动画编辑器,CocosCreator3.8,笔记,编辑器,CocosCreator3.8,CocosCreator,typescript


2、选中关键帧

选中的关键帧会由白色变成蓝色,有以下几种方法可以选中关键帧:

  • 单击动画属性轨道上的关键帧即可选中

cocos creator动画编辑器,CocosCreator3.8,笔记,编辑器,CocosCreator3.8,CocosCreator,typescript


  • 双击关键帧,则会在选中关键帧的同时,将时间控制线移动到当前关键帧所在位置

cocos creator动画编辑器,CocosCreator3.8,笔记,编辑器,CocosCreator3.8,CocosCreator,typescript


  • 支持多选关键帧,按住ctrl 再选择多个关键帧、框选多个关键帧

cocos creator动画编辑器,CocosCreator3.8,笔记,编辑器,CocosCreator3.8,CocosCreator,typescript


选择动画属性后,按住ctrl+a 可全选关键帧:

cocos creator动画编辑器,CocosCreator3.8,笔记,编辑器,CocosCreator3.8,CocosCreator,typescript


3、移动关键帧

在选中关键帧的同时拖动,即可将关键帧移动到想要的位置。

  • 当拖动单个关键帧时,关键帧下方会出现一个白色小方框,显示移动过程中的帧数以及移动的距离。

​ 如下图,选中第4帧这个关键帧,拖动到第 14帧的位置:

cocos creator动画编辑器,CocosCreator3.8,笔记,编辑器,CocosCreator3.8,CocosCreator,typescript


  • 当拖动多个关键帧时,方框左右两侧会分别显示移动过程中首尾关键帧在动画时间轴中的帧数。

cocos creator动画编辑器,CocosCreator3.8,笔记,编辑器,CocosCreator3.8,CocosCreator,typescript


4、缩放关键帧

选中多个关键帧时,首尾关键帧会显示两条控制辅助杆,拖动任意一个控制杆移动即可对选中的关键帧进行整体缩放。

cocos creator动画编辑器,CocosCreator3.8,笔记,编辑器,CocosCreator3.8,CocosCreator,typescript


如图,往后拉控制辅助杆,将其放大到第17帧。

cocos creator动画编辑器,CocosCreator3.8,笔记,编辑器,CocosCreator3.8,CocosCreator,typescript


5、间隔排列关键帧

选中多个关键帧后,点击上方菜单栏中的间隔排列关键帧按钮,选中的关键帧便会以第一个关键帧为基准,以间隔数输入框中设置的数值为间隔帧数依次排列。


cocos creator动画编辑器,CocosCreator3.8,笔记,编辑器,CocosCreator3.8,CocosCreator,typescript


6、复制粘贴关键帧

关键帧数据的复制和粘贴方法:

  • 选中关键帧后(可多选),使用快捷键 Ctrl + C 和 Ctrl + V 即可进行复制粘贴。需要注意的是快捷键粘贴的位置将会以当前时间控制线所在的位置为起点。

如图,选择了第9 、10 、11关键帧,按下 Ctrl + C ,然后在 第15帧控制线处,再按下 Ctrl + V,实现的效果:

cocos creator动画编辑器,CocosCreator3.8,笔记,编辑器,CocosCreator3.8,CocosCreator,typescript


  • 选中关键帧后(可多选),右键点击(任一)关键帧,在弹出的菜单中选择 复制关键帧,然后在目标动画属性轨道上点击右键,选择 粘贴关键帧 即可在当前动画属性轨道上粘贴关键帧。

cocos creator动画编辑器,CocosCreator3.8,笔记,编辑器,CocosCreator3.8,CocosCreator,typescript


cocos creator动画编辑器,CocosCreator3.8,笔记,编辑器,CocosCreator3.8,CocosCreator,typescript


7、删除关键帧

  • 选中需要删除的关键帧(可多选),按下 Delete 键(Windows)或者 Cmd + Backspace(macOS)即可

  • 选中需要删除的关键帧(可多选),然后点击右键,在弹出的菜单中选择 移除关键帧 即可。

cocos creator动画编辑器,CocosCreator3.8,笔记,编辑器,CocosCreator3.8,CocosCreator,typescript


拖动时间控制线到需要移除的关键帧的位置或者直接 双击 关键帧,然后在动画属性列表中点击对应的动画属性右侧的菱形按钮即可。

cocos creator动画编辑器,CocosCreator3.8,笔记,编辑器,CocosCreator3.8,CocosCreator,typescript


三、实操案例


我们以制作 Label 移动动画,实现动态水印 效果为例进行讲解。

假如我们想实现下面这个动画效果:

文字, 从左上角移动到右上角,然后从右上角移动到右下角,再从右下角移动到左下角,最后再从左下架回到右上角。


第一步,选择Label-001节点,在属性列表中,添加位置属性。

cocos creator动画编辑器,CocosCreator3.8,笔记,编辑器,CocosCreator3.8,CocosCreator,typescript


第二步,在属性事件轴上第0帧处添加关键帧,并在属性检查器中设置位置:(-400,-500)

cocos creator动画编辑器,CocosCreator3.8,笔记,编辑器,CocosCreator3.8,CocosCreator,typescript


第三步,在属性事件轴上第10帧处添加关键帧,并在属性检查器中设置位置:(400,500)

cocos creator动画编辑器,CocosCreator3.8,笔记,编辑器,CocosCreator3.8,CocosCreator,typescript


第四步,在属性事件轴上第20帧处添加关键帧,并在属性检查器中设置位置:(400,-500)

cocos creator动画编辑器,CocosCreator3.8,笔记,编辑器,CocosCreator3.8,CocosCreator,typescript


第五步,在属性事件轴上第30帧处添加关键帧,并在属性检查器中设置位置:(-400,-500)

cocos creator动画编辑器,CocosCreator3.8,笔记,编辑器,CocosCreator3.8,CocosCreator,typescript


第六步,在属性事件轴上第40帧处添加关键帧,并在属性检查器中设置位置:(-400,500)

cocos creator动画编辑器,CocosCreator3.8,笔记,编辑器,CocosCreator3.8,CocosCreator,typescript


好,至此,关键帧动态水印效果就制作完成,点击播放按钮,预览效果。

当然,演示的效果比较快,可调整关键帧的位置,以达到更好的效果。

cocos creator动画编辑器,CocosCreator3.8,笔记,编辑器,CocosCreator3.8,CocosCreator,typescript文章来源地址https://www.toymoban.com/news/detail-728058.html

到了这里,关于CocosCreator3.8研究笔记(二十四)CocosCreator 动画系统-动画编辑器实操-关键帧实现动态水印动画效果的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • CocosCreator3.8研究笔记(三)CocosCreator 项目结构说明及编辑器的简单使用

    我们通过Dashboard 创建一个2d项目,来演示CocosCreator 的项目结构。 等待创建完成后,会得到以下项目工程: 一、assets文件夹 assets文件夹 :为资源目录,用来存储所有的本地资源,如各种图片,脚本资源。 只有在这个目录下的内容才会显示在cocos编辑器的资源管理器中。 其中

    2024年02月10日
    浏览(40)
  • CocosCreator3.8研究笔记(二)windows环境 VS Code 编辑器的配置

    一、设置文件显示和搜索过滤步骤 为了提高搜索效率以及文件列表中隐藏不需要显示的文件, VS Code 需要设置排除目录用于过滤。 比如 cocoscreator 中,编辑器运行时会自动生成一些目录:build 、 temp 、 library, 所以应该在搜索中排除。 而 assets 目录下的每个文件都会生成一个

    2024年02月10日
    浏览(39)
  • CocosCreator3.4.2源码渲染流程解读

     首先上一张脑图镇楼,有些流程还有待后续补充,但是整个刷新过程差不多都完成了。 在上一个xmind文件地址 https://download.csdn.net/download/m0_37609239/87254684 接下来就正式开始讲代码: 每帧刷新渲染还是从mainloop开始讲,前面的流程可以看 ​​​​​​​​​​​​​​CocosC

    2023年04月08日
    浏览(40)
  • Threejs入门之二十四:Threejs中的Animation动画

    Threejs为我们提供了强大的动画系统接口API,通过这些接口,我们可以很轻松的实现物体的移动、旋转、缩放、颜色变化、透明度变化等各种效果,今天我们就来了解下Threejs中的动画系统。 首先我们先了解几个在Threejs动画系统中比较重要的组件 关键帧轨道(KeyframeTrack)是关键

    2024年02月10日
    浏览(47)
  • Revit二次开发知识分享(二十四)实现鼠标可视化跟随动画效果

    背景:群友询问:怎样子实现在批量选择完管道,在点击放置标签时,想有一个可视化跟随的动画效果。然后研究了一番,下面提供了一个简易版的实行方案,大家可以参考学习。 源码 实现如下图所示的选择完管件后,鼠标动画跟随效果 其中Rectangle是当前视图边框投影到屏

    2024年02月10日
    浏览(73)
  • 密码学学习笔记(二十四):TCP/IP协议栈

    TCP/IP协议栈的基础结构包括应用层、传输层、网络层、数据链路层和物理层。 应用层位于TCP/IP协议栈的最顶层,是用户与网络通信的接口。这一层包括了各种高级应用协议,如HTTP(用于网页浏览)、FTP(用于文件传输)、SMTP(用于电子邮件)和DNS(用于域名解析)。应用层

    2024年01月19日
    浏览(56)
  • 【CocosCreator入门】CocosCreator组件 | Spine(骨骼动画)组件

             Cocos Creator 是一款流行的游戏开发引擎,具有丰富的组件和工具,其中Spine 是一个基于骨骼系统的 2D 动画工具,它可以让开发者通过对骨架和关键帧的调整来制作出更加自然、流畅的动画效果。Cocos Creator 支持使用 Spine 的 JSON 格式文件导入到项目中,并且提供了

    2023年04月15日
    浏览(46)
  • 【CocosCreator入门】CocosCreator组件 | DragonBones(骨骼动画)组件

             Cocos Creator 是一款流行的游戏开发引擎,具有丰富的组件和工具,其中DragonBones,它可以帮助您创建出色的2D骨骼动画。在本文中,我们将探讨CocosCreator引擎的DragonBones组件,以及如何使用它来创建精美的动画。 目录 一、组件属性  二、组件使用  三、挂点生成

    2023年04月20日
    浏览(46)
  • Django笔记二十四之数据库函数之比较和转换函数

    本文首发于公众号:Hunter后端 原文链接:Django笔记二十四之数据库函数之比较和转换函数 这一篇笔记开始介绍几种数据库函数,以下是几种函数及其作用 Cast 转换类型 Coalesce 优先取值 Greatest 返回较大值 Nullif 值相同返回 None 这一篇笔记我们主要用到 Author 和 Entry model 作为示

    2023年04月18日
    浏览(69)
  • 第二十四节 异常

    10.3 异常 Python使用称为异常的特殊对象来管理程序执行期间发生的错误。每当发生让Python不知所措的错误时,它都会创建一个异常对象。如果你编写了处理该异常的代码,程序将继续运行;如果未对异常进行处理,程序将停止并显示traceback,其 中包含有关异常的报告。 异常

    2024年02月13日
    浏览(57)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包