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

缺乏、安全感 2022-08-02 07:09 187阅读 0赞

## 新增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方法外，我们还新增了下面这些方法。

<table style="border-collapse:collapse; border-spacing:0px; margin-top:0px; margin-bottom:16px; display:block; width:858px; overflow:auto; word-break:normal; color:rgb(51,51,51); font-family:'Helvetica Neue',Helvetica,'Segoe UI',Arial,freesans,sans-serif; font-size:16px; line-height:25.6000003814697px"> 
 <thead> 
  <tr style="border-top-width:1px; border-top-style:solid; border-top-color:rgb(204,204,204)"> 
   <th style="padding:6px 13px; border:1px solid rgb(221,221,221)">旧的调用用法</th> 
   <th style="padding:6px 13px; border:1px solid rgb(221,221,221)">对应的新方法</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr style="border-top-width:1px; border-top-style:solid; border-top-color:rgb(204,204,204)"> 
   <td style="padding:6px 13px; border:1px solid rgb(221,221,221)">cc.Repeat.create(action, num)</td> 
   <td style="padding:6px 13px; border:1px solid rgb(221,221,221)">action.repeat(num)</td> 
  </tr> 
  <tr style="border-top-width:1px; border-top-style:solid; border-top-color:rgb(204,204,204); background-color:rgb(248,248,248)"> 
   <td style="padding:6px 13px; border:1px solid rgb(221,221,221)">cc.RepeatForever.create(action)</td> 
   <td style="padding:6px 13px; border:1px solid rgb(221,221,221)">action.repeatForever()</td> 
  </tr> 
  <tr style="border-top-width:1px; border-top-style:solid; border-top-color:rgb(204,204,204)"> 
   <td style="padding:6px 13px; border:1px solid rgb(221,221,221)">cc.Speed.create(action, speed)</td> 
   <td style="padding:6px 13px; border:1px solid rgb(221,221,221)">action.speed(speed)</td> 
  </tr> 
  <tr style="border-top-width:1px; border-top-style:solid; border-top-color:rgb(204,204,204); background-color:rgb(248,248,248)"> 
   <td style="padding:6px 13px; border:1px solid rgb(221,221,221)">cc.Speed.setSpeed(speed)</td> 
   <td style="padding:6px 13px; border:1px solid rgb(221,221,221)">action.setSpeed(speed)</td> 
  </tr> 
  <tr style="border-top-width:1px; border-top-style:solid; border-top-color:rgb(204,204,204)"> 
   <td style="padding:6px 13px; border:1px solid rgb(221,221,221)">cc.Speed.getSpeed()</td> 
   <td style="padding:6px 13px; border:1px solid rgb(221,221,221)">action.getSpeed()</td> 
  </tr> 
  <tr style="border-top-width:1px; border-top-style:solid; border-top-color:rgb(204,204,204); background-color:rgb(248,248,248)"> 
   <td style="padding:6px 13px; border:1px solid rgb(221,221,221)">cc.EaseIn.create(action, rate)</td> 
   <td style="padding:6px 13px; border:1px solid rgb(221,221,221)">action.easing(cc.easeIn(rate))</td> 
  </tr> 
  <tr style="border-top-width:1px; border-top-style:solid; border-top-color:rgb(204,204,204)"> 
   <td style="padding:6px 13px; border:1px solid rgb(221,221,221)">cc.EaseOut.create(action, rate)</td> 
   <td style="padding:6px 13px; border:1px solid rgb(221,221,221)">action.easing(cc.easeOut(rate))</td> 
  </tr> 
  <tr style="border-top-width:1px; border-top-style:solid; border-top-color:rgb(204,204,204); background-color:rgb(248,248,248)"> 
   <td style="padding:6px 13px; border:1px solid rgb(221,221,221)">cc.EaseInOut.create(action, rate)</td> 
   <td style="padding:6px 13px; border:1px solid rgb(221,221,221)">action.easing(cc.easeInOut(rate))</td> 
  </tr> 
  <tr style="border-top-width:1px; border-top-style:solid; border-top-color:rgb(204,204,204)"> 
   <td style="padding:6px 13px; border:1px solid rgb(221,221,221)">cc.EaseExponentialIn.create(action)</td> 
   <td style="padding:6px 13px; border:1px solid rgb(221,221,221)">action.easing(cc.easeExponentialIn())</td> 
  </tr> 
  <tr style="border-top-width:1px; border-top-style:solid; border-top-color:rgb(204,204,204); background-color:rgb(248,248,248)"> 
   <td style="padding:6px 13px; border:1px solid rgb(221,221,221)">cc.EaseExponentialOut.create(action)</td> 
   <td style="padding:6px 13px; border:1px solid rgb(221,221,221)">action.easing(cc.easeExponentialOut())</td> 
  </tr> 
  <tr style="border-top-width:1px; border-top-style:solid; border-top-color:rgb(204,204,204)"> 
   <td style="padding:6px 13px; border:1px solid rgb(221,221,221)">cc.EaseExponentialInOut.create(action)</td> 
   <td style="padding:6px 13px; border:1px solid rgb(221,221,221)">action.easing(cc.easeExponentialInOut())</td> 
  </tr> 
  <tr style="border-top-width:1px; border-top-style:solid; border-top-color:rgb(204,204,204); background-color:rgb(248,248,248)"> 
   <td style="padding:6px 13px; border:1px solid rgb(221,221,221)">cc.EaseSineIn.create(action)</td> 
   <td style="padding:6px 13px; border:1px solid rgb(221,221,221)">action.easing(cc.easeSineIn())</td> 
  </tr> 
  <tr style="border-top-width:1px; border-top-style:solid; border-top-color:rgb(204,204,204)"> 
   <td style="padding:6px 13px; border:1px solid rgb(221,221,221)">cc.EaseSineOut.create(action)</td> 
   <td style="padding:6px 13px; border:1px solid rgb(221,221,221)">action.easing(cc.easeSineOut())</td> 
  </tr> 
  <tr style="border-top-width:1px; border-top-style:solid; border-top-color:rgb(204,204,204); background-color:rgb(248,248,248)"> 
   <td style="padding:6px 13px; border:1px solid rgb(221,221,221)">cc.EaseSineInOut.create(action)</td> 
   <td style="padding:6px 13px; border:1px solid rgb(221,221,221)">action.easing(cc.easeSineInOut())</td> 
  </tr> 
  <tr style="border-top-width:1px; border-top-style:solid; border-top-color:rgb(204,204,204)"> 
   <td style="padding:6px 13px; border:1px solid rgb(221,221,221)">cc.EaseElasticIn.create(action)</td> 
   <td style="padding:6px 13px; border:1px solid rgb(221,221,221)">action.easing(cc.easeElasticIn())</td> 
  </tr> 
  <tr style="border-top-width:1px; border-top-style:solid; border-top-color:rgb(204,204,204); background-color:rgb(248,248,248)"> 
   <td style="padding:6px 13px; border:1px solid rgb(221,221,221)">cc.EaseElasticOut.create(action)</td> 
   <td style="padding:6px 13px; border:1px solid rgb(221,221,221)">action.easing(cc.easeElasticOut())</td> 
  </tr> 
  <tr style="border-top-width:1px; border-top-style:solid; border-top-color:rgb(204,204,204)"> 
   <td style="padding:6px 13px; border:1px solid rgb(221,221,221)">cc.EaseElasticInOut.create(action, rate)</td> 
   <td style="padding:6px 13px; border:1px solid rgb(221,221,221)">action.easing(cc.easeElasticInOut(rate))</td> 
  </tr> 
  <tr style="border-top-width:1px; border-top-style:solid; border-top-color:rgb(204,204,204); background-color:rgb(248,248,248)"> 
   <td style="padding:6px 13px; border:1px solid rgb(221,221,221)">cc.EaseBounceIn.create(action)</td> 
   <td style="padding:6px 13px; border:1px solid rgb(221,221,221)">action.easing(cc.easeBounceIn())</td> 
  </tr> 
  <tr style="border-top-width:1px; border-top-style:solid; border-top-color:rgb(204,204,204)"> 
   <td style="padding:6px 13px; border:1px solid rgb(221,221,221)">cc.EaseBounceOut.create(action)</td> 
   <td style="padding:6px 13px; border:1px solid rgb(221,221,221)">action.easing(cc.easeBounceOut())</td> 
  </tr> 
  <tr style="border-top-width:1px; border-top-style:solid; border-top-color:rgb(204,204,204); background-color:rgb(248,248,248)"> 
   <td style="padding:6px 13px; border:1px solid rgb(221,221,221)">cc.EaseBounceInOut.create(action)</td> 
   <td style="padding:6px 13px; border:1px solid rgb(221,221,221)">action.easing(cc.easeBounceInOut())</td> 
  </tr> 
  <tr style="border-top-width:1px; border-top-style:solid; border-top-color:rgb(204,204,204)"> 
   <td style="padding:6px 13px; border:1px solid rgb(221,221,221)">cc.EaseBackIn.create(action)</td> 
   <td style="padding:6px 13px; border:1px solid rgb(221,221,221)">action.easing(cc.easeBackIn())</td> 
  </tr> 
  <tr style="border-top-width:1px; border-top-style:solid; border-top-color:rgb(204,204,204); background-color:rgb(248,248,248)"> 
   <td style="padding:6px 13px; border:1px solid rgb(221,221,221)">cc.EaseBackOut.create(action)</td> 
   <td style="padding:6px 13px; border:1px solid rgb(221,221,221)">action.easing(cc.easeBackOut())</td> 
  </tr> 
  <tr style="border-top-width:1px; border-top-style:solid; border-top-color:rgb(204,204,204)"> 
   <td style="padding:6px 13px; border:1px solid rgb(221,221,221)">cc.EaseBackInOut.create(action)</td> 
   <td style="padding:6px 13px; border:1px solid rgb(221,221,221)">action.easing(cc.easeBackInOut())</td> 
  </tr> 
 </tbody> 
</table>

部分示例：

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][http_www.douapp.com_post_2444]

[http_www.douapp.com_post_2444]: http://www.douapp.com/post/2444