CocosCreator3.8研究笔记(二十三)CocosCreator 动画系统-动画编辑器相关功能面板说明

简介: CocosCreator3.8研究笔记(二十三)CocosCreator 动画系统-动画编辑器相关功能面板说明

上一篇,我们介绍了动画剪辑、动画组件以及基本的使用流程,感兴趣的朋友可以前往阅读: CocosCreator 动画系统-动画剪辑和动画组件介绍

今天,主要介绍动画编辑器相关功能面板说明。


1、工具栏区域

工具栏区域主要是一些常用功能,主要有:播放、暂停、停止动画、保存动画、退出编辑等。


2、节点列表

节点列表,主要显示组件的节点,如果一个动画组件包含多个节点,则最上层显示为根节点,与 层级管理器 中的节点树一一对应的方式排列。

可点击上方的

按钮来隐藏/显示无动画数据的节点,或者直接在输入框中输入节点名称来快速查找节点。



目前支持右键点击节点,复制、粘贴节点数据、迁移节点数据、清空节点数据。


3、属性列表区域

该区域主要用于显示、添加、设置当前选中的节点在当前动画剪辑中的动画属性。

点击右上角的 + 按钮即可添加动画属性,动画属性包括了节点自有的属性、组件属性(包含用户自定义脚本组件中的属性)。

组件包含的属性前会加上组件的名字,比如 cc.Label


右键点击动画属性可选择 移除当前属性轨道清空关键帧,或者 复制粘贴当前属性轨道


4、 动画时间轴与关键帧区域

(1)、动画时间轴

动画时间轴主要用于显示、设置当前节点添加的所有动画属性上的关键帧(菱形)并显示预览。


(2)、时间控制线

时间控制线(蓝色竖线)表示当前动画所处的时间节点,可通过以下几种方式更改当前选中时间:

  • 直接拖拽时间控制线
  • 双击关键帧
  • 在菜单工具栏中使用相关移动控制按钮
  • 使用快捷键k
  • 在动画时间轴上方区域内点击任意位置

移动时间控制线则 场景编辑器 中的节点也会根据动画轨迹进行相应的移动。



(3)、时间轴的刻度单位显示

时间刻度单位下拉按钮,可用于切换动画时间轴的刻度显示方式。


时间刻度单位有三种方式:

  • 时间(Mixed)
    时间:Mixed(默认):以秒和帧组合为单位的方式来显示动画时间轴的刻度。输入框前面的数值表示 ,后面的数值表示帧,例如 0-12 表示 0 秒又 12 帧。



  • 以帧为单位的方式来显示动画时间轴的刻度。
  • 时间(s)
    以秒为单位的方式来显示动画时间轴的刻度。

一般用帧率(Sample)来表示一秒要划分为多少帧。


(4)、动画时间轴缩放比例和移动

动画时间轴动画属性关键帧预览 任一区域内滚动鼠标滚轮,即可放大或者缩小时间轴的横向显示比例。

动画时间轴动画属性关键帧预览任一位在按下鼠标右键,可左右拖动时间轴显示区域,查看左右隐藏的内容。


5、动画属性关键帧区域

该区域主要用于显示当前选中节点在各动画属性上具体的关键帧设置情况,也是关键帧编辑的主要区域。

可以直接在右侧的动画属性上点击右键来添加关键帧。

同时在该区域也支持框选、点选关键帧来进行移动、复制、粘贴等操作。


单击选中某一关键帧,关键帧会由蓝色变成白色并且该区域上方会显示当前关键帧的相关信息,若双击关键帧还会将时间控制线移动到当前关键帧所在位置。


6、设置当前动画剪辑的相关属性

当前动画剪辑在动画编辑器上可直接设置的属性包括:循环模式WrapMode)、帧率(Sample)播放速度(Speed)和 时长(Duration)


(1)、循环模式(WrapMode)

用于设置当前动画剪辑播放的循环模式,目前包括:

  • Default:效果与 Normal 一致
  • 只播放一次(Normal):正向单次播放
  • 循环播放(Loop):循环正向播放
  • 来回循环播放(PingPong):以先正向播放再逆向播放的方式循环播放
  • 反向播放(Reverse):反向单次播放
  • 反向循环播放(LoopReverse):循环反向播放


(2)、帧率(Sample)

定义当前动画数据每秒的帧率,也就是一秒要划分为多少帧,默认为 60。

可以在 动画编辑器 底部的 采样帧率 选项中进行调整:


  • 播放速度(Speed)
    用于设置当前动画的播放速度,默认为 1,值越小播放速度越慢。


  • 时长(Duration):前面的数字表示当动画播放速度为 1 的时候,动画的持续时间,根据最后一个关键帧所在位置决定。
    后面括号中的数字表示实际运行的持续时间,当调整 Speed 时,会随之变化。



相关文章
|
7月前
|
Ubuntu Linux 测试技术
Linux系统之部署轻量级Markdown文本编辑器
【10月更文挑战第6天】Linux系统之部署轻量级Markdown文本编辑器
343 1
Linux系统之部署轻量级Markdown文本编辑器
|
8月前
|
JavaScript 开发工具 C++
探索 Visual Studio Code:开发者的多功能编辑器
Visual Studio Code(VS Code)是由微软开发的一款免费、开源的轻量级代码编辑器,支持 Windows、Linux 和 macOS。它内置了对多种编程语言的支持,并提供了代码高亮、智能补全、调试和 Git 集成等功能。VS Code 的强大之处还在于其丰富的插件生态系统,通过安装插件可以进一步扩展功能。此外,用户还可以通过定制设置来自定义编辑器的行为和外观,从而提升开发效率。本文将详细介绍 VS Code 的核心特性、推荐插件及定制化设置方法。
|
6月前
|
运维 自然语言处理 供应链
Java云HIS医院管理系统源码 病案管理、医保业务、门诊、住院、电子病历编辑器
通过门诊的申请,或者直接住院登记,通过”护士工作站“分配患者,完成后,进入医生患者列表,医生对应开具”长期医嘱“和”临时医嘱“,并在电子病历中,记录病情。病人出院时,停止长期医嘱,开具出院医嘱。进入出院审核,审核医嘱与住院通过后,病人结清缴费,完成出院。
280 4
|
7月前
|
前端开发 开发者
大模型代码能力体验报告之贪吃蛇小游戏《二》:OpenAI-Canvas-4o篇 - 功能简洁的文本编辑器加一点提示词语法糖功能
ChatGPT 的Canvas是一款简洁的代码辅助工具,提供快速复制、版本管理、选取提问、实时编辑、代码审查、代码转写、修复错误、添加日志和注释等功能。相较于 Claude,Canvas 更加简单易用,但缺少预览功能,适合一般开发者使用。
109 0
|
9月前
|
搜索推荐 Linux 网络安全
Linux系统中的Vim编辑器
【8月更文挑战第21天】Vim是一款功能强大的文本编辑器,在Linux系统中广泛使用。它具有三种基本模式:命令模式,用于执行操作但不能编辑文本;插入模式,允许用户像常规编辑器那样输入文本;底线命令模式,用于保存、退出及查找替换等操作。Vim还支持多窗口编辑、宏录制及插件扩展等功能,并可通过配置文件个性化设置。因其高效性、良好的可移植性和远程编辑能力,Vim特别适用于开发者和系统管理员。
|
9月前
|
数据采集 运维 监控
运维笔记:流编辑器sed命令用法解析
运维笔记:流编辑器sed命令用法解析
108 5
|
9月前
|
自然语言处理 机器人 API
【Azure 机器人】微软Azure Bot 编辑器系列(4) : 使用语言生成功能[LG: Language Generation] (The Bot Framework Composer tutorials)
【Azure 机器人】微软Azure Bot 编辑器系列(4) : 使用语言生成功能[LG: Language Generation] (The Bot Framework Composer tutorials)
|
9月前
|
自然语言处理 机器人 API
【Azure 机器人】微软Azure Bot 编辑器系列(3) : 机器人对话流中加入帮助和取消按钮功能 (The Bot Framework Composer tutorials)
【Azure 机器人】微软Azure Bot 编辑器系列(3) : 机器人对话流中加入帮助和取消按钮功能 (The Bot Framework Composer tutorials)
|
11月前
|
UED
ONLYOFFICE 桌面编辑器 8.1重磅来袭:全新功能提升您的办公效率
ONLYOFFICE 桌面编辑器 8.1重磅来袭:全新功能提升您的办公效率
|
12月前
|
存储 JavaScript 前端开发
笔.COOL,一个功能完备、使用便捷的在线HTML/CSS/JS以及Vue编辑器和作品分享平台
笔.COOL是一个新兴的在线 HTML/CSS/JS 及 Vue 编辑器,提供实时预览和云端存储功能。用户可以随时随地编写和保存代码,同时分享作品给他人预览和学习。它也是一个实用的 BUG 复现工具,支持嵌入编辑器到博客,促进代码交流。社区活跃,适合开发者展示作品、获取灵感和学习。
218 1