本次引擎2.0.5

編輯工具VSCode

如遇不會某個步驟可以先過一遍之前教程，或者下方評論，感謝支援！

目標：喵喵的跳躍

今天教大家CocosCreator的動作函式；

它可以實現平滑的每秒60幀左右的動畫，極大的省下了美術的工作量。

好了，讓我們先亮出所需素材：點選下載

提取：ly3w

（美術很用心畫的呢O(∩_∩)O~~禁止商業使用）

好了，我們把圖片拖進去吧：

然後建個背景（Sprite（單色））

把miao1圖片拖進去：

好了，讓我們新建個指令碼：

就叫miaojs吧，然後直接繫結到miao1節點上。

好了，雙擊進入VScode開始編輯，先讓指令碼可愛起來：

哦對了，差點忘了把場景儲存了~

然後我來介紹一下CocosCreator的動作系列一般用法：

第一步：宣告動作；

第二步：利用runAction函式呼叫；

（注：動作的種類常用的就是：移動，旋轉，縮放，緩動）

好了，我們先試著讓它往上移動：

意思是花兩秒讓miao1往y的正方向運動100距離；

我們把圖片往下放放然後執行一下試試看：

是不是動了呢~

好，既然我們的目標是模擬跳躍，還得往下來呀！

我們就得用到順序執行函式，看下面註釋。

（我習慣給動作取名字用：act_用處，的這種模式，這裡我把第一個改成act_shang。）

cc.sequence函式裡面可以放很多動作，它會按順序一個一個執行。

相信聰明的你一下子就會理解的！吼吼~

試試看吧,是不是可以上下動了呢。

但是感覺怪怪的，哦，讓我們加個放大縮小的動作吧，讓喵喵變得“有彈性”:

既然有順序執行函式，那麼對應的一定會有同時執行函式：

（貼出程式碼）

cc.Class({
    extends: cc.Component,

    properties: {
    },
    start () {
        var act_shang = cc.moveBy(2,0,200);//2秒向上200距離
        var act_xia = cc.moveBy(2,0,-200);//2秒向下200距離
        var act_da = cc.scaleTo(2,1,1);//2秒放大y軸至1倍大小，x軸一直為1
        var act_xiao = cc.scaleTo(2,1,0.85);//2秒縮小y軸至0.85倍大小，x軸一直為1
        //cc.spawn函式是同步執行動作函式
        var act_1 = cc.spawn(act_shang,act_da);
        var act_2 = cc.spawn(act_xia,act_xiao);
        //將兩個同步執行函式順序執行
        var act_s = cc.sequence(act_1,act_2);
        this.node.runAction(act_s);
    },
});
 

誒，有一個問題，第一階段向上時，因為圖片原本就是1倍大小，沒有放大的動畫；

這個簡單：

第一步，因為我們準備素材都是200*200定好的，我們選擇原始尺寸模式：

第二步，我們更改初始的y軸縮放為0.85

再試試看，是不是很有趣：

但是，不難發現，上下的動畫是勻速的，正常的跳躍應該是先快後慢，然後在最高點向下時是先慢後快；

怎麼解決呢？其實官方還是很貼心的準備了很多緩動動作滴。

比如這些：

好，在這裡我們用到前兩個，怎麼用呢？簡單，加個.easing（）函式就行。

.easing(引數為緩動動作)

cc.easeOut(引數為“某種程度”，你可以把它改成1,2,3分別看看效果)

好了，我們可愛的喵喵有彈性了呢，但是它只能duang~一下，怎麼永遠重複的duang~呢；

很簡單，一看就懂：

怎麼樣，達到目標了喲，給自己鼓個掌！

如果嫌它慢可以改一下動作執行時間引數。

O(∩_∩)O~~

進階：跳躍最底下時改圖片，讓喵喵表情更豐富

我們可愛的喵喵可以更可愛：

首先，我們需要宣告兩個Sprite圖片型別的變數來搭橋樑：

儲存指令碼，然後把miao1,miao2拖過去：

這樣我們就可以在腳本里使用這兩張圖片

好了，我們接下來需要寫出可以插入到動作裡的函式：

用到了cc.callFunc()；這個函式可以放在runAction（）函式裡使用；

然後用到了getComponent（）這個函式用來改變圖片；

最後，因為如果不延時，我們看不到現象，用到了cc.delayTime()函式；

怎麼樣，頭大了嗎？

其實真的不難，函式的名字就是英文的基礎意思，用兩次就會了。

這裡給出程式碼和詳細註釋，研究研究：

cc.Class({
    extends: cc.Component,

    properties: {
        miao1:cc.SpriteFrame,
        miao2:cc.SpriteFrame,
    },
    start () {
        var change_1 = cc.callFunc(function(){
            //首先get到節點上的精靈元件，然後用this.miao2更換圖片
            this.node.getComponent(cc.Sprite).spriteFrame = this.miao2;
        },this);

        var change_2 = cc.callFunc(function(){
            //首先get到節點上的精靈元件，然後用this.miao1更換圖片
            this.node.getComponent(cc.Sprite).spriteFrame = this.miao1;
        },this);

        var act_shang = cc.moveBy(2,0,200);
        var act_xia = cc.moveBy(2,0,-200);
        var act_da = cc.scaleTo(2,1,1);//2秒放大y軸至1倍大小，x軸一直為1
        var act_xiao = cc.scaleTo(2,1,0.85);//2秒縮小y軸至0.85倍大小，x軸一直為1
        //cc.spawn函式是同步執行動作函式
        var act_1 = cc.spawn(act_shang,act_da);
        var act_2 = cc.spawn(act_xia,act_xiao);
        //將兩個同步執行函式順序執行
        var act_s = cc.sequence(act_1.easing(cc.easeOut(2)),act_2.easing(cc.easeIn(2)),change_1,cc.delayTime(0.3),change_2);
        //cc.delayTime()這個函式是延時函式，延時0.3秒為了讓喵喵的變化停留一段時間
        //第一個動作快到慢，第二個慢到快
        var act_repeat = cc.repeatForever(act_s);
        //讓act_s動作永遠重複
        this.node.runAction(act_repeat);
    },
});

我們可愛的喵喵歡快的在duang~duang~duang~

一定要親自動手打一打程式碼哦。

O(∩_∩)O~~