Cocos2d-js 使用cc.Animation实现跑酷

最新推荐文章于 2019-04-24 11:04:00 发布

alex8046

最新推荐文章于 2019-04-24 11:04:00 发布

阅读量3.2k

点赞数

分类专栏： Cocos2d-js 文章标签： Cocos2d-js Animation

Cocos2d-js 专栏收录该内容

68 篇文章 1 订阅

订阅专栏

首先，了解一下cc.Animation作用是什么，它是在cc.Sprite对象展示动画时使用的一个cc.Animation对象。

构造方法：

cc.Animation(frames, delay, loops)

在cc.Sprite对象展示动画时使用的一个cc.Animation对象.

cc.Animation对象包括cc.SpriteFrame对象和两帧之间的时间.

你可以使用cc.Animate动作动画化cc.Animation 对象.

 
        // 1. 创建一个空的动画帧 
       
        var  
        animation1 =  
        new  
        cc.Animation(); 
       
        // 2. 分别使用精灵帧、延续时长、循环次数来创建动画 
       
        var  
        spriteFrames = []; 
       
        var  
        frame = cc.spriteFrameCache.getSpriteFrame( 
        "grossini_dance_01.png" 
        ); 
       
        spriteFrames.push(frame); 
       
        var  
        animation1 =  
        new  
        cc.Animation(spriteFrames); 
       
        var  
        animation2 =  
        new  
        cc.Animation(spriteFrames, 0.2); 
       
        var  
        animation2 =  
        new  
        cc.Animation(spriteFrames, 0.2, 2); 
       
        // 3. 分别使用动画帧、延续时长、循环次数来创建动画 
       
        var  
        animationFrames = []; 
       
        var  
        frame =   
        new  
        cc.AnimationFrame(); 
       
        animationFrames.push(frame); 
       
        var  
        animation1 =  
        new  
        cc.Animation(animationFrames); 
       
        var  
        animation2 =  
        new  
        cc.Animation(animationFrames, 0.2); 
       
        var  
        animation3 =  
        new  
        cc.Animation(animationFrames, 0.2, 2); 
       
        // 通过动画来创建一个action 
       
        var  
        action = cc.animate(animation1); 
       
        // 运行动画 
       
        sprite.runAction(action);

常用的属性和方法介绍：

addSpriteFrame(frame)

新增一个动画帧，该帧默认为一个延时单位，总的动画帧长也增加一个延时单位

addSpriteFrameWithFile(fileName)

使用图片的文件名新增一个精灵帧. 其内部会创建一个cc.SpriteFrame并添加它，该动画帧将自动添加一个延时单位

addSpriteFrameWithTexture(texture, rect)

通过texture和rect来创建一个精灵帧. 其内部会创建一个cc.SpriteFrame并添加它，该动画帧将自动添加一个延时单位

clone()

克隆当前的动画

getDelayPerUnit()

返回每一个延时单位的秒数

getDuration()

返回整个动画的持续秒数. 它的结果等于总的延时单位数 * 每一个延时单位的时长

getFrames()

返回动画帧数组

getLoops()

返回动画要循环执行的次数，0, 表示它不是一个动画. 1, 表示已经被执行过一次 ..

getRestoreOriginalFrame()

当动画完成时返回是否应该恢复原来的帧

getTotalDelayUnits()

返回cc.Animation总的延时单位数

initWithAnimationFrames(arrayOfAnimationFrames, delayPerUnit, loops)

使用精灵帧来初始化一个动画，请使用构造函数传参的方式来进行初始化，不要主动调用该方法

initWithSpriteFrames(frames, delay, loops)

通过帧与帧的一个延时来初始化cc.Animation, 但不要自己调用该方法,请使用构造函数传参的方式来初始化.

release()

目前的javaScript绑定(JSB),在一些示例中,需要使用retain和release. 这是JSB的一个bug, 比较丑陋的一种解决方法是使用 retain/release. 所以,这2个方法是为了兼容JSB. 这是一个hack,当JSB修复掉retain/release的bug后将它们将会被移除

如果你创建一个引擎对象并没有在同一帧内将它添加到场景图中,你将需要保留这个对象的引用

不然,JSB的自动释放池会认为该对象未被使用这而直接将它释放,

之后当你想使用该对象时,你将会得到一个"无效的原生对象"的错误.

retain方法通过增加一个引用计数来避免原生的对象被释放掉,

当该认为不再需要这个对象时你需要手工调用release方法,否则,将会发生内存泄露.

在游戏的开发代码中应保证retain与release方法的配对.

retain()

同上

setDelayPerUnit(delayPerUnit)

设置“延时单位”的秒数

setFrames(frames)

设置动画帧数组

setLoops(value)

设置动画要循环执行的次数，0, 表示它不是一个动画. 1, 表示已经被执行过一次

setRestoreOriginalFrame(restOrigFrame)

设置当动画播放完毕之后是否恢复成初始的帧

cc.Animation的具体应用

 
        //第一步 创建动画帧 
       
        var  
        background =  
        this 
        .bg =  
        new  
        cc.Sprite( 
        "res/bg.png" 
        ); 
       
        background.setPosition( 
        this 
        ._size.width/2, 
        this 
        ._size.height/2); 
       
        background.setScale(const_radioW,const_radioH); 
       
        this 
        .addChild(background); 
       
        this 
        ._animation =  
        new  
        cc.Animation(); 
       
        for 
        ( 
        var  
        i = 0; i < bg_tree.length; i++){ 
       
        this 
        ._animation.addSpriteFrame( 
        new  
        cc.SpriteFrame(bg_tree[i],cc.rect(0,0,background.width,background.height))); 
       
        } 
       
        //设置每一帧的延时秒数 
       
        this 
        ._animation.setDelayPerUnit(1/10); 
       
        var  
        action = cc.animate( 
        this 
        ._animation).repeatForever(); 
       
        background.runAction(action); 
       
        //第二步 加速实现 
       
        this 
        .bg.stopAllActions(); 
       
        this 
        ._animation.setDelayPerUnit(1/15); 
       
        var  
        action = cc.animate( 
        this 
        ._animation).repeatForever(); 
       
        this 
        .bg.runAction(action); 
       
        //第三步 减速实现 
       
        this 
        .bg.stopAllActions(); 
       
        this 
        ._animation.setDelayPerUnit(1/6); 
       
        var  
        action = cc.animate( 
        this 
        ._animation).repeatForever(); 
       
        this 
        .bg.runAction(action);