Cocos creator 3.8 支持的动画 7

1. 帧动画 不太耗内存，缺点：跳帧

素材类型 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];
        }
    }
}

这么使用的

1. spine动画，就是骨骼动画

sp.Skeleton组件

素材：xx.atlas+xx.json+xx.png

1. 龙骨动画

dragonBones.ArmatureDisplay组件

素材：xx_ske.json+xx_tex.json+xx_tex..png

1. 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，这个节点可以跟随移动，可用于检测碰撞