- 帧动画 不太耗内存,缺点:跳帧
素材类型 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,这个节点可以跟随移动,可用于检测碰撞