cocos2d-html5学习笔记（二）

定义一个闪光效果（点击newGame的效果）

var AdditiveSprite = cc.Sprite.extend({

重写精灵的draw方法

draw:function(ctx){

var context = ctx || cc.renderContext;

context.globalCompositeOperation = "lighter";

this._super(ctx);

}

});

var flareEffect = function(parent, target, callback){

var flare = new AdditiveSprite();

//用图片初始化精灵

flare.initWithFile(s_flare);

//加到父节点中，这里一般是传入场景的this指针

parent.addChild(flare,10);

//设置精灵的不透明度为0，即完全透明

flare.setOpacity(0);

设置精灵的初始位置

flare.setPosition(cc.ccp(-30,297));

设置精灵的初始弧度为-120度

flare.setRotation(-120);

设置精灵的初始比例

flare.setScale(0.2);

下面定义一系列的动画效果,让精灵去展现

在0.5秒内将不透明度渐渐变为255

var opacityAnim = cc.FadeTo.actionWithDuration(0.5, 255);

在一秒内渐渐变为透明,FadeTo没有对应的FadeBy方法。

var opacDim = cc.FadeTo.actionWithDuration(1, 0);
在0.7秒内慢慢放大大，变大幅度为当前大小的1.2倍，与ScaleTo不同，ScaleTo的参照物是精灵原始大小。第二个参数表示的是竖向，第三个参数表示的是横向，如果只有两个参数，则横竖向放大比例相同。

var biggeAnim = cc.ScaleBy.actionWithDuration(0.7, 1.2, 1.2);

这个效果的作用暂时不清楚，可能是在0.7秒内按照正弦函数放大吧。

var biggerEase = cc.EaseSineOut.actionWithAction(biggeAnim);

在0.5秒移动，在x方向相对当前位置移动328，y方向不移动，一般的by都是相对而言，to是绝对的

var moveAnim = cc.MoveBy.actionWithDuration(0.5, cc.ccp(328, 0));

应该也是按照正弦函数去移动

var easeMove = cc.EaseSineOut.actionWithAction(moveAnim);

在2.5秒内相对当前位置顺时针转动90度

var rotateAnim = cc.RotateBy.actionWithDuration(2.5, 90);

按照正弦函数去转动

var rotateEase = cc.EaseExponentialOut.actionWithAction(rotateAnim);

放大到精灵的原来大小

var bigger = cc.ScaleTo.actionWithDuration(0.5, 1);

target表示对象,callback表示对象的方法,这个动作表示执行target对象的callback方法。

var onComplete = cc.CallFunc.actionWithTarget(target, callback);

//在一系列效果完成之后执行该动作,将flare精灵从场景中移除

var killflare = cc.CallFunc.actionWithTarget(flare, function () {

this.getParent().removeChild(this);

});

//并行执行这几个动作，但是cc.Sequence.actions()方法中的动作会顺序去执行。

flare.runAction(cc.Sequence.actions(opacityAnim, biggerEase, opacDim, killflare, onComplete));

flare.runAction(easeMove);

flare.runAction(rotateEase);

flare.runAction(bigger);

}