4、Cocos Creator 动画系统

目录

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.mzph.cn/news/779987.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue源码解析—— watch/computed的实现逻辑和区别

watch 和 computed 是 Vue 中的两个重要的响应式属性,它们在实现机制和使用上存在一些区别。 watch:用于监听数据的变化,并在数据变化时执行回调函数。可以使用 deep 配置项来开启深度监听,监听数据的子属性变化。可以使用 immedi…

基于51单片机和MAX1898的智能手机充电器设计

**单片机设计介绍,基于51单片机和MAX1898的智能手机充电器设计 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于51单片机和MAX1898的智能手机充电器设计概要 一、引言 随着智能手机的普及,其电池续航…

网络安全接入认证-802.1X接入说明

介绍 802.1X是一个网络访问控制协议,它可以通过认证和授权来控制网络访问。它的基本原理是在网络交换机和认证服务器之间建立一个安全的通道,并要求客户端提供身份验证凭据。如果客户端提供的凭据是有效的,交换机将开启端口并允许访问。否则&…

通讯录改进———动态版本

在上一篇博客中讲完了动态内存分配,这时候我们就可以改进之前写的通讯录了,可以将其升级为动态内存的版本,既不用担心联系人满了,也不用担心内存浪费太大。 要将其改为动态版本主要是两件事,首先初始化的时候我们要动…

qt完成对话框提示

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this);//去掉头部this->setWindowFlag(Qt::FramelessWindowHint);//去掉空白this->setAttribute(Qt::WA_Transl…

Go的数据结构与实现【Queue】

介绍 与栈一样,队列也是最基本的数据结构之一。队列也是值的一种容器,其中值的插入和删除遵循“先进先出”(First-In-First-Out, FIFO)的原则⎯⎯也就是说,每次删除的只能是最先插入的值。 实现 队列的抽象数据类型…

《数据结构学习笔记---第六篇》---栈和队列的实现

目录 1.栈 1.1栈的概念及结构 1.2栈的实现 2.队列 2.1队列的概念及结构 ​2.2队列的实现 3.顺序栈的具体实现 3.1建头文Stack.h” 3.2创建具体接口实现文件Stack.c 3.2.1初始化 3.2.2入栈出栈 3.2.4判空 3.2.5栈的大小 3.2.6销毁栈 3.3主函数的实现 4.链队的具体实现…

SAMRTFORMS 转换PDF 发送邮件

最终成果: *&---------------------------------------------------------------------**& Report ZLC_FIND_EXIT*&---------------------------------------------------------------------**&根据T-CODE / 程序名查询出口、BADI增强*&-------…

2024年大广赛联通沃派命题解析:赛题内容一览

2024大广赛又又又又又出新命题了,它就是助力青少年积极向上,乐观自信,探享多彩人生的5G时代潮牌——联通沃派,让我们来看看命题详情吧! 联联通沃派是中国联通面向青少年群体推出的客户品牌,契合目标群体特…

基于SSM框架的校园失物招领系统:从设计思路到实现细节

末尾获取源码作者介绍:大家好,我是墨韵,本人4年开发经验,专注定制项目开发 更多项目:CSDN主页YAML墨韵 学如逆水行舟,不进则退。学习如赶路,不能慢一步。 目录 一、项目简介 二、开发技术与环…

5.11 Vue配置Element UI框架

Vue配置Element UI框架 目录一、 概要二、 开发前准备1. 搭建Vue框架 三、 安装 Element UI1. 引入 Element UI 依赖2. 在 mian.js 中引入 Element UI 和相关样式:3. 按需引入(非必须, 可忽略)4. 简单构建一个主页面 目录 一、 概要 Element UI 是一个基于 Vue.js …

备考ICA----Istio实验13---使用 Istio Ingress 暴露应用

备考ICA----Istio实验13—使用Istio Ingress TLS暴露应用 1. 环境部署 清理之前实验遗留,并重新部署httpbin服务进行测试 # 清理之前的环境 kubectl delete vs httpbin kubectl delete gw mygateway # 部署httpbin kubectl apply -f istio/samples/httpbin/httpbin.yaml 确认…

vue3使用vuedraggable实现拖拽(有过渡)

1. 安装与使用 vue中vuedraggable安装: pnpm i -S vuedraggablenext或者 yarn add vuedraggablenext注意:vue2和vue3安装的是不同版本的vuedraggable,写法上也会有一些区别。 比如在vue3中使用拖拽,要以插槽的方式,…

【微服务】Sentinel(熔断降级,热点限流)

文章目录 1.熔断降级1.基本介绍1.线程堆积引出熔断降级2.示意图3.熔断,降级,限流三者之间的关系 2.熔断降级策略(以分钟为基本单位)1.慢调用比例2.异常比例3.异常数 3.熔断降级实例—慢调用比例1.需求分析2.com/sun/springcloud/c…

个人简历主页搭建系列-05:部署至 Github

前面只是本地成功部署网站,网站运行的时候我们可以通过 localhost: port 进行访问。不过其他人是无法访问我们本机部署的网站的。 接下来通过 Github Pages 服务把网站部署上去,这样大家都可以通过特定域名访问我的网站了! 创建要部署的仓库…

CAS、AQS、ReentrantLock机制以原理

1、CAS 1.1 基本概念 CAS 是 compare and swap 的简写,即比较并交换。它是指一种操作机制,而不是某个具体的类或方法。在 Java 平台上对这种操作进行了包装。在 Unsafe 类中,调用代码如下 这里无法用Unsafe类看,我使用的是Atomi…

绿联 部署vocechat,搭建私人聊天服务器,用于小型团队和家庭环境

1、镜像 privoce/vocechat-server:latest 2、安装 2.1、基础设置 重启策略:容器退出时总是重启容器。 2.2、网络 桥接即可。 2.3、存储空间 装载路径:/home/vocechat-server/data不可变更,权限读写。 2.4、端口设置 容器端口3000不可变…

鸿蒙OS开发教学:【编程之重器-装饰器】

HarmonyOS 有19种装饰器 必须【2】 绘制一个页面,这两个肯定会用到 EntryComponent 可选【17】 StatePropLinkObjectLinkWatchStylesStoragePropStorageLinkProvideConsumeObservedBuilderBuilderParamLocalStoragePropLocalStorageLinkExtendConcurrent 如果…

python3将exe 转支持库错误 AssertionError: None does not smell like code

exe -> pyc包(*.exe_extracted) 安装反编译工具 exe反编译工具:pyinstxtractor.py下载:https://sourceforge.net/projects/pyinstallerextractor/ python pyinstxtractor.py hello.exe包反编译 懒的写!!! 这有详…

如何使用Zabbix监控MySQL的MGR群集状态

MySQL的MGR(MySQL Group Replication)是MySQL官方提供的一种高可用性和高可靠性的集群解决方案。MGR通过使用基于组复制的方式,实现了多个MySQL实例之间的数据同步和故障转移,从而提供了自动故障恢复和负载均衡的功能。本文将介绍…