cocos creator 动作Action和缓动系统cc.tween的使用

一.动作cc.Action

Action是动作命令，先创建动作，然后就可以通过节点运行动作。
Action包括，改变位置、大小、旋转等属性；
Action分为两大类：1.一段时间后完成 ActionIntervial 2. 瞬时完成 ActionInstant

一段时间完成ActionIntervial

一段时间后完成的动作一般有以下几种

动作	含义
cc.moveTo()	移动到指定的位置
cc.moveBy()	移动指定的距离
cc.rotateTo()	旋转到某个角度
cc.rotateBy()	旋转变化指定的角度
cc.scaleTo()	缩放到指定倍数
cc.scaleBy()	缩放变化指定倍数
cc.fadeIn()	淡入
cc.fadeOut()	淡出
cc.fadeTo()	修改透明度到指定的值
cc.sequence()	执行动作序列
cc.repeat()	重复动作指定次数
cc.repeatForever()	一直重复动作

示例代码如下：

//移动
var mto = cc.moveTo(1,cc.v2(200,200));
this.node.runAction(mto);
var mby = cc.moveBy(0,cc.v2(200,200));
this.node.runAction(mby);
//旋转
var rto = cc.rotateTo(1,180);
this.node.runAction(rto);
var rby = cc.rotateBy(1,30);
this.node.runAction(rby);
//缩放
this.node.scale = 2;	//为了便于理解缩放的scaleTo和scaleBy，先指定了一个scale=2
var sto = cc.scaleTo(1,5);   //不管scale为多少,直接设置为节点原始大小的5倍
this.node.runAction(sto);
var sby = cc.scaleBy(1,3);  //这是相乘的结果，2*3=6，即节点原始大小的6倍
this.node.runAction(sby);
//淡入淡出
var fi = cc.fadeIn(1);
this.node.runAction(fi);
var fo = cc.fadeOut(1);
this.node.runAction(fo);
var ft = cc.fadeTo(1,128);
this.node.runAction(ft);

//动作序列
var s1 = cc.scaleTo(1,0.5);
var s2 = cc.scaleTo(1,1.5);
var seq = cc.sequence([s1,s2]);  //先缩小再放大
var rep = cc.repeatForever(seq);  //一直执行这个sequence
this.node.runAction(rep);

瞬时完成ActionInstant

callFunc(func,object,data); 执行回调函数
第一个参数为回调函数，
第二个参数为函数作用对象，
第三个参数为函数传参的data

var cf = cc.callFunc(function(){
   cc.log("call function");
}.bind(this));
this.node.runAction(cf);

缓动特效

有时候为了让动作看起来比较优雅，不那么呆板，
可以用cc.easeXXX加上缓动特效，有很多方法，可以查官方API，
在此就举一个使用的例子

var r = cc.rotateBy(2,360).easing(cc.easeCubicActionOut()); //按三次函数缓动退出
var rf = cc.repeatForever(r);
this.node.runAction(rf);
//以上最终会形成一个一直不断旋转的缓动退出效果

停止动作

最后，动作当然也可以停止，提供了两种方法：

this.node.stopAction(Action)  // 把一个指定的动作停止
this.node.stopAllActions() //把所有动作都停止

二.缓动系统cc.tween

从cocoscreator v2.0.9，增加了一个新的缓动动作cc.tween.

• 支持以链式结构的方式创建一个动画序列。
• 不再局限于节点上的属性

cc.tween有两种主要的设置方式：

1. to 改变到某个值
2. by 变化值

//cc.tween可以同时设置多个属性
//cc.tween 在调用 start 时会将之前生成的 action 队列重新组合生成一个 cc.sequence 队列，依次执行。

cc.tween(this.node)
//to,在第一秒的时候放大为2倍，位置为(100,100),角度变化到120
.to(1,{scale:2,position:cc.v2(100,100),rotation:120})
//by,在第二秒时，缩放变化1.5倍，即最终放大为原始大小的3倍，位置变化了(100,100)，即现在位置为(200,200)
.by(1,{scale:1.5,position:cc.v2(100,100)})
//在第三秒时缩放为原来的大小，位置设置为(0,0)，然后加了一个缓动效果backOut
.to(1,{scale:1,position:cc.v2(0,0)},{easing:"backOut"})
.start();

从以上的例子可以看出来，cc.tween就是链式的一序列的api，可以同时修改多个属性，并且可以同时设置缓动效果

不仅如此，cc.tween还可以缓动任意对象的任意属性，如

var obj = { a: 0 }
cc.tween(obj)
 .to(1, { a: 100 })
 .start()