cocos2d-js 基本动作Action
2017-09-29 本文已影响1367人
xpf2000
一、原始动画
DrawNode
drawNode是一个画布节点，可以使用drawNode画出各种各样可以想象出来的轨迹.
var drawNode = new cc.DrawNode();
// drawNode.drawRect();
drawNode.setDrawColor(cc.color(255, 0, 255));
//画圆,参数: (圆心坐标，半径，....)
drawNode.drawCircle(cc.p(size.width / 2, size.height / 2), 50, 30, 30, true);
//画点,参数：(坐标点， 线条粗细程度，颜色)
drawNode.drawDot(cc.p(50,50), 1, cc.color(255, 0, 0));
//画正方形,对角线两个坐标点
drawNode.drawRect(cc.p(0,0), cc.p(100, 100));
this.addChild(drawNode);
二、基本动作
cocos2d-js封装有一些常用的基本动作，下面我们来一一介绍
首先创建一个节点
var size = cc.winSize;
var sprite = new cc.Sprite(res.HelloWorld_png);
sprite.x = size.width / 2;
sprite.y = size.height / 2;
this.addChild(sprite);
//动画时间
var duration = 1;
大部分动作都有一个To方法和By方法,比如moveTo/moveBy,scaleTo/scaleBy等等,他们的区别是什么呢？
To:绝对动作(坐标)，相对于最开始的状态所做的动作；
By:相对动作(坐标)，相对于当前的状态所做的动作;
移动效果moveTo/moveBy
moveTo/moveBy方法可以使节点Node移动到某个位置.
moveBy
//相对于当前坐标移动point(x, y)
var moveby = cc.moveBy(duration, cc.p( - size.width / 2, - size.height / 2));
sprite.runAction(moveby);
moveTo
//从当前坐标移动到point(x, y)
var moveto = cc.moveTo(duration, cc.p(size.width / 2, size.height / 2));
sprite.runAction(moveto);
缩放效果sacleTo/scaleBy
scaleBy
//根据节点原本大小缩放
//x 为横向拉伸倍数， y为纵向拉伸倍数
var scaleTo = cc.scaleTo(duration, 2, 2);
sprite.runAction(scaleTo);
scaleTo
//根据节点当前大小缩放
//x 为横向拉伸倍数， y为纵向拉伸倍数
var scaleBy = cc.scaleBy(duration, 0.5, 0.5);
sprite.runAction(scaleBy);
旋转效果rotateTo/rotateBy
rotateTo
//相对于节点初始角度(0,0)的旋转
var rotateTo = cc.rotateTo(duration, 30, 30);
sprite.runAction(rotateTo);
rotateBy
//相对于节点当前角度的旋转
var rotateBy = cc.rotateBy(duration, -30, -30);
sprite.runAction(rotateBy);
例子
//旋转效果
//x 绕x轴旋转的角度
//y 绕y轴旋转的角度
//假设当前节点的角度为(30,30),节点想要运动到(60,60)，则可以设置：
var rotateTo = cc.rotateTo(duration, 60, 60);
//或设置:
var rotateBy = cc.rotateBy(duration, 30, 30);
倾斜效果skewTo/skewBy
skewTo
//倾斜效果
//x 绕x轴倾斜的角度
//y 绕y轴倾斜的角度
//相对于节点初始角度的倾斜
var skewTo = cc.skewTo(duration, 0, 0);
sprite.runAction(skewTo);
skewBy
//倾斜效果
//x 绕x轴倾斜的角度
//y 绕y轴倾斜的角度
//相对于节点当前角度的倾斜
var skewBy = cc.skewBy(duration, 60, 60);
sprite.runAction(skewBy);
跳跃移动jumpTo/jumpBy
jumpTo
//以坐标原点为原点，移动到目标坐标
//参数: (时间duration，目标坐标point(x, y)， 每次跳跃高度height， 跳跃次数count)
var jumpTo = cc.jumpTo(duration, cc.p(size.width / 2, size.height / 2), 50, 10);
sprite.runAction(jumpTo);
jumpBy
//以当前节点坐标为原点，移动目标坐标距离
//参数: (时间duration，目标坐标point(x, y)， 每次跳跃高度height， 跳跃次数count)
var jumpBy = cc.jumpBy(duration, cc.p(size.width / 2 , size.height / 2), 50, 10);
sprite.runAction(jumpBy);
贝塞尔曲线bezierTo/bezierBy
bezierTo
//贝塞尔曲线
//参数：（时间duration， 坐标数组Array）
var pointArray = [cc.p(size.width, size.height),
cc.p(size.width, 0),
cc.p(0, 0),
cc.p(0, size.height),
cc.p(size.width / 2, size.height/ 2)];
//To方法运动后不会回到原点
//螺旋向外运动
var bezierTo = cc.bezierTo(duration, pointArray);
sprite.runAction(bezierTo);
bezierBy
//By方法会回到节点开始运动时的位置
var bezierBy = cc.bezierBy(duration, pointArray);
sprite.runAction(bezierBy);
淡入淡出效果fadeTo/fadeIn/fadeOut
fadeTo
//第二个参数为透明度,透明区间(0, 1)
var fadeTo = cc.fadeTo(duration, 0.5);
sprite.runAction(fadeTo);
fadeIn
//淡入效果
var fadeIn = cc.fadeIn(duration);
sprite.runAction(fadeIn);
fadeOut
//淡出效果
var fadeOut = cc.fadeOut(duration);
sprite.runAction(fadeOut);
闪烁效果blink
//闪烁效果
//第二个参数为duration时间内闪烁次数
var blink = cc.blink(duration, 5);
sprite.runAction(blink);
改变色调tintTo
//改变色调效果
var tintTo = cc.tintTo(duration, 255, 127.5, 0);
sprite.runAction(tintTo);
在cc.tintTo(duration, r, g, b)方法中，之所以能够改变色调，是因为tintTo方法，将sprite的每一个像素点的R、G、B通道分别做了图像处理;
这里假设原来的像素点的色值是RGB(oldRed, oldGreen, oldBlue),则通过tintTo方法以后:
newRed = oldRed * (r / 255.0);
newGreen = oldGreen * (g / 255.0);
newBlue = oldBlue * (b / 255.0);
假设r=g=b=255.0,则新的RGB通道的颜色相对于旧RGB通道，颜色并没有变化;
假设r=g=b=0,则新的RGB通道的颜色相对于旧RGB通道，变成了RGB(0, 0, 0),颜色为黑色;
延迟执行delayTime
var delayTime = cc.delayTime(duration);
此动作多用于组合动作中，单独使用并无效果
三、组合动作
顺序执行sequence
//顺序执行当前添加的所有动作
var sequence = cc.sequence(moveby, moveto, scaleTo, scaleBy, fadeTo, fadeOut, fadeIn, blink, tintTo,
rotateTo, rotateBy, skewBy, skewTo, jumpBy, jumpTo, bezierTo, bezierBy);
sprite.runAction(sequence);
重复repeat/repeatForever
repeat
//重复执行
//参数: (action，执行次数)
var repeat = cc.repeat(sequence, 3);
sprite.runAction(repeat);
repeatForever
//无限重复
var repeatForever = cc.repeatForever(sequence);
sprite.runAction(repeatForever);
同时执行spawn
//spawn 同时执行
var spawn = cc.spawn(moveby, scaleTo, blink, tintTo);
sprite.runAction(spawn);
反向执行reverse/reverseTime
reverseTime
不建议使用
//反向执行
var reverseTime = cc.reverseTime(sequence);
sprite.runAction(reverseTime);
reverse
反向执行只支持基本动作中的By方法，
即:moveBy,scaleBy,rotateBy,jumpBy,skewBy,bezierBy及这几种方法的组合方法,还有fadeIn/fadeOut,blink
//反向执行,基本动作
var reverse = bezierBy.reverse();
var sequence = cc.sequence(bezierBy, reverse);
sprite.runAction(sequence);
//反向执行，组合动作
var sequence1 = cc.sequence(jumpBy, scaleBy, bezierBy, tintTo);
var reverse2 = sequence1.reverse();
var sequence2 = cc.sequence(sequence1, reverse2);
sprite.runAction(sequence2);
不支持To方法，包括fadeTo,tintTo
若使用To方法，则浏览器可能会报错："Uncaught TypeError: Cannot read property 'x' of undefined"
error.png
结论
直接上代码
var ActionLayer = cc.Layer.extend({
ctor: function () {
this._super();
var size = cc.winSize;
var sprite = new cc.Sprite(res.HelloWorld_png);
sprite.x = size.width / 2;
sprite.y = size.height / 2;
this.addChild(sprite);
//动画时间
var duration = 1;
//相对于当前坐标移动point(x, y)
var moveby = cc.moveBy(duration, cc.p( - size.width / 2, - size.height / 2));
// sprite.runAction(moveby);
//从当前坐标移动到point(x, y)
var moveto = cc.moveTo(duration, cc.p(size.width / 2, size.height / 2));
// sprite.runAction(moveto);
//根据节点原本大小缩放
//x 为横向拉伸倍数， y为纵向拉伸倍数
var scaleTo = cc.scaleTo(duration, 2, 2);
// sprite.runAction(scaleTo);
//根据节点当前大小缩放
var scaleBy = cc.scaleBy(duration, 0.5, 0.5);
// sprite.runAction(scaleBy);
//淡入淡出效果
//第二个参数为透明度,透明区间(0, 1)
var fadeTo = cc.fadeTo(duration, 0.5);
// sprite.runAction(fadeTo);
//淡出效果
var fadeOut = cc.fadeOut(duration);
// sprite.runAction(fadeOut);
//淡入效果
var fadeIn = cc.fadeIn(duration);
// sprite.runAction(fadeIn);
//闪烁效果
//第二个参数为duration时间内闪烁次数
var blink = cc.blink(duration, 5);
// sprite.runAction(blink);
//改变色调效果
var tintTo = cc.tintTo(duration, 255, 127.5, 0);
// sprite.runAction(tintTo);
//旋转效果
//x 绕x轴旋转的角度
//y 绕y轴旋转的角度
//假设当前节点的角度为(30,30),节点想要运动到(60,60)，则可以设置：
//var rotateTo = cc.rotateTo(duration, 60, 60);
//或设置:
//var rotateBy = cc.rotateBy(duration, 30, 30);
//相对于节点初始角度(0,0)的旋转
var rotateTo = cc.rotateTo(duration, 30, 30);
// sprite.runAction(rotateTo);
//相对于节点当前角度的旋转
var rotateBy = cc.rotateBy(duration, -30, -30);
// sprite.runAction(rotateBy);
//倾斜效果
//x 绕x轴倾斜的角度
//y 绕y轴倾斜的角度
//相对于节点当前角度的倾斜
var skewBy = cc.skewBy(duration, 60, 60);
// sprite.runAction(skewBy);
//相对于节点初始角度的倾斜
var skewTo = cc.skewTo(duration, 0, 0);
// sprite.runAction(skewTo);
//跳跃移动效果
//参数意义: (时间duration，目标坐标point(x, y)， 每次跳跃高度height， 跳跃次数count)
//以当前节点坐标为原点，移动目标坐标距离
var jumpBy = cc.jumpBy(duration, cc.p(size.width / 2 , size.height / 2), 50, 10);
// sprite.runAction(jumpBy);
//以坐标原点为原点，移动到目标坐标
var jumpTo = cc.jumpTo(duration, cc.p(size.width / 2, size.height / 2), 50, 10);
// sprite.runAction(jumpTo);
//贝塞尔曲线
//参数：（时间duration， 坐标数组Array）
var pointArray = [cc.p(size.width, size.height),
cc.p(size.width, 0),
cc.p(0, 0),
cc.p(0, size.height),
cc.p(size.width / 2, size.height/ 2)];
//不会回到原点
//谁知道它怎么跑的...
var bezierTo = cc.bezierTo(duration, pointArray);
// sprite.runAction(bezierTo);
//会回到节点开始运动时的位置
var bezierBy = cc.bezierBy(duration, pointArray);
// sprite.runAction(bezierBy);
//////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////组合动作//////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////
//顺序执行当前添加的所有动作
var sequence = cc.sequence(moveby, moveto, scaleTo, scaleBy, fadeTo, fadeOut, fadeIn, blink, tintTo,
rotateTo, rotateBy, skewBy, skewTo, jumpBy, jumpTo, bezierTo, bezierBy);
// sprite.runAction(sequence);
//重复执行
//action，执行次数
var repeat = cc.repeat(sequence, 3);
// sprite.runAction(repeat);
//无限重复
var repeatForever = cc.repeatForever(sequence);
// sprite.runAction(repeatForever);
// //反向执行一次
// var reverseTime = cc.reverseTime(sequence);
// sprite.runAction(reverseTime);
//spawn 同时执行
var spawn = cc.spawn(moveby, scaleTo, blink, tintTo);
// sprite.runAction(spawn);
//反向执行
//反向执行只支持基本动作中的By方法，
// 即:moveBy,scaleBy,rotateBy,jumpBy,skewBy,bezierBy及这几种方法的组合方法,还有fadeIn/fadeOut,blink
//不支持To方法，包括fadeTo,tintTo
//若使用To方法，则浏览器可能会报错："Uncaught TypeError: Cannot read property 'x' of undefined"
// var reverse = bezierBy.reverse();
// var sequence3 = cc.sequence(bezierBy, reverse);
// sprite.runAction(sequence3);
var sequence1 = cc.sequence(jumpBy, scaleBy, bezierBy, tintTo);
var reverse2 = sequence1.reverse();
var delayTime = cc.delayTime(duration);
var sequence2 = cc.sequence(sequence1, delayTime, reverse2);
sprite.runAction(sequence2);
return true;
}
});
暂时先写这么多，组合动作回头再加
