Gift shake animation (CocosCreator)

Disclaimer: This article is a blogger original article, follow the CC 4.0 BY-SA copyright agreement, reproduced, please attach the original source link and this statement.

This link: https://blog.csdn.net/shirln/article/details/94010044

Recommended reading:

•  My CSDN
•  My garden blog
•  QQ group: 704 621 321

      Another day of this month, do not ask me why it is day 996, got it? A project is endless, planning and add new features, bug can not change the quiet. Is animated, animation, I am probably on the bar and animation, recently made a lot of animation, also wrote a lot of articles about the movie. So, are concerned that the new demands it, the cumulative attendance reached a specified number of days, corresponding boxes need to play a shake animation, after receiving awards, animation stops, gift boxes back to the initial state.
      ui interface not say, mainly to talk about logic, animation realization. First, when the boxes need to achieve animation jitter, jitter, in fact, move up and down cycles in the starting position, the main method used in the package is a good method CocosCreator.

Mobile Methods:

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

Order to perform certain actions

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

Repeat an action

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

Implementation process
First, we need to save the starting position of the node, in order to stop the animation back to the initial position

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

Then declare a variable, for controlling the overall offset

let offset = 5;

Then there is the realization of animation

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

To sum up, we can be packaged as a movie playback method:

   //累计签到礼盒上下动画
    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]);
    },

Finally, we also need a package to stop the animation and post-initialization gift box location method to stop the animation

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

Above, we will play the animation, the animation stops are packaged in a way only need to call to where it is needed, it is not very convenient ~