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

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

cocos2d-html5教程之动作CCAction

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

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

[javascript] view plain copy print ?

1. var SimpleActon=cc.Layer.extend({ 
2.     init:function  () { 
3.         var green=cc.LayerColor.create(cc.c4(0,255,0,255),320,480); 
4.         var flower= cc.Sprite.create("Resources/flower.png"); 
5.  
6.         //菊花太大，缩小一点，并移动一下 
7.         flower.setScale(0.1); 
8.         flower.setPosition(cc.ccp(100,100)); 
9.  
10.         //一个旋转的Action，2秒转一圈 
11.         var actionBy = cc.RotateBy.create(2, 360); 
12.  
13.         //重复运行Action，不断的转圈 
14.         flower.runAction(cc.RepeatForever.create(actionBy)); 
15.  
16.         this.addChild(green,1,1); 
17.         this.addChild(flower,2,2); 
18.  
19.         this.setTouchEnabled(true); 
20.         return true; 
21.     } 
22. }); 

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 plain copy print ?

1. var ActionTest=cc.Layer.extend({ 
2.     actionArray:[], 
3.     sq:null, 
4.     init:function  () { 
5.         var green=cc.LayerColor.create(cc.c4(0,255,0,255),320,480); 
6.         var flower= cc.Sprite.create("Resources/flower.png"); 
7.  
8.         //菊花太大，缩小一点，并移动一下 
9.         flower.setScale(0.1); 
10.         flower.setPosition(cc.p(100,100)); 
11.  
12.         //一个旋转的Action，2秒转一圈 
13.         var actionBy = cc.RotateBy.create(2, 360); 
14.  
15.         //重复运行Action，不断的转圈 
16.         flower.runAction(cc.RepeatForever.create(actionBy)); 
17.  
18.         this.addChild(green,1,1); 
19.         this.addChild(flower,2,2); 
20.  
21.         this.setTouchEnabled(true); 
22.         return true; 
23.     }, 
24.     ccTouchesEnded:function (touches,event) { 
25.  
26.         //获得点击位置，添加一个MoveTo的Action,菊花1秒内移动到这个位置 
27.         var position=touches[0].locationInView(); 
28.         var action=cc.MoveTo.create(1,position); 
29.         this.actionArray.push(action); 
30.         //添加一个回调函数，其实也是一个Action 
31.         this.actionArray.push(cc.CallFunc.create(this, this.callback,this.actionArray.length+1)); 
32.  
33.         //是否是第一次 
34.         if (this.sq==null) { 
35.             this.sq=cc.Sequence.create(this.actionArray); 
36.             this.getChildByTag(2).runAction(this.sq); 
37.             return; 
38.         }; 
39.  
40.         //上一次是否运行结束，是的话就运行本次点击的Action 
41.         if (this.sq.isDone()) { 
42.             this.callback(this,this.actionArray.length-2); 
43.         }; 
44.     }, 
45.     callback:function (sender,next) { 
46.  
47.         //是否是最后一个Action,是的话就返回，否则运行下两个个Action（第二个是回调函数Action，cc.CallFunc） 
48.         if (next==this.actionArray.length) return; 
49.  
50.         this.sq=cc.Sequence.create(this.actionArray[next],this.actionArray[next+1]); 
51.         this.getChildByTag(2).runAction(this.sq); 
52.     } 
53. }); 

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，想一下魔兽的角色是怎么移动的。