礼盒抖动动画(CocosCreator)

举报
爱上游戏开发 发表于 2022/07/02 00:26:41 2022/07/02
997 0 0
【摘要】 推荐阅读:  我的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];
    },

  
 

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

文章来源: unity3d.blog.csdn.net,作者:爱上游戏开发,版权归原作者所有,如需转载,请联系作者。

原文链接:unity3d.blog.csdn.net/article/details/94010044

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

作者其他文章

评论(0

抱歉,系统识别当前为高风险访问,暂不支持该操作

    全部回复

    上滑加载中

    设置昵称

    在此一键设置昵称,即可参与社区互动!

    *长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

    *长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。