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

相关推荐
咔咔学姐kk几秒前
大模型微调技术宝典:Transformer架构,从小白到专家
人工智能·深度学习·学习·算法·transformer
Jayyih35 分钟前
嵌入式系统学习Day35(sqlite3数据库)
数据库·学习·sqlite
lingggggaaaa2 小时前
小迪安全v2023学习笔记(八十一讲)—— 框架安全&ThinkPHP&Laravel&Struts2&SpringBoot&CVE复现
笔记·学习·struts·安全·网络安全·laravel
CC数分3 小时前
零基础3个月上岸[特殊字符]自学数据分析路线
学习·数据挖掘·数据分析·大学生·考证
HAH-HAH3 小时前
【蓝桥杯 2024 国 Java A】粉刷匠小蓝
c++·学习·数学·算法·职场和发展·蓝桥杯·组合数学
酷讯网络_2408701603 小时前
多语言共享贩卖机投资理财共享售卖机投资理财系统
学习·开源
我是是是是是西红柿3 小时前
游戏中的展销系统使用的数据结构
数据结构·游戏
番薯大佬3 小时前
Python学习-day8 元组tuple
java·python·学习
wanzhong23334 小时前
ArcGIS学习-17 实战-密度分析
学习·arcgis
知识分享小能手4 小时前
React学习教程,从入门到精通,React 组件生命周期详解(适用于 React 16.3+,推荐函数组件 + Hooks)(17)
前端·javascript·vue.js·学习·react.js·前端框架·vue3