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