cocos-creator使用记录3_Action动画

1.cocos creator的Action动画
官方说明文档地址如下
http://docs.cocos.com/creator/manual/zh/scripting/actions.html


Action动画适宜使用的地方：
UI控件节点动画，比如点击一个按钮，按钮飞出屏幕。
在比如模仿星星闪动、旋转、渐隐、渐显。


其分为：
(1)容器动作  比较常用的是cc.sequence(按顺序执行)、cc.spawn(同时执行)
(2)时间间隔动作
(3)缓动动作
(4)即时动作
详细情况查看如下
http://docs.cocos.com/creator/manual/zh/scripting/action-list.html


通常比较常用的是其前3个的组合，比如
(1)缩放
var delay1 = cc.delayTime(0.5); //延迟0.5秒
var toBigAction1 = cc.scaleTo(0.3, 3); //0.3秒变成3倍大小(默认是线性的放大，即匀速放大)
var action1 = cc.sequence(delay1, toBigAction1); //按顺序执行，先延迟1秒，后缩放
this.birdNode1.runAction(action1); //this.birdNode1执行以上动作
注意：这里缩放没有使用缓动动作，默认按线性。


(2)移动
var delay_startBtn = cc.delayTime(0.2); //延迟0.2秒
//0.75秒内x移动0，y移动-1200，移动曲线按cc.easeCubicActionIn()
var startBtnAction = cc.moveBy(0.75, cc.p(0, -1200)).easing(cc.easeCubicActionIn()); 
this.startBtn.runAction(cc.sequence(delay_startBtn, startBtnAction)); //this.startBtn执行以上动作
注意：这里移动使用了缓动动作，通常也就设计到运动学的情况会用到缓动动作，比如抛物线运动、弹簧。


(3)透明度
var delay2 = cc.delayTime(0.3); //延迟0.3秒
var fadeAction2 = cc.fadeTo(0.25, 0); //0.25秒透明度从255降到0
var action2 = cc.sequence(delay2, fadeAction2);
this.heartNode1.runAction(action2);
this.heartNode2.runAction(action2.clone()); //这里不能直接用action2，必须action2.clone()
注意：action不能同名，同名的话只会执行最后一个。需要重复使用时，可用上面的clone()。


(4)回调函数
onLoad: function(){
var delay3 = cc.delayTime(0.3);
var fadeAction3 = cc.fadeTo(0.25, 255);
var callback1 = cc.callFunc(this.ladderAnimation, this); //回调函数
var action3 = cc.sequence(delay3, fadeAction3, callback1);
this.mileageNode.runAction(action3);
},
ladderAnimation: function(){
....
},
注意：回调函数是一个很有用的设定，比如你可以在点击按钮后，先将按钮飞出屏幕，然后执行跳转场景的函数。


(5)震屏
var quakeAction = cc.repeat(
cc.sequence(cc.moveBy(0.05,cc.p(2,2)), 
cc.moveBy(0.1,cc.p(-4,4)), 
cc.moveBy(0.05,cc.p(2,2)), 
cc.moveBy(0.1,cc.p(0,-6))),
2);
this.bgNode.runAction(quakeAction);
注意：这里用了cc.repeat，其执行了2次。


更多的动画需要你自己去发挥想象力了。


2.缓动动作
http://gad.qq.com/article/det