Cocos Creator动画的几种创建方式


Cocos Creator动画的几种创建方式


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

                                                                Cocos Creator动画的几种创建方式_第1张图片


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

                                                                Cocos Creator动画的几种创建方式_第2张图片    


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'} }

你可能感兴趣的:(JavaScript,Cocos,Creator)