推荐阅读:

      这个月还有一天了,别问我为什么是一天,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)的更多相关文章

  1. Android中使用抖动动画吸引来用户注意

    原文:http://www.androidcn.org/topic/552e65bc61d460226ab27a5c 在应用中,有时候我们要吸引用户去点击某些按钮,比如应用市场的推荐按钮,为了能够吸引 ...

  2. Android设置View抖动动画

    在应用中,有时候我们要吸引用户去点击某些按钮,比如应用市场的推荐按钮,为了能够吸引用户主动点击而且不过分的打扰用户,最好的方法就是给我们想吸引用户注意的view添加一些抖动动画,比如这张图 这里我主要 ...

  3. Android抖动动画

    //CycleTimes动画重复的次数 public Animation shakeAnimation(int CycleTimes) { Animation translateAnimation = ...

  4. 【代码笔记】iOS-字体抖动动画

    一,效果图. 二,代码. ViewController.m #import "ViewController.h" @interface ViewController () @end ...

  5. iOS 抖动动画

    -(void)animationWithCell:(WaterLevelCollectionCell *)cell{ // 添加摇晃动画 { CAKeyframeAnimation *frame=[C ...

  6. Android为TV端助力 电影栏目移动到底部或者顶部时抖动动画

    1 移动到底部上下抖动ObjectAnimator animatorX = ObjectAnimator.ofFloat(holder.itemView,"translationX" ...

  7. css抖动动画

    button{ animation: beat 6s ease 0s infinite normal; } @keyframes beat { 0% { transform: translateY(0 ...

  8. 分享一个android仿ios桌面卸载的图标抖动动画

    直接上代码,如有更好的,还请不吝赐教 <span style="font-size:18px;"><?xml version="1.0" en ...

  9. jquery-抖动图组轮播动画

    JQ匀速抖动图组轮播动画 一.HTML+CSS <!DOCTYPE html> <html lang="en" xmlns="http://www.w3 ...

随机推荐

  1. Python 学习笔记(1)Python容器:列表、元组、字典与集合

    Python容器:列表.元组.字典与集合 列表: 1.列表 的创建 使用[ ] 或者 list()创建列表:empty_list = [ ] 或者 empty_list= list() 使用list( ...

  2. docker学习ppt

    保存下学习资料

  3. java练习---13

    public class Y { public static void main(String[] args) { // TODO Auto-generated method stub new Y() ...

  4. jsp数据交互(一).2

    01.什么是JSP内置对象(jsp核心)? Java 内置对象 Java  作用域 解析:jsp内置对象是web容器创建的一组对象.我们都知道tomcat这款软件可以看成是一种web容器,所以我们可以 ...

  5. the license has been canceled

    ideal 的 注册码并没有失效,却显示这个信息 the license has been canceled 如果用的是Windows系统,在hosts文件添加下边的ip及映射 0.0.0.0 acc ...

  6. 在 Windows 上使用 Python 进行 web 开发

    本文由葡萄城技术团队于原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 上一篇我们介绍了在Windows 10下进行初学者入门开发Python的指 ...

  7. windows下hexo+github搭建个人博客

    网上利用hexo搭建博客的教程非常多,大部分内容都大同小异,选择一篇合适的参考,跟着一步一步来即可. 但是,很多博客由于发布时间较为久远等问题,其中某些操作在现在已不再适用,从而导致类似于我这样的小白 ...

  8. JAVA并发之阻塞队列浅析

    背景 因为在工作中经常会用到阻塞队列,有的时候还要根据业务场景获取重写阻塞队列中的方法,所以学习一下阻塞队列的实现原理还是很有必要的.(PS:不深入了解的话,很容易使用出错,造成没有技术深度的样子) ...

  9. <<Modern CMake>> 翻译 2.4 项目目录结构

    <<Modern CMake>> 翻译 2.4 项目目录结构 本节内容有点跑题.但我认为这是一个很好的方法. 我将告诉你如何规划项目的目录. 这是基于惯例,但将帮助您: 轻松阅 ...

  10. Linux内核实战(二)- 操作系统概览

    不知道你有没有产生过这些疑问: 桌面上的图标到底是啥?凭啥我在鼠标上一双击,就会出来一些不可描述的画面?都是从哪里跑出来的? 凭什么我在键盘上噼里啪啦地敲,某个位置就会显示我想要的那些字符? 电脑怎么 ...