帧的概念
帧是动画或影响的最基本单位。每一帧是一个画面,连续的多帧画面组合在一起播放就形成了影响,就好像电影胶卷的一格。而帧频就是一秒内帧的数量,通常用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.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);
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);