iOS_31_cocos2d_CCAction

CCAction的反转reverse方法,仅适合By结尾的动作



不同于CCActionSequence的one after another

CCActionSpawn是同时运行多个Action,in parallel



CCAction【动作】就是行为

在特定时间内完成移动、缩放、旋转等操作的行为，

CCNode可以通过runAction方法【执行动作】来实现动画效果，

动作的每个子类都封装了不同的动作效果。

CCAction的继承结构图



另外两个非常重要的子类是：

瞬时动作(CCActionInstant)和间隔动作(CCActionInterval)，

它们又包含了非常多的子类，每一个子类都对应该着一种具体的动作【也可看也是运动、动画】

注意CCAction和CCFiniteTimeAction是抽象类，

只定义了一些基本属性和方法，

实际使用时，要创建其子类动作，

然后调用CCNode的runAction方法，执行需要的动作、动画、运动。

间隔动作、又称耗时动作，指动作的完成要消耗一定的时间片

需要经过一段时间才能完成的一些动作，

所有的间隔动作都继承自CCActionInterval。

比如CCActionRotateBy、CCActionRotateTo、CCActionMoveBy、CCActionMoveTo，可以在指定时间内旋转指定的角度

注意：By是相对量，To是绝对量

<span style="font-size:18px;">// 1秒内顺时针旋转360°
CCActionRotateBy *rotate = [CCActionRotateBy actionWithDuration:1 angle:360];
[sprite runAction:rotate];</span>

间隔动作的继承结构图：（cocos2d  V3版类名已经全改为CCAction开头）









常见的CCActionInterval的子类：

1.CCActionBlink

闪烁效果

<span style="font-size:18px;">// 5秒内闪烁20次
CCActionBlink *blink = [CCActionBlink actionWithDuration:5 blinks:20];
[sprite runAction:blink];</span>

2.CCActionMoveBy和CCActionMoveTo

CCActionMoveBy是移动一段固定的距离(相对的距离)，

CCActionMoveTo是移动到指定的位置(绝对目标位置)

<span style="font-size:18px;">// 在1秒内，向右移动100单位，同时向上移动80单位
CCActionMoveBy *moveBy = [CCActionMoveBy actionWithDuration:1 position:ccp(100, 80)];</span>

<span style="font-size:18px;">// 在1秒内，从节点的当前位置移动到笛卡尔坐标系中(100, 80)这个位置
CCActionMoveTo *moveTo = [CCActionMoveTo actionWithDuration:1 position:CGPointMake(100, 80)];</span>

3.CCActionRotateBy和CCActionRotateTo

CCActionRotateBy是在当前旋转角度的基础上再旋转固定的角度，

CCActionRotateTo是从当前旋转角度旋转到指定的角度

假设精灵在初始化的时候已经CW clockwise顺时针旋转了45° degree

<span style="font-size:18px;">sprite.rotation = 45;</span>

如果使用了CCActionRotateBy

<span style="font-size:18px;">CCActionRotateBy *rotateBy = [CCActionRotateBy actionWithDuration:1 angle:90];
[sprite runAction:rotateBy];

// 在1秒内，顺时针旋转90°，那么sprite的最终旋转角度是45° + 90° = 135°</span>

如果使用了CCActionRotateTo

<span style="font-size:18px;">CCActionRotateTo *rotateTo = [CCActionRotateTo actionWithDuration:1 angle:90];
[sprite runAction:rotateTo];

// 在1秒内，顺时针只要旋转45</span><span style="font-size: 18px; font-family: Arial, Helvetica, sans-serif;">°，就可以转</span><span style="font-size: 18px;">到90°了，因为指定了sprite的最终旋转角度就是90°</span>

4.CCActionScaleBy和CCActionScaleTo

CCActionScaleBy是在当前缩放比例的基础上再缩放一定的比例，

CCActionScaleTo是从当前缩放比例缩放到指定的比例 （相对于原始大小）

假设精灵在初始化的时候的缩放比例为0.8

<span style="font-size:18px;">sprite.scale = 0.8;</span>

如果使用了CCActionScaleBy

<span style="font-size:18px;">CCActionScaleBy *scaleBy = [CCActionScaleBy actionWithDuration:1 scale:0.5];
[sprite runAction:scaleBy];
// 在1秒内，宽度和高度再缩小50%，那么相对于原始大小，sprite最终缩放比例是0.8 * 0.5 = 0.4</span>

如果使用了CCActionScaleTo

<span style="font-size:18px;">CCActionScaleTo *scaleTo = [CCActionScaleTo actionWithDuration:1 scale:0.5];
[sprite runAction:scaleTo];
// 在1秒内，宽度和高度缩小为0.5倍，那么sprite最终缩放比例是就0.5</span>

5.CCActionFadeIn和CCActionFadeOut和CCActionFadeTo

CCActionFadeIn是淡入，即由暗转亮，从没有到有；

CCActionFadeOut是淡出，即由亮转暗，从有到没有；

CCActionFadeTo用来修改Node的opacity不透明度  

opacity  255为完全不透明,即完全可见

<span style="font-size:18px;">// 在2秒内，从没有到有
CCActionFadeIn *fadeIn = [CCActionFadeIn actionWithDuration:2];

// 在2s内，从有到没有
CCActionFadeOut *fadeOut = [CCActionFadeOut actionWithDuration:2];

// 在2s内，不透明度变为120，即变为半透明 （不透明度opacity取值范围是0-255）
CCActionFadeTo *fadeTo = [CCActionFadeTo actionWithDuration:2 opacity:120];</span>

6.CCActionRepeat

重复执行某个动作，可以指定重复的次数

<span style="font-size:18px;">// 1秒中顺时针旋转360°
CCActionRotateBy *rotateBy = [CCActionRotateBy actionWithDuration:1 angle:360];
// 重复执行2次旋转动画
CCActionRepeat *repeat = [CCActionRepeat actionWithAction:rotateBy times:2];

[sprite runAction:repeat];</span>

6、CCActionRepeatForever

CCActionRepeatForever直接继承自CCAction，
可以不停地运行某个间隔动作(CCActionInterval)。
如果你想让精灵不停地旋转，可以这样写：

// 1秒内顺时针旋转360°
CCActionRotateBy *rotate = [CCActionRotateBy actionWithDuration:1 angle:360];
// 使用CCActionRepeatForever重复CCActionRotateBy动作
CCActionRepeatForever *repeat = [CCActionRepeatForever actionWithAction:rotate];
[sprite runAction:repeat];

也能够利用CCActionRepeatForever重复一个动作序列(CCActionSequence)

// 变为红色
CCActionTintTo *tintTo1 = [CCActionTintTo actionWithDuration:1 red:255 green:0 blue:0];
// 变为绿色
CCActionTintTo *tintTo2 = [CCActionTintTo actionWithDuration:1 red:0 green:255 blue:0];
// 变为蓝色
CCActionTintTo *tintTo3 = [CCActionTintTo actionWithDuration:1 red:0 green:0 blue:255];
CCActionSequence *sequence = [CCActionSequence actions:tintTo1, tintTo2, tintTo3, nil];

CCActionRepeatForever *repeat = [CCActionRepeatForever actionWithAction:sequence];

[sprite runAction:repeat];

你会发现精灵的颜色状态是：红 -> 绿 -> 蓝 -> 红 -> 绿 -> 蓝 -> 红 ...，
一直在红绿蓝3种颜色之间按顺序切换

7、CCActionSpeed

CCActionSpeed也是直接继承自CCAction，

可以影响间隔动作(继承自CCActionInterval的动作)的运行速度。

<span style="font-size: 18px;">// 1秒内顺时针旋转360°
CCActionRotateBy *rotate = [CCActionRotateBy actionWithDuration:1 angle:360];
// 速度变为原来的一半
CCActionSpeed *speed = [CCActionSpeed actionWithAction:rotate speed:0.5];
[sprite runAction:speed];</span>

本来1秒就完成旋转的，设置speed为0.5后，就需要2秒才能完成旋转

8.CCActionSequence

一般情况下，如果给节点同时添加几个动作时，它们会同时运行。
比如下面的代码效果是一边旋转一边缩放

<span style="font-size: 18px;">CCActionRotateBy *rotateBy = [CCActionRotateBy actionWithDuration:1 angle:360];
CCActionScaleBy *scaleBy = [CCActionScaleBy actionWithDuration:1 scale:2];

[sprite runAction:rotateBy];
[sprite runAction:scaleBy];</span>

但是，有时候我们想执行链式运动(one after another)，

即让一个动作接着另一个运行完成后再运行，

那么就要用到CCActionSequence
下面演示的效果是，让精灵先变为红色，再从红色变为绿色，再从绿色变为蓝色

<span style="font-size: 18px;">CCActionTintTo *tintTo1 = [CCActionTintTo actionWithDuration:1 red:255 green:0 blue:0];
CCActionTintTo *tintTo2 = [CCActionTintTo actionWithDuration:1 red:0 green:255 blue:0];
CCActionTintTo *tintTo3 = [CCActionTintTo actionWithDuration:1 red:0 green:0 blue:255];
// CCActionTintTo也是CCActionInterval的子类，可以用于更改精灵的颜色。

CCActionSequence *sequence = [CCActionSequence actions:tintTo1, tintTo2, tintTo3, nil];
[sprite runAction:sequence];</span>

CCActionSequence会按顺序执行参数中传入的所有动作,
one after another

9.CCActionEase

当对节点使用CCActionMoveTo动作时，它会匀速移动到目的地，

如果使用CCActionEase就可以使节点由慢到快或者由快到慢地移向目的地。

因此CCActionEase是用来改变动作的运行时速度的。

CCActionEase是个非常强大的类，子类非常多，这里只说明其中的几个：

CCActionEaseIn：由慢到快

CCActionEaseOut：由快到慢

CCActionEaseInOut：先由慢到快，再由快到慢



例如：

<span style="font-size: 18px;">CCActionMoveTo *moveTo = [CCActionMoveTo actionWithDuration:4 position:ccp(300, 200)];
CCActionEaseInOut *easeInOut = [CCActionEaseInOut actionWithAction:moveTo rate:5];
[sprite runAction:easeInOut];</span>

将会看到精灵先由慢到快，再由快到慢。

rate参数决定了速率变化的明显程度，当它大于1时才有效

12、瞬时动作（前面全是interval耗时动作）

瞬时动作(CCActionInstant)是指能够瞬间完成的动作，

可用于改变节点位置、翻转节点形成镜像、设置节点的可视性等。

下面大致看下瞬时动作的继承结构图:



设置节点的visible属性可代替使用

CCActionShow、CCActionHide、CCActionToggleVisibility

修改节点的position属性可代替使用CCActionPlace

实际上，只有当它们常常与CCActionSequence结合使用

比如，想先让节点运行CCActionMoveTo移动到某个位置，

移动完毕后再隐藏节点，

这时候我们就可以将CCActionMoveTo、CCActionHide两个动作

按顺序放进CCActionSequence中达到想要的效果。

<span style="font-size: 18px;">// 移动到(300, 200)
CCActionMoveTo *moveTo = [CCActionMoveTo actionWithDuration:2 position:ccp(300, 200)];
// 隐藏节点
CCActionHide *hide = [CCActionHide action];

CCActionSequence *sequence = [CCActionSequence actions:moveTo, hide, nil];

[sprite runAction:sequence];</span>

有时候，在一个动作序列(CCActionSequence)里面，

需要在一个动作运行完毕后，

先调用某个方法执行一些操作，

然后再执行下一个动作。

那就可以结合CCActionCallBlock、CCActionCallFunc和CCActionSequence完成这个功能。

比如，让精灵先变为红色，再从红色变为绿色，再从绿色变为蓝色，

而且在每次变换颜色后都调用某个方法执行一些操作：

<span style="font-size: 18px;">// 变为红色
CCActionTintTo *tintTo1 = [CCActionTintTo actionWithDuration:2 red:255 green:0 blue:0];
// 变为红色后调用self的turnRed方法
CCActionCallFunc *fn1 = [CCActionCallFunc actionWithTarget:self selector:@selector(turnRed)];

// 变为绿色
CCActionTintTo *tintTo2 = [CCActionTintTo actionWithDuration:2 red:0 green:255 blue:0];
// 变为绿色后调用self的turnGreen:方法，参数是运行当前动作的节点
CCActionCallFunc *fn2 = [CCActionCallFunc actionWithTarget:self selector:@selector(turnGreen:)];

// 变为蓝色
CCActionTintTo *tintTo3 = [CCActionTintTo actionWithDuration:2 red:0 green:0 blue:255];
// 变为蓝色后调用self的turnBlue:方法，参数是运行当前动作的节点
CCActionCallFunc *fn3 = [CCActionCallFunc actionWithTarget:self selector:@selector(turnBlue:) ];

// 最后调用turnDone:方法
CCActionCallFunc *fn4 = [CCActionCallFunc actionWithTarget:self selector:@selector(turnDone:) ];

CCActionSequence *sequence = [CCActionSequence actions:tintTo1, fn1, tintTo2, fn2, tintTo3, fn3, fn4, nil];
[sprite runAction:sequence];
</span>

下面是回调方法的实现：

<span style="font-size: 18px;">- (void)turnRed {
NSLog(@"变为红色");
}

// node是运行当前动作的节点
- (void)turnGreen:(id)node {
NSLog(@"变为绿色：%@", node);
}

// node是运行当前动作的节点
- (void)turnBlue:(id)node  {
NSLog(@"变为蓝色，%@", node);
}

- (void)turnDone:(id)node {
NSLog(@"变换完毕：%@", node);
}</span>

你会发现，精灵变为红色后就会调用turnRed方法，

变为绿色后会调用turnGreen:方法，

变为蓝色后会先调用turnBlue:方法，

最后调用turnDone:方法

13、CCActionAnimate

按顺序地播放图片，可以实现帧动画。

例如有下面10张图片：





如果从1.png 到 10.png按顺序显示图片的话会形成一个GIF动画

下面用CCActionAnimate实现动画效果

<span style="font-size:18px;">
// 创建精灵,并居中【千万要记得addChild】
_sprite = [CCSprite spriteWithImageNamed:@"1.png"];
_sprite.position  = ccp(self.contentSize.width/2,self.contentSize.height/2);
// 用来存放所有的帧
NSMutableArray *frames = [NSMutableArray array];
// 加载所有的图片
for (int i = 1; i<= 10; i++) {
// 1、拼接图片名
NSString *name = [NSString stringWithFormat:@"%i.png", i];
// 2、根据图片名（或全路径）生成纹理，一个图片对应一个纹理对象
CCTexture *texture = [CCTexture textureWithFile:name];
CGRect retct = CGRectMake(0, 0, texture.contentSize.width, texture.contentSize.height);
// 3、根据纹理创建一个精灵帧
CCSpriteFrame *frame = [[CCSpriteFrame alloc]initWithTexture:texture rectInPixels:retct rotated:NO offset:ccp(0, 0) originalSize:retct.size];
// 4、添加精灵帧 到 精灵帧数组中
[frames addObject:frame];
}
// 根据【精灵帧数组】创建CCAnimation，参数：每隔0.1秒播放下一张图片
CCAnimation *animation = [CCAnimation animationWithSpriteFrames:frames delay:0.1];

// 根据CCAnimation对象 创建 动作
CCActionAnimate *animate = [CCActionAnimate actionWithAnimation:animation];
CCActionRepeatForever *forever = [CCActionRepeatForever actionWithAction:animate];
[_sprite runAction:forever];
// 重要~~~必须成为场景的子Node
[self addChild:_sprite];
</span>

动画效果如下：





这里是将10帧分为10张不同的png图片。

为了性能着想，其实最好将10帧打包成一个图片，

到时根据plist文件中的坐标参数，从这张图片上面切割每一帧需要的图片，

这种图片我们可以称为"纹理相册"，

可以用TexturePacker软件制作纹理相册