09、Action_1（帧与延时动作）

帧的概念

帧是动画或影响的最基本单位。每一帧是一个画面，连续的多帧画面组合在一起播放就形成了影响，就好像电影胶卷的一格。而帧频就是一秒内帧的数量，通常用fps（Frames Per Second）表示，帧频越高，画面就越流畅。

一般电影为一秒24帧，而游戏则一般以60fps作为最高帧频，因为60fps已经是人眼正常识别的最高频率了，设置再高的频率只会造成性能浪费。相反，如果游戏画面的帧频低于30fps，我们就会感觉到不流畅，也就是所谓的“卡”。游戏流畅度跟游戏的设计好坏还有手机的硬件水平都有关系。

Cocos2d-js中，也有帧频这个概念，在项目文件project.json中就有帧频的设置，一般默认是60。如下 ：

(以上文案出自Cocos2d-js游戏开发之旅)

延时动作

延时动作代表精灵由一个状态变化到另外一个状态，这个变化的过程是有一个过渡时间的。如css3的animation。

移动精灵

cc.MoveTo ：移动到绝对坐标处

cc.MoveBy ：以自身为原点，移动到对应坐标

例子

var sprite = new cc.Sprite(sprite.png);
sprite.attr({ x:0, y:0 });
this.addChild(sprite);
var moveTo = new cc.MoveTo(2, cc.p(600, 220)); //参数意义 ：过渡时间、坐标
sprite.runAction(moveTo);

跳跃

cc.JumpTo ：跳跃到绝对坐标处

cc.JumpBy ：以自身为原点，跳跃到对应坐标

例子

var sprite = new cc.Sprite(sprite.png);
sprite.attr({ x:200, y:200 });
this.addChild(sprite);	
var jumpTo = new cc.JumpTo(2, cc.p(600, 220), 50, 5); //参数意义 ：过渡时间、坐标、跳跃高度、跳跃次数
sprite.runAction(jumpTo);

缩放

cc.ScaleTo ：精灵的宽高 x 缩放值

cc.ScaleBy ：精灵的宽高 x 倍率

例子

var sprite = new cc.Sprite(sprite.png)
sprite.attr({ x:200, y:200 })
this.addChild(sprite);
var scaleTo = new cc.ScaleTo(2, 2); //参数意义 ：过渡时间，缩放值。（值<1为缩小，值=1为不缩放，值>1为放大）
sprite.runAction(scaleTo);

cc.ScaleTo与cc.ScaleBy的区别

如果精灵没有设置setScale函数或者scale属性，那么ScaleTo 与 ScaleBy并无区别。但是如果精灵设置了，则cc.ScaleTo是缩放到指定值，而cc.ScaleBy则是目前精灵的宽高x 的倍率。

例子 

//精灵1
var sprite1 = new cc.Sprite(sprite.png);
sprite1.attr({x:200, y:220});
sprite1.setScale(2.0);
this.addChild(sprite1);
var scaleTo = new cc.ScaleTo(2, 1);
sprite1.runAction(scaleTo);
//精灵2
var sprite2 = new cc.Sprite(sprite.png);
sprite2.attr({x:200, y:220});
sprite2.setScale(2.0); 
this.addChild(sprite2);
var scaleBy = new cc.ScaleBy(2, 1);
sprite2.runAction(scaleBy);

运行效果 ：

（左边是精灵1、右边是精灵2）

精灵1是缩小一倍，所以宽和高都缩小了一倍。而精灵2是以自己的宽高在乘以1倍，所以宽高并无变化。                                                                                                                 

旋转

cc.RotateTo ：旋转的时候，选择最短的路径进行旋转。所以有时候会逆时针旋转

cc.RotateBy ：永远都是顺时针旋转

例子

var sprite = new cc.Sprite(sprite.png);
sprite.attr({x:200,y:220});
this.addChild(sprite);
var rotate1 = new cc.RotateTo(2, 350);//参数意义 ：过度时间，旋转角度。（逆时针旋转，因为0°到350°最短的路径是从360°转到350°）
var rotate2 = new cc.RotateBy(2, 350);//参数意义 ：过度时间，旋转角度。（顺时针选择）
sprite.runAction(rotate2);

闪烁

cc.Blink ：闪烁 

例子

var sprite = new cc.Sprite(sprite.png);
sprite.attr({x : 200, y : 220});
this.addChild(sprite);
var bk = new cc.Blink(2, 10); //参数意义 ：过渡时间，闪烁次数
sprite.runAction(bk);

色调

cc.TintTo ：渐变到某个颜色

cc.TintBy ：以自身的颜色 + 指定的颜色， 混合到某个颜色

例子

var sprite = new cc.Sprite(sprite.png);
sprite.attr({x:200,y:220});
this.addChild(sprite);
var tintTo = new cc.TintTo (3, 255,0,0); //参数意义 ：过渡时间, R、G、B颜色值
sprite.runAction(tintTo);

渐变

cc.FadeOut  ：逐渐变得看不见

cc.FadeIn     ：逐渐变得看见，需要在精灵看不见的情况下才有用 (需要把透明度设置为0)
cc.FadeTo   ： 在一定的时间内设置精灵的透明度

例子

var sprite = new cc.Sprite(sprite.png);
sprite.attr({x:200, y:220});
this.addChild(sprite);
var fadeOut = new cc.FadeOut(3);    //参数意义 ：过渡时间 
var fadeIn = new cc.FadeIn(3);	    //参数意义 ：过渡时间
var fadeTo = new cc.FadeTo(3, 128)  //参数意义 ： 过渡时间， 透明度
sprite.runAction(fadeOut);

贝赛尔曲线动作

cc.BezierTo  ：移动到绝对坐标处

cc.BezierBy  ：以自身为原点，移动到相对坐标处

例子 ：

var sprite = new cc.Sprite('sprite.png');  
sprite.attr({x:220, y : 200});  
this.addChild(sprite);  
var bezier = [cc.p(220, 200), cc.p(400, 400), cc.p(600, 200)];  //写好曲线的坐标点,这里的坐标点至少需要3个  
var bezierTo = new cc.BezierTo(1, bezier);  //参数意义 ：过渡时间，坐标点对象  
sprite.runAction(bezierTo);