礼盒抖动动画（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];
    },

上面，我们将动画的播放，动画停止都封装成了方法，只需要在需要的地方调用即可，是不是很方便呢~