cocos2d-html5学习笔记（七）--Action

Action实在太多了，有些我没有用过，这里只讲常用的Action。关于Action的其他知识，请参考陈升想的两篇关于action的教程

cocos2d-html5教程之动作CCAction

cocos2d-html5教程之动作CCAction详解2

cocos2d-html5教程之动作CCAction详解2

好的，先来一个最简单的Action

[javascript]
view plaincopyprint?

var SimpleActon=cc.Layer.extend({

init:function () {
var green=cc.LayerColor.create(cc.c4(0,255,0,255),320,480);

var flower= cc.Sprite.create("Resources/flower.png");

//菊花太大，缩小一点，并移动一下
flower.setScale(0.1);
flower.setPosition(cc.ccp(100,100));

//一个旋转的Action，2秒转一圈

var actionBy = cc.RotateBy.create(2, 360);

//重复运行Action，不断的转圈

flower.runAction(cc.RepeatForever.create(actionBy));

this.addChild(green,1,1);

this.addChild(flower,2,2);

this.setTouchEnabled(true);

return true;

}
});

var SimpleActon=cc.Layer.extend({
init:function  () {
var green=cc.LayerColor.create(cc.c4(0,255,0,255),320,480);
var flower= cc.Sprite.create("Resources/flower.png");

//菊花太大，缩小一点，并移动一下
flower.setScale(0.1);
flower.setPosition(cc.ccp(100,100));

//一个旋转的Action，2秒转一圈
var actionBy = cc.RotateBy.create(2, 360);

//重复运行Action，不断的转圈
flower.runAction(cc.RepeatForever.create(actionBy));

this.addChild(green,1,1);
this.addChild(flower,2,2);

this.setTouchEnabled(true);
return true;
}
});

动态的效果，图片就看不到了，不过可以看一下菊花：



好的，再来一个复杂一点的。

[javascript]
view plaincopyprint?

var ActionTest=cc.Layer.extend({

actionArray:[],
sq:null,
init:function () {
var green=cc.LayerColor.create(cc.c4(0,255,0,255),320,480);

var flower= cc.Sprite.create("Resources/flower.png");

//菊花太大，缩小一点，并移动一下
flower.setScale(0.1);
flower.setPosition(cc.p(100,100));

//一个旋转的Action，2秒转一圈

var actionBy = cc.RotateBy.create(2, 360);

//重复运行Action，不断的转圈

flower.runAction(cc.RepeatForever.create(actionBy));

this.addChild(green,1,1);

this.addChild(flower,2,2);

this.setTouchEnabled(true);

return true;

},
ccTouchesEnded:function (touches,event) {

//获得点击位置，添加一个MoveTo的Action,菊花1秒内移动到这个位置

var position=touches[0].locationInView();

var action=cc.MoveTo.create(1,position);

this.actionArray.push(action);

//添加一个回调函数，其实也是一个Action

this.actionArray.push(cc.CallFunc.create(this,
this.callback,this.actionArray.length+1));

//是否是第一次

if (this.sq==null) {

this.sq=cc.Sequence.create(this.actionArray);

this.getChildByTag(2).runAction(this.sq);

return;

};

//上一次是否运行结束，是的话就运行本次点击的Action

if (this.sq.isDone()) {

this.callback(this,this.actionArray.length-2);

};
},
callback:function (sender,next) {

//是否是最后一个Action,是的话就返回，否则运行下两个个Action（第二个是回调函数Action，cc.CallFunc）

if (next==this.actionArray.length)
return;

this.sq=cc.Sequence.create(this.actionArray[next],this.actionArray[next+1]);

this.getChildByTag(2).runAction(this.sq);

}
});

var ActionTest=cc.Layer.extend({
actionArray:[],
sq:null,
init:function  () {
var green=cc.LayerColor.create(cc.c4(0,255,0,255),320,480);
var flower= cc.Sprite.create("Resources/flower.png");

//菊花太大，缩小一点，并移动一下
flower.setScale(0.1);
flower.setPosition(cc.p(100,100));

//一个旋转的Action，2秒转一圈
var actionBy = cc.RotateBy.create(2, 360);

//重复运行Action，不断的转圈
flower.runAction(cc.RepeatForever.create(actionBy));

this.addChild(green,1,1);
this.addChild(flower,2,2);

this.setTouchEnabled(true);
return true;
},
ccTouchesEnded:function (touches,event) {

//获得点击位置，添加一个MoveTo的Action,菊花1秒内移动到这个位置
var position=touches[0].locationInView();
var action=cc.MoveTo.create(1,position);
this.actionArray.push(action);
//添加一个回调函数，其实也是一个Action
this.actionArray.push(cc.CallFunc.create(this, this.callback,this.actionArray.length+1));

//是否是第一次
if (this.sq==null) {
this.sq=cc.Sequence.create(this.actionArray);
this.getChildByTag(2).runAction(this.sq);
return;
};

//上一次是否运行结束，是的话就运行本次点击的Action
if (this.sq.isDone()) {
this.callback(this,this.actionArray.length-2);
};
},
callback:function (sender,next) {

//是否是最后一个Action,是的话就返回，否则运行下两个个Action（第二个是回调函数Action，cc.CallFunc）
if (next==this.actionArray.length) return;

this.sq=cc.Sequence.create(this.actionArray[next],this.actionArray[next+1]);
this.getChildByTag(2).runAction(this.sq);
}
});

这个例子中的init部分与上一个例子是一样的，详细的我不讲了。这个例子的效果是，鼠标点击哪里，菊花就飘到哪里。如果菊花还在飘，你又点击的话，要等到上一次的Action完成之后才运行下一个Action，想一下魔兽的角色是怎么移动的。