Cocos 3.x Animation

参考https://docs.cocos.com/creator/3.0/manual/zh/，官方将动画分成编辑器手册和引擎手册两部分。本文在摘抄原有文档内容同时，补充一些自己的理解。

一、编辑器部分

• 关于 Animation
• 熟悉动画编辑器
• 创建 Animation 组件和动画剪辑
• 编辑动画序列
• 制作帧动画
• 编辑动画曲线
• 动画事件

二、引擎部分

动画组件章节介绍了如何使用动画组件和动画剪辑控制动画的播放：

• 动画组件

若需要深入了解动画剪辑的构成或程序化地创建动画剪辑时，可以参考：

• 动画剪辑

动画状态提供了控制动画播放的低级接口：

• 动画状态

骨骼动画是一种常见但类型特殊的动画，相关详细说明参考：

• 骨骼动画

三、使用

Node上添加Animation组件，Animation组件有多个Clip组件。

import { Animation, Node } from "cc";

function (node: Node) {
    const animationComponent = node.addComponent(Animation);
}

2.播放与切换

animationComponent.play('idle'); // 播放动画状态 'idle'

在播放时，旧的动画将立即被停止，这种切换是非常突兀的。在某些情况下，我们希望这种切换是“淡入淡出”的效果，此时应该使用 crossFade() 方法。crossFade() 会在指定的周期内平滑地完成切换：

animationComponent.play('walk');

/* ... */

// 当需要切换到跑的动画时
// 在 0.3 秒内平滑地从走的动画切换为跑的动画
animationComponent.crossFade('run', 0.3);

crossFade() 的这种淡入淡出机制使得同一时刻可能有不止一个动画状态在播放。因此，动画组件没有 当前动画 的概念。

即便如此，动画组件仍提供了 pause()、resume()、stop() 方法，这些方法在暂停、继续以及停止正在播放的所有动画状态的同时，也暂停、继续以及停止动画的切换。

3.动画状态

有时候你可能需要对动画状态进行其他操作，例如设置速度。

首先可以通过 getState() 获取动画状态：

const animationComponent = node.getComponent(Animation);
animationComponent.clips = [ idleClip, runClip ];

// 获取 `idleClip` 的状态
const idleState = animationComponent.getState(idleClip.name);

然后设置动画播放的速度：

// 以两倍速播放待机动画
animationComponent.getState('idle').speed = 2.0; 

动画状态也提供了 play()、pause()、resume()、stop() 这些用于播放控制的方法。当动画组件本身的播放控制功能已经不能满足需求时，也可以按照自己的方式操纵动画状态的播放。

4.默认动画

当动画组件的 playOnLoad 为 true 时，动画组件将在第一次运行时自动播放默认动画剪辑 defaultClip。

5.帧事件

你可以为动画的每一时间点添加事件。

AnimationClip 的 events 包含了此动画所有的事件描述，每个事件描述都具有以下属性：

{
    frame: number;
    func: string;
    params: any[];
}

• frame 表示事件触发的时间点，单位为秒。例如 0.618 就表示当动画到达第 0.618 秒时将触发事件。
• func 表示事件触发时回调的方法名称。事件触发时，会 在当前节点的所有组件上搜索 名为 func 的方法，一旦找到，将 params 传递给它并调用。

以下代码演示了这一过程：

import { Animation, Component } from "cc";
class MyScript extends Component {
    constructor() {

    }

    public start() {
        const animationComponent = this.node.getComponent(Animation);
        if (animationComponent && animationComponent.defaultClip) {
            const { defaultClip } = animationComponent;
            defaultClip.events.push({
                frame: 0.5, // 第 0.5 秒时触发事件
                func: 'onTriggered', // 事件触发时调用的函数名称
                params: [ 0 ], // 向 `func` 传递的参数
            });
            defaultClip.updateEventDatas();
        }
    }

    public onTriggered(arg: number) {
        console.log('I am triggered!');
    }
}

以上代码表示 MyScript 脚本组件所在节点的动画组件的默认动画剪辑在进行到第 0.5 秒时，将调用 MyScript 组件的 test() 方法并传递参数 0。

6.SkeletalAnimation.EventType

    @property({
        type: SkeletalAnimation,
        tooltip: ""
    })
    public skAni: SkeletalAnimation = null!;

    public playAni(aniName: string, repeatCount = 0) {
        if (this.skAni) {
            //this.skAni.getState(aniName).wrapMode = AnimationClip.WrapMode.Normal;
            //this.skAni.getState(aniName).repeatCount = 1;
            //this.skAni.getState(aniName).speed = 2;
            this.skAni.play(aniName);
        }
    }
    private xxx(type: string, state: SkeletalAnimationState) {
        console.log("xxxxxxxxxxxxxxxxxxxxxxxxxxx", type, state.name, state.wrapMode, state.repeatCount);
    }

    private finished(type: string, state: SkeletalAnimationState) {
        console.log("finishedfinishedfinished", type, state.name, state.wrapMode, state.repeatCount);

    }

    onEnable() {
        if (this.skAni) {
            //假如动画循环次数大于 1，当动画播放到最后一帧时触发
            this.skAni.on(SkeletalAnimation.EventType.LASTFRAME, this.xxx, this, true);
            //动画完成播放时触发
            this.skAni.on(SkeletalAnimation.EventType.FINISHED, this.finished);
        }
    }

    onDisable() {
        if (this.skAni) {
            this.skAni.off(SkeletalAnimation.EventType.LASTFRAME, this.xxx, this);
            this.skAni.off(SkeletalAnimation.EventType.FINISHED, this.finished);
        }
    }

这里注意，如果是单次播放，是侦听不到LASTFRAME的，只有FINISHED。
on<TFunction extends (...any: any[]) => void>(type: __private.cocos_core_animation_animation_state_EventType, callback: TFunction, thisArg?: any, once?: boolean): TFunction;

once<TFunction extends (...any: any[]) => void>(type: __private.cocos_core_animation_animation_state_EventType, callback: TFunction, thisArg?: any): TFunction;

creator3d的animation有bug
你好。关于动画事件，如果希望监听动画最后一帧播放完成的事件，应该监听AnimationComponent.EventType.LASTFRAME 而非 AnimationComponent.EventType.FINISHED：

const animationComponent = this.node.getComponent(AnimationComponent);
// 推荐的做法：
const state = animationComponent.getState('mixamo.com');
animationComponent.on(AnimationComponent.EventType.LASTFRAME, (type, state) => {
    console.log(`State finished.`);
});

AnimationComponent.EventType.FINISHED 仅当动画停止之后才会触发，这包括：
当动画仅播放一次并且播放到自然停止时。

creator3.0的动画事件注册去哪了
https://docs.cocos.com/creator/3.0/api/zh/enums/animation.eventtype.html#finished

五、fbx gltf

1.复用你的模型资源——unity 的 gltf 导出插件

gltf 是一种新型并且迅速发展的资源格式，也是 Cocos Creator 3D 支持的主要标准格式，所以在 Cocos Creator 3D 使用的资源最好是 gltf，这样可以得到最大的支持力度。

2.3.0 使用gltf与fbx格式模型 构建后对比包体

如何在页面极速渲染3D模型

3.【官方人员请进来】对ccc3.0里关于3D模型的若干建议

动态加载 gltf 下的资源和动态加载其他资源都是一样的，先把 gltf 放在 resources 目录或者 asset bundle 目录，然后用 resources.load 或者 loader.loadRes 传入路径进行加载，路径指定到 gltf 或者 fbx 下对应的 mesh, skeleton, anim 就行，类似

resources.load('ch_pc_hou_oo4/ch_pc_hou_004_jiao', cc.Mesh, (err, mesh) => { });