4、Cocos Creator 动画系统

news/2024/5/3 2:24:50

目录

1、Clip 参数

2、动画编辑器

3、基本操作

更改时间轴缩放比例

移动显示区域

更改当前选中的时间轴节点

播放 / 暂停动画

修改 clip 属性

快捷键

4、模拟实验

5、动画事件

6、注意事项

参考

Animation 组件是节点上的一个组件。Clip 动画剪辑就是一份动画的声明数据,我们将它挂载到 Animation 组件上,就能够将这份动画数据应用到节点上。

1、Clip 参数

1、sample:定义当前动画数据每秒的帧率,默认为 60,这个参数会影响时间轴上每两个整数秒刻度之间的帧数量(也就是两秒之内有多少格)。

2、speed:当前动画的播放速度,默认为 1

3、duration:当动画播放速度为 1 的时候,动画的持续时间

4、real time:动画从开始播放到结束,真正持续的时间

5、wrap mode:循环模式

2、动画编辑器

  1. 常用按钮区域,这里负责显示一些常用功能按钮,从左到右依次为:开关录制状态、返回第一帧、上一帧、播放/暂停、下一帧、新建动画剪辑、插入动画事件。

  2. 时间轴与事件,这里主要是显示时间轴,添加的自定义事件也会在这里显示。时间轴上刻度的表示法是 01-05。该数值由两部分组成,冒号前面的是表示当前秒数,冒号后面的表示在当前这一秒里的第几帧

  3. 层级管理(节点树),当前动画剪辑可以影响到的节点数据。

  4. 节点内关键帧的预览区域,这里主要是显示各个节点上的所有帧的预览时间轴。

  5. 属性列表,显示当前选中的节点在选中的动画剪辑中已经包含了的属性列表。

  6. 关键帧,每个属性相对应的帧都会显示在这里。

3、基本操作

更改时间轴缩放比例

在操作中如果觉得动画编辑器显示的范围太小,需要按比例缩小,让更多的关键帧显示到编辑器内怎么办?

  • 在上图中 2、4、6 区域内滚动鼠标滚轮,可以放大,或者缩小时间轴的显示比例。

移动显示区域

如果想看动画编辑器右侧超出编辑器被隐藏的关键帧或是左侧被隐藏的关键帧,这时候就需要移动显示区域:

  • 在图中 2、4、6 区域内按下鼠标中键/右键拖拽。

更改当前选中的时间轴节点

  • 在时间轴(图 2 区域)区域内点击任意位置或者拖拽,都可以更改当前的时间节点。
  • 在图 4 区域内拖拽标示的红线即可。

播放 / 暂停动画

  • 在图 1 区域内点击播放按钮,按钮会自动变更为暂停,再次点击则是暂停。
  • 播放状态下,保存场景等操作会终止播放。

修改 clip 属性

  • 在插件底部,修改对应的属性,在输入框失去焦点的时候就会更新到实际的 clip 数据中。

快捷键

  • left:向前移动一帧,如果已经在第 0 帧,则忽略当前操作

  • right:向后移动一帧

  • delete:删除当前所选中的关键帧

  • k:正向的播放动画,抬起后停止

  • j:反向播放动画,抬起后停止

  • ctrl / cmd + left:跳转到第 0 帧

  • ctrl / cmd + right:跳转到有效的最后一帧

4、模拟实验

说明:

1. 挂载节点

2. 动画控制属性

3. 关键帧

4. 循环模式

5. 双击,可以自定义动画曲线

6. 帧率,越大越快

7. 速度,越小越快

5、动画事件

首先选中某个位置,然后点击按钮区域最左侧的按钮(add event),这时候在时间轴上会出现一个白色的矩形,这就是我们添加的事件。

函数是如何找到:手动输入需要触发的 function 名字,触发的时候会根据这个函数名,去当前节点各个组件内匹配相应的方法。

6、代码控制动画

  1、Cocos Creator 2.4 API - Animation

  2、Cocos Creator 2.4 手册 - 使用脚本控制动画

7、注意事项

1、节点数据的索引方式:数据中索引节点的方式是以挂载 Animation 组件的节点为根节点的相对路径。 所以在同个父节点下的同名节点,只能够产生一份动画数据,并且只能应用到第一个同名节点上。

2、使用脚本执行动画时,需要在 Animation 下指定多个需要执行的动画

此时可以使用 

cc.find("Canvas/PurpleMonster").getComponent(cc.Animation).play("images")
cc.find("Canvas/PurpleMonster").getComponent(cc.Animation).play("image1")

如果不指定会报错,获取 clip 为空值

参考

1、Cocos Creator 2.4 手册 - 动画系统

2、Cocos Creator 2.4 手册 - Animation 组件参考

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.cpky.cn/p/11277.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈,一经查实,立即删除!

相关文章

迭代实现二叉树的遍历-算法通关村

迭代实现二叉树的遍历-算法通关村 理论上,递归能做的迭代一定能做,但可能会比较复杂。有时候面试官要求不使用递归实现三种遍历,递归就是每次执行方法调用都会先把当前的局部变量、参数值和返回地址等压入栈中,后面在递归返回的时…

C# NumericUpDown 控件正整数输入控制

用到了控件的 KeyPress 和 KeyUp事件。 KeyPress 中控制输入“点、空格,负号”; KeyUp 中防止删空,以及防止输入超过最大值或最小值 。 private void nudStart_KeyPress(object sender, KeyPressEventArgs e){numericUpDownKeyPress(sender…

SpringBoot整合腾讯云邮件发送服务非STMP

SpringBoot整合腾讯云邮箱服务 1、pom配置 <!-- 腾讯云邮箱服务--><dependency><groupId>com.tencentcloudapi</groupId><artifactId>tencentcloud-sdk-java</artifactId><!-- go to https://search.maven.org/search?qtencen…

硬件15、PCB如何将元器件切换顶层和底层以及元器件布局对齐

器件切换顶层和底层 在移动元器件的时候&#xff0c;按一下 L 键&#xff0c;原器件就会变为蓝色&#xff0c;这就是放到了底层&#xff0c;然后再按 L 键就可以切换到顶层了 元器件放置后布局如何变得对齐那种 首先选中需要对齐的元器件&#xff0c;然后进行设置布局的属性…

vue3+threejs新手从零开发卡牌游戏(二十):添加卡牌被破坏进入墓地逻辑

在game目录下新建graveyard文件夹存放墓地相关代码&#xff1a; game/graveyard/p1.vue&#xff0c;这里主要设置了墓地group的位置&#xff1a; <template><div></div> </template><script setup lang"ts"> import { reactive, ref,…

Git常用指令使用

摘要&#xff1a;之前代码管理都是借助于fork、sourceTree等图形工具&#xff0c;最近发现直接用命令也好用&#xff0c;就总结Git常用的指令 1、Git的介绍 1.1 git官网 安装: Git - Downloading Packagehttps://git-scm.com/download/mac Mac上安装&#xff0c;直接使…