Cocos Creator动画的几种创建方式

Cocos Creator动画的几种创建方式

 

1.  骨骼动画：以动画文件格式为altas json为例，在节点上面添加组件Spine Skeleton，将资源为atlas的文件直接拖进Skeleton     Data选项：注意Premultiplied Alpha的预乘参数不用勾选，关掉颜色预乘效果

                                                                

 

2. Cocos Creater添加帧动画Animation组件后，则在动画编辑器里面可以看到新建Animation Clip的选项，创建Clip,右键+号添加cc sprite frame, 直接将帧动画资源拖进下面时间帧里面，具体操作参考官方介绍视频。

                                                                    

 

3. 纯代码添加Animation Clip动画，类似于2dx, 缓存精灵帧，运行Animate，下面例子步骤是创建节点，节点添加精灵纹理，动画组件，加入帧动画，播放动画过程

/* 动态添加动画代码示例 */

var nodeTest = new cc.Node();

nodeTest.name = 'NodeTest';


var sprite = nodeTest.addComponent(cc.Sprite);

sprite.spriteFrame = new cc.SpriteFrame(cc.url.raw('resources/cubetype1.png'));


nodeTest.parent = this.node;


var animation = nodeTest.addComponent(cc.Animation);


/* 添加SpriteFrame到frames数组 */

var frames = [];

frames[0] = new cc.SpriteFrame(cc.url.raw('resources/cube1_frame1.png'));

frames[1] = new cc.SpriteFrame(cc.url.raw('resources/cube1_frame2.png'));

frames[2] = new cc.SpriteFrame(cc.url.raw('resources/cube1_frame3.png'));

frames[3] = new cc.SpriteFrame(cc.url.raw('resources/cube1_frame4.png'));

frames[4] = new cc.SpriteFrame(cc.url.raw('resources/cube1_frame5.png'));


var clip = cc.AnimationClip.createWithSpriteFrames(frames, 5);

clip.name = 'anim_boom';

clip.wrapMode = cc.WrapMode.Loop;


/* 添加关键帧事件 */

clip.events.push({

frame: 1, // 准确的时间，以秒为单位。这里表示将在动画播放到 1s 时触发事件

func: 'frameEvent', // 回调函数名称

params: [1, 'hello'] // 回调参数

});

animation.addClip(clip);

animation.play('anim_boom');

1.  

2.  

 

 

4. 最后一种序列动画也是由代码编写，由官方提供位移，缩放，变形等方式： runAction 

    eg:  this.node.runAction(cc.sequence( cc.fadeOut(1), /*cc.removeSelf(true)传true才彻底从场景中删除，false删除了节点引用 还是存在于场景中 */ cc.callFunc(this.callBack,this, {hello:'world'})));

callBack:function(targetNode, arg){ // targetNode是this.node  arg是{hello:'world'} }