一、原始動畫

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

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

暫時先寫這么多，組合動作回頭再加

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

cocos2d-js 基本動作Action