CocosCreator之Animation动画组件

官方文档：动画系统 · Cocos Creator

官方文档有详细的编辑器相关操作，此处仅记录代码常用操作。

let comp_anim = this.spt_effect.node.getComponent(cc.Animation);//获取动画
comp_anim.stop();//停止播放
comp_anim.play();//播放动画
comp_anim.play("动画名字");//播放动画

播放与停止相关API：

var anim = this.getComponent(cc.Animation);
anim.play('test');// 指定播放 test 动画
anim.play();// 如果没有指定播放哪个动画，并且有设置 defaultClip 的话，则会播放 defaultClip 动画
anim.play('test', 1);// 指定从 1s 开始播放 test 动画
anim.play('test2');// 使用 play 接口播放一个动画时，如果还有其他的动画正在播放，则会先停止其他动画
anim.pause('test');// 指定暂停 test 动画
anim.pause();// 暂停所有动画
anim.resume('test');// 指定恢复 test 动画
anim.resume();// 恢复所有动画
anim.stop('test');// 指定停止 test 动画
anim.stop();// 停止所有动画
//动画信息相关
var animState = anim.play('test');
var clip = animState.clip;// 获取动画关联的 clip
var name = animState.name;// 获取动画的名字
var speed = animState.speed;// 获取动画的播放速度
var duration = animState.duration;// 获取动画的播放总时长
var time = animState.time;// 获取动画的播放时间
var repeatCount = animState.repeatCount;// 获取动画的重复次数
var wrapMode = animState.wrapMode// 获取动画的循环模式
var playing = animState.isPlaying;// 获取动画是否正在播放
var paused = animState.isPaused;// 获取动画是否已经暂停
var frameRate = animState.frameRate;// 获取动画的帧率

动画播放回调：

//cc.Animation.EventType.FINISHED
this.anim_card_huansan.on(cc.Animation.EventType.FINISHED, () => {this.node.active = false;
});

绑定多个动画时的播放回调：

this.comp_animat.on(cc.Animation.EventType.FINISHED, (type, state) => {cc.log('当前结束的动画名字:' + state._name);
})

遇到的问题：2.3及以下版本的creator.d.ts文件内没有声明此方法导致爆红，请自行添加。

on(type: string, callback: (event: Event.EventCustom) => void, target?: any, useCapture?: boolean): (event: Event.EventCustom) => void;
on<T>(type: string, callback: (event: T) => void, target?: any, useCapture?: boolean): (event: T) => void;
on(type: string, callback: (type: string, state: cc.AnimationState) => void, target?: any, useCapture?: boolean): (type: string, state: cc.AnimationState) => void;

可注册的回调事件【官方文档抄来的】：

var animation = this.node.getComponent(cc.Animation);// 注册
animation.on('play',      this.onPlay,        this);
animation.on('stop',      this.onStop,        this);
animation.on('lastframe', this.onLastFrame,   this);
animation.on('finished',  this.onFinished,    this);
animation.on('pause',     this.onPause,       this);
animation.on('resume',    this.onResume,      this);// 取消注册
animation.off('play',      this.onPlay,        this);
animation.off('stop',      this.onStop,        this);
animation.off('lastframe', this.onLastFrame,   this);
animation.off('finished',  this.onFinished,    this);
animation.off('pause',     this.onPause,       this);
animation.off('resume',    this.onResume,      this);// 对单个 cc.AnimationState 注册回调
var anim1 = animation.getAnimationState('anim1');
anim1.on('lastframe',    this.onLastFrame,      this);

实操->代码创建图片帧动画且加回调传参：

var animation = this.node.getComponent(cc.Animation);
// frames 这是一个 SpriteFrame 的数组.
var clip = cc.AnimationClip.createWithSpriteFrames(frames, 17);
clip.name = "anim_run";
clip.wrapMode = cc.WrapMode.Loop;// 添加帧事件
clip.events.push({frame: 1,               // 准确的时间，以秒为单位。这里表示将在动画播放到 1s 时触发事件func: "frameEvent",     // 回调函数名称params: [1, "hello"]    // 回调参数
});animation.addClip(clip);
animation.play('anim_run');

异步加载一个AnimationClip组件

    //播放烟雾特效PlaySmokeAnima(world_pos) {world_pos && (this.pos_smoke = world_pos);if (this.node_smoke) {let node_pos = this.node_smoke.parent.convertToNodeSpaceAR(this.pos_smoke);this.node_smoke.x = node_pos.x;this.node_smoke.y = node_pos.y + 30;this.pos_smoke = null;let comp_anim = this.node_smoke.getComponent(cc.Animation);comp_anim.stop();comp_anim.play();} else {this._InitNodeSmokeAnimation();}},//初始化烟雾动画节点--可能一次也不会用到，可能用到很多次，用时异步加载_InitNodeSmokeAnimation() {if (!this.node_smoke) {this.node_smoke = new cc.Node('node_smoke');let comp_spt = this.node_smoke.addComponent(cc.Sprite);let comp_anim = this.node_smoke.addComponent(cc.Animation);this.node_smoke.zIndex = 10;this.node_smoke.active = true;this.node.addChild(this.node_smoke);// this.node_smoke.scale = 3;//方便自己测试观察comp_anim.on(cc.Animation.EventType.FINISHED, () => {comp_spt.spriteFrame = null;});//异步加载cc.loader.loadRes("Anim/game_hu_smoke", cc.AnimationClip, (err, clip) => {if (err) return;comp_anim.addClip(clip);comp_anim['_defaultClip'] = clip;comp_anim['_currentClip'] = clip;this.PlaySmokeAnima();});}},

整理不易，关注收藏不迷路。

目录：CocosCreator经典笔记_神兽白泽-CSDN博客

笔者qq、微信：1302109196

qq群：415468592

CocosCreator之Animation动画组件相关推荐

【Flutter】Animation 动画 ( AnimatedBuilder 动画使用流程 | 创建动画控制器 | 创建动画 | 创建动画作用的组件 | 关联动画与组件 | 动画执行 )
文章目录 ◯.AnimatedBuilder 引入一.创建动画控制器二.创建动画三.创建动画作用的组件四.创建 AnimatedBuilder 关联动画与组件五.动画运行六.完整代码示例 ...
【Flutter】Animation 动画 ( AnimatedWidget 动画使用流程 | 创建动画控制器 | 创建动画 | 创建 AnimatedWidget 动画组件 | 动画运行 )
文章目录 ◯.AnimatedWidget 组件引入一.创建 AnimatedWidget 动画组件二.创建动画控制器三.创建动画四.动画运行五.完整代码示例六.相关资源 Animated ...
Unity -- Animation（旧版动画组件）和Animator(新版动画器组件)
旧版animation动画器组件如果想让一个游戏物体具有动画表现的话,我们需要给这个游戏物体挂载动画组件和音频组件视频组件一样,如果想在游戏对象上播放动画效果的话我们需要挂载一个动画组件,然后再给 ...
【Android 基础】Animation 动画介绍和实现
转载自:http://www.cnblogs.com/yc-755909659/p/4290114.html 1.Animation 动画类型 Android的animation由四种类型组成: XM ...
Flutter 动画全解析（动画四要素、动画组件、隐式动画组件原理等）
本文通过拆解 Flutter 中动画的实现方式以及原理来介绍动画实现的整个过程. 1. 动画四要素动画在各个平台的实现原理都基本相同,是在一段时间内一系列连续变化画面的帧构成的.在 Flutter ...
【Flutter】Animation 动画 ( Flutter 动画基本流程 | 创建动画控制器 | 创建动画 | 设置值监听器 | 设置状态监听器 | 布局中使用动画值 | 动画运行 )
文章目录一.创建动画控制器二.创建动画三.设置值监听器四.设置状态监听器五.布局中使用动画值六.动画运行七.完整代码示例八.相关资源 Flutter 动画基本流程 : ① 创建动画控制 ...
【Flutter】Animation 动画 ( Flutter 动画的核心类 | Animation | CurvedAnimation | AnimationController | Tween )
文章目录一.动画的核心类 Animation 二.动画的核心类 CurvedAnimation 三.动画的核心类 AnimationController 四.动画的核心类 Tween 五.相关资源 ...
【Flutter】Animation 动画 ( Flutter 动画类型 | Flutter 动画的核心类 )
文章目录一.Flutter 动画类型二.Flutter 动画的核心类三.相关资源 Flutter Animation 动画 : Flutter 动画类型为 Widget 组件添加动画为动画添 ...
CocosCreator开场CG动画制作
CocosCreator开场CG动画制作使用节点 VideoPlayer节点(在此之前需要进行链接内的操作:https://blog.csdn.net/qq135595696/article/det ...

CocosCreator之Animation动画组件

CocosCreator之Animation动画组件相关推荐

最新文章

热门文章