Cocos2d-js : 精灵动作实现 示例

本文介绍了如何使用Cocos2d-js库来创建精灵的动画效果,包括旋转、放大缩小、闪烁、渐变、按顺序执行的动作、淡入淡出以及时间延迟等。通过示例代码和参考文献,帮助读者理解并实现这些特效。

解析

cc.sequence    --> 动作序列,有序地一个一个执行动作
repeatForever  --> 重复执行动作
cc.spawn       --> 同时执行动作

//不断做旋转和放缩

var man = new cc.Sprite("res/grossini.png"); // 创建精灵
man.runAction(cc.spawn(cc.rotateBy(1, 360, 360), cc.sequence(cc.scaleTo(1, 2), cc.scaleTo(1, 1))).repeatForever());

this.addChild(man, 2); //添加进当前场景

// 放大缩小 一次

man.runAction( cc.sequence(cc.scaleTo(1, 2), cc.scaleTo(1, 1)) ); 

// 旋转动作

man.runAction(cc.spawn(cc.rotateBy(1, 360, 360); 
// cc.spawn--> 同时执行多个动作 
// 缩放动作 arg0:时间 arg1:缩放倍数 =1正常大小,>1放大,<1缩小
man.runAction(cc.sequence(cc.scaleTo(1, 2), cc.scaleTo(1, 1)) ); 
// cc.sequence-->按顺序 执行 多个动作
man.runAction(cc.sequence(cc.scaleTo(1, 2), cc.scaleTo(1, 1)) );

//闪烁 效果

    var blink = new cc.Blink(10, 100);
    man.runAction(blink);
    setTimeout(function(){
        blink.stop();//2秒后停止闪烁
    }, 2000);

// 渐变 效果

var action = cc.FadeTo.create(1, 150);//1秒对象 由不透明0变为透明度150

// 多个动作 按顺序执行

var action = cc.sequence(
            cc.moveBy(1.5, cc.p(240, 0)), // 1s 时间 x 右移 240y 不变
            cc.rotateBy(1.5, 360,360),
            cc.moveBy(1.5, cc.p(-240, 0)),
        );
    man.runAction(action);

// 淡入 效果

var action = cc.fadeIn(1.0);
var delay = cc.delayTime(0.25);
var actionBack = action.reverse();
man.runAction(cc.sequence(action, delay, actionBack));

// 淡出 效果

var action = cc.fadeOut(1.0);
var delay = cc.delayTime(0.25);
var actionBack = action.reverse();
man.runAction(cc.sequence(action, delay.clone(), actionBack));

// 时间延迟 (休眠)

var delay = cc.delayTime(0.25);

参考文献:
http://www.cnblogs.com/wanqieddy/archive/2013/09/13/3318627.html
http://www.cnblogs.com/ajun/p/4278982.html

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值