我的开源
其它资源
友链申请
CocosCreator之礼盒抖动动画
推荐阅读：
这个月还有一天了，别问我为什么是一天，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];
},
上面，我们将动画的播放，动画停止都封装成了方法，只需要在需要的地方调用即可，是不是很方便呢~
标题：CocosCreator之礼盒抖动动画
作者：shirln
地址：https://www.mmzsblog.cn/articles/2019/08/09/1565360457756.html
如未加特殊说明，文章均为原创，转载必须注明出处。均采用CC BY-SA 4.0 协议！
本网站发布的内容（图片、视频和文字）以原创、转载和分享网络内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。若本站转载文章遗漏了原文链接，请及时告知，我们将做删除处理！文章观点不代表本网站立场，如需处理请联系首页客服。• 网站转载须在文章起始位置标注作者及原文连接，否则保留追究法律责任的权利。
• 公众号转载请联系网站首页的微信号申请白名单！
