【cocos2d-js官方文档】五、Cocos2d-JS v3.0的新Action API

新增action中的方法

曾经,当我们须要反复一个action的时候,我们须要:

sprite.runAction(cc.Repeat.create(action, 2));

上面代码中创建了一个新的Repeat对象又一次包装action,这样无论在语义上还是代码上都比較难理解。 为什么我们不能像jQuery一样的简单方便的使用原action呢?

于是我们在新版本号中为action添加了新的方法:

sprite.runAction(action.repeat(2));

要循环action仅仅须要在action后面添加.repeat(),而不须要和曾经一样又一次生成一个action,是不是更加方便了? ^.^

另外,我们还针对action的相关类,添加了更加简单的创建方法,通过类名第一个字母改为小写就能创建出一个新的对象:

 var action = cc.moveBy(2,cc.p(10,10));

上面代码等同于:

var action =  cc.MoveBy.create(2, cc.p(10, 10))

看到这里,大家一定非常操心一件事儿~兼容性。。。

事实上,大家不必太过于操心,旧的方法依然是被支持滴。

为什么要新增API

刚刚提到了怎么调用新的方法,可是为什么我们在现有一套比較成熟的方案下还是在新版本号中增加了新的方法呢?

事实上这一切都是为了更简单,更符合大家的使用习惯,以及让代码看起来更加清晰明了。

链式语法使得我们能够仅仅要生成一个对象,然后就能够通过调用对象的不同方法实现各种功能:

var action = cc.RotateTo.create(0.5, 90).repeat(5).speed(0.5);

或者:

var action = cc.RotateTo.create(0.5, 90);
action.repeat(5);
action.speed(0.5);

即使是全然没有接触过cocos2d-html5的用户,也能在第一时间看懂这段代码 - 创建一个action,然后针对这个action设置反复次数以及运行速度。

我们来对照旧的方法:

var action = cc.RotateTo.create(0.5, 90);
var action1 = cc.Repeat.create(action, 2);
var action2 = cc.Speed.create(action1, 0.5);

旧的方法生成了3个对象,并且造成了代码上的轻微污染。在阅读性和书写效率上都不如新的方法来的实在。

另外由于不再须要又一次生成冗余的对象了,所以在初始化速度上也有一点点的提升。

所以尽管新版本号依然支持老方法,可是我们还是建议大家依照新的方式来书敲代码。

新增API列表

除了上面提到的repeat以及speed方法外,我们还新增了以下这些方法。

旧的调用使用方法 相应的新方法
cc.Repeat.create(action, num) action.repeat(num)
cc.RepeatForever.create(action) action.repeatForever()
cc.Speed.create(action, speed) action.speed(speed)
cc.Speed.setSpeed(speed) action.setSpeed(speed)
cc.Speed.getSpeed() action.getSpeed()
cc.EaseIn.create(action, rate) action.easing(cc.easeIn(rate))
cc.EaseOut.create(action, rate) action.easing(cc.easeOut(rate))
cc.EaseInOut.create(action, rate) action.easing(cc.easeInOut(rate))
cc.EaseExponentialIn.create(action) action.easing(cc.easeExponentialIn())
cc.EaseExponentialOut.create(action) action.easing(cc.easeExponentialOut())
cc.EaseExponentialInOut.create(action) action.easing(cc.easeExponentialInOut())
cc.EaseSineIn.create(action) action.easing(cc.easeSineIn())
cc.EaseSineOut.create(action) action.easing(cc.easeSineOut())
cc.EaseSineInOut.create(action) action.easing(cc.easeSineInOut())
cc.EaseElasticIn.create(action) action.easing(cc.easeElasticIn())
cc.EaseElasticOut.create(action) action.easing(cc.easeElasticOut())
cc.EaseElasticInOut.create(action, rate) action.easing(cc.easeElasticInOut(rate))
cc.EaseBounceIn.create(action) action.easing(cc.easeBounceIn())
cc.EaseBounceOut.create(action) action.easing(cc.easeBounceOut())
cc.EaseBounceInOut.create(action) action.easing(cc.easeBounceInOut())
cc.EaseBackIn.create(action) action.easing(cc.easeBackIn())
cc.EaseBackOut.create(action) action.easing(cc.easeBackOut())
cc.EaseBackInOut.create(action) action.easing(cc.easeBackInOut())

部分演示样例:

EaseIn:
var move = cc.MoveBy.create(2, cc.p(winSize.width - 80, 0)).easing(cc.easeIn(2.0));
sprite.runAction(move);

RepeatForever:
var move = cc.MoveBy.create(2, cc.p(winSize.width - 80, 0)).RepeatForever();
sprite.runAction(move);

注意事项

反复对一个action对象使用两次repeat/speed方法,运行结果为设置值相乘。

var action = cc.RotateTo.create(0.5, 90);

//speed为6
action.speed(2).speed(3);
action.getSpeed() ==> 6;

//repeat次数为6

action.repeat(2).repeat(3);

转载请注明:http://www.douapp.com/post/2444

你可能感兴趣的:(cocos2d-js)