Cocos creator 3.8 支持的动画 7

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

素材类型 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 = [];
//重复播放
@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，这个节点可以跟随移动，可用于检测碰撞