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

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

礼盒抖动动画（CocosCreator）相关推荐

Flutter抖动动画、颤抖动画、Flutter文字抖动效果
题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精,即是折腾每一天. github? 你可能需要百度同步 CSDN 网易云课堂教程掘金知乎 Flutter系列文章头条同步 1 添加 ...
直播电商平台开发，点击让窗口抖动动画效果
直播电商平台开发,点击让窗口抖动动画效果 css代码 .shake {animation: shake 800ms ease-in-out;} @keyframes shake {10%, 90% { ...
iOS 模仿系统的抖动动画
模仿系统的抖动动画,主要用的是CAKeyframeAnimation(见之前篇博文)和NSTimer,不多说直接上代码. #define degreesToRadians(x) (M_PI*(x)/1 ...
AEJoy —— 使用 js 脚本创建非平滑抖动动画
前言有时你并不想让所有事情都一帆风顺.这里有一个国外大佬 Zack 分享的用来创建自动 "略带蹒跚" 关键帧的 javascript (ExtendScript)小脚本. 它可以 ...
html中flash的简单动画效果,css实现快速炫酷抖动动画效果
1.Animate.css简介 Animate.css是一个可在您的Web项目中使用的即用型跨浏览器动画库.非常适合强调,首页,滑块和引导注意的提示.它是一个来自国外的 CSS3 动画库,它预设了抖动 ...
Android中使用抖动动画吸引来用户注意
在应用中,有时候我们要吸引用户去点击某些按钮,比如应用市场的推荐按钮,为了能够吸引用户主动点击而且不过分的打扰用户,最好的方法就是给我们想吸引用户注意的view添加一些抖动动画,比如这张图这里我主要 ...
【代码笔记】iOS-字体抖动动画
一,效果图. 二,代码. ViewController.m #import "ViewController.h"@interface ViewController ()@end@i ...
动画会震一下css,csshake.css强大的CSS3元素抖动动画库
CSS Shake是一个使用CSS3实现的动画样式,使用SASS编写,利用它我们可以实现多种不同样式的抖动效果(如下面的GIF图像).这是一个很微小的动画,但使用得当也是挺不错的,比如用在广告.图像. ...
IOS开发之——动画-图标抖动(97)
一概述模仿删除应用时的图标抖动页面上添加图片,勾选属性User Interaction Enabled,给图片设置长按事件,并执行抖动动画图标抖动时,先往左旋转5度,再向右旋转5度,再向左旋转 ...

礼盒抖动动画（CocosCreator）

礼盒抖动动画（CocosCreator）相关推荐

最新文章

热门文章