- 帧动画 不太耗内存，缺点：跳帧
素材类型 xx.plist + xx.png 图集：一般是一张图加上一个记录位置等信息的文件
比如1秒中播放10桢图片，而素材只有5张，平均下来0.2秒才能播放一张图片，高帧率下会觉得卡卡的。
两种实现方式：
- 节点配合动画编辑器，Animation组件挂在根节点上，设置每个节点的active属性
- 手写一个动画播放组件
import { _decorator, Component, Node, Sprite, SpriteFrame } from 'cc';
const { ccclass, property } = _decorator;@ccclass('FrameAnimation')
export class FrameAnimation extends Component {//图片的集合@property([SpriteFrame])spriteFrames: Array<SpriteFrame> = [];//重复播放@property({ tooltip: "帧动画是否循环播放" })isloop: boolean = false;//播放的时间playTime: number = 0;//图片显示的精灵sprite: Sprite = null;@property({ tooltip: "帧动画是否加载完成就开始播放" })playeOnLoad: boolean = false;//动画播放的状态isPlaying: boolean = false;@property({ tooltip: "帧动画播放的事件间隔" })duration: number = 0.1;//播放一次时播放完成的回调函数callback: Function = null;start() {this.sprite = this.node.getComponent(Sprite);if (!this.sprite) {this.sprite = this.node.addComponent(Sprite);}if (this.playeOnLoad) {if (this.isloop) {this.playLoop(true);} else {this.playOnce(false, null);}}}playLoop(loop: boolean) {if (this.spriteFrames.length <= 0) {return;}this.isPlaying = true;this.playTime = 0;this.sprite.spriteFrame = this.spriteFrames[0];this.isloop = loop;this.callback = null;}playOnce(loop: boolean, callback: Function) {if (this.spriteFrames.length <= 0) {return;}this.isPlaying = true;this.playTime = 0;this.sprite.spriteFrame = this.spriteFrames[0];this.isloop = loop;this.callback = callback;}update(deltaTime: number) {if (this.spriteFrames.length <= 0) {return;}if (!this.isPlaying) {return;}this.playTime += deltaTime;let index: number = Math.floor(this.playTime / this.duration);if (this.isloop) {//这里用>=，一开始写的时候没有判断=，出来的效果忽闪忽闪的，少一桢图片if (index >= this.spriteFrames.length) {index -= this.spriteFrames.length;this.playTime -= (this.duration * this.spriteFrames.length);}this.sprite.spriteFrame = this.spriteFrames[index];} else {if (index >= this.spriteFrames.length) {this.isPlaying = false;if (this.callback) {this.callback();}}this.sprite.spriteFrame = this.spriteFrames[index];}}
}这么使用的
- spine动画，就是骨骼动画
sp.Skeleton组件
素材：xx.atlas+xx.json+xx.png
- 龙骨动画
dragonBones.ArmatureDisplay组件
素材：xx_ske.json+xx_tex.json+xx_tex..png
- 3D fbx模型
MeshRenderer 用于通用模型渲染的网格渲染器组件 比如一些静态的模型、平面等3D物体
SkinnedMeshRenderer 蒙皮网格渲染器组件 比如3D骨骼动画
SkeletalAnimation 骨骼动画组件
fbx文件包含的部分：网格mesh[meʃ] 纹理image 材质material[məˈtɪəriəl] 图源texture 预制prefab 动画animation 骨骼skeleton[ˈskelɪtn]等。
**************************************************************************************************************
动画的节点soldier SkeletalAnimation[ˈskelətl]动画组件
一些节点 SkinnedMeshRenderer蒙皮网格渲染器，渲染模型的
其它节点 骨骼节点 绑定节点到骨骼上
点击素材中的模型文件来操作动画分割
动画的播放与切换
this.node.getComponent(SkeletalAnimation).play("Idle");
//平缓过度crossFade
this.node.getComponent(SkeletalAnimation).crossFade("Attack");技巧：绑定一个节点到渲染列表中Sockets，这个节点可以跟随移动，可用于检测碰撞
