cocos2d-js 基本动作Action

一、原始动画

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;
    }
});

暂时先写这么多，组合动作回头再加