禮盒抖動動畫（CocosCreator）

推薦閱讀：

•  我的CSDN
•  我的博客園
•  QQ群：704621321

      這個月還有一天了，別問我為什么是一天，996，懂嗎？項目是做不完了，策划又加新功能，又不能安靜的改bug了。又是動畫，動畫，我大概是和動畫杠上了，最近做了好多動畫，也寫了好多關於動畫的文章了。那么，就來說說新需求吧，達到累計簽到指定天數時，對應的禮盒需要播放一個抖動的動畫，領取獎勵后，動畫停止，禮盒回到初始狀態。
      ui界面就不說了，主要說說邏輯，動畫的實現等。首先，需要實現的時禮盒抖動的動畫，抖動，其實就是在起始位置上下左右循環移動，主要用到的方法是CocosCreator中封裝好的方法。

移動方法：

cc.moveTo(duration: number, position: number | cc.Vec2, y?: number)

順序執行某些動作

cc.sequence(actionOrActionArray: cc.FiniteTimeAction | cc.FiniteTimeAction[], ...tempArray: cc.FiniteTimeAction[])

重復某動作

cc.sequence(actionOrActionArray: cc.FiniteTimeAction | cc.FiniteTimeAction[], ...tempArray: cc.FiniteTimeAction[])

實現過程
首先我們需要將節點的起始位置保存，以便動畫停止后回到初始位置

this.x[idx]= this.gift[idx].x;
this.x[i]dx= this.gift[idx].y;

然后聲明一個變量，用於全局控制偏移量

let offset = 5;

接下來便是動畫的實現

        let offset = 5;
        self.giftAnim[idx] = cc.repeatForever(
            cc.sequence(
                cc.moveTo(0.18, cc.v2(x + (1 + offset), y + (offset + 1))),
                cc.moveTo(0.18, cc.v2(x + (1 + offset), y - (1 + offset))),
                cc.moveTo(0.18, cc.v2(x - (1 + offset), y + (offset + 1))),
                cc.moveTo(0.18, cc.v2(x - (1 + offset), y - (1 + offset))),
                cc.moveTo(0.18, cc.v2(x + (0 + offset), y + (offset + 0)))
            )
        )
        this.gift[idx].runAction(self.giftAnim[idx]);

綜上所述，我們可以將動畫的播放封裝成一個方法：

   //累計簽到禮盒上下動畫
    giftAnim(idx) {
        var self = this;

        this.x[idx] = this.gift[idx].x;
        this.y[idx] = this.gift[idx].y;
        let offset = 5;
        self.giftAnim[idx] = cc.repeatForever(
            cc.sequence(
                cc.moveTo(0.18, cc.v2(x + (1 + offset), y + (offset + 1))),
                cc.moveTo(0.18, cc.v2(x + (1 + offset), y - (1 + offset))),
                cc.moveTo(0.18, cc.v2(x - (1 + offset), y + (offset + 1))),
                cc.moveTo(0.18, cc.v2(x - (1 + offset), y - (1 + offset))),
                cc.moveTo(0.18, cc.v2(x + (0 + offset), y + (offset + 0)))
            )
        )
        this.gift[idx].runAction(self.giftAnim[idx]);
    },

最后，我們還需要封裝一個停止動畫播放以及動畫停止后初始化禮盒位置的方法

  stopGiftAnim(idx) {
        this.gift[idx].stopAction(self.giftAnim[idx]);
        this.gift[idx].x = this.x[idx];
        this.gift[idx].y = this.x[idx];
    },

上面，我們將動畫的播放，動畫停止都封裝成了方法，只需要在需要的地方調用即可，是不是很方便呢~