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');

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'} }
————————————————
版权声明：本文为CSDN博主「木的感情的杀手」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/tom_and_jerry_zhao/article/details/80195523