Cocos2d-js 3.x 动作 moveTo
前端之家收集整理的这篇文章主要介绍了
Cocos2d-js 3.x 动作 moveTo，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
Action对象就像它看起来的一样,让Node执行一个对属性的变化.Action对象允许及时地转化Node属性。继承自Node的对都可以在上面执行Action对象。 举个例子， 你可以移动在一个段时间内把Sprite一个从一个坐标移动到另一个坐标。
MoveTo和MoveBy动作的例子：
|
1
2
3
4
5
6
7
|
var
moveTo=cc.moveTo(2,cc.p(50,10));
mySprite1.runAction(moveTo);
moveBy=cc.moveBy(2,cc.p(20,0));
mySprite2.runAction(moveBy);
|
By和To有什么区别呢?
你将会注意到每一个Action都有一个By和To版本.。为什么呢？他们有不同的实现方式。By是相对于Node的当前状态。Toaction 是绝对的,这意味着不用考虑Node的当前状态。让我们看一个具体的例子:
7
8
9
10
11
12
13
14
15
16
17
18
mySprite=
new
cc.Sprite(res.node_png);
mySprite.setPosition(cc.p(200,256));
this
.addChild(mySprite);
showPosition=cc.callFunc(
function
(){
cc.log(
"("
+
.getPositionX()+
","
.getPositionY()+
")"
);
},mySprite);
+mySprite.getPositionX()+
+mySprite.getPositionY()+
);
seq=cc.sequence(moveBy,showPosition,moveTo,showPosition);
mySprite.runAction(seq);
|
基本动作以及如何让它们执行起来
基本动作通常是完成一个目标的单一动作。 让我们看看几个例子:
Move
在一段时间内移动Node的坐标。
varmySprite1=newcc.Sprite(res.node_png);
mySprite1.setPosition(cc.p(winSize.width/4,winSize.height/4));
this.addChild(mySprite1);
varmySprite2=newcc.Sprite(res.node_png);
mySprite2.setPosition(cc.p(winSize.width/4,winSize.height/4*3));
this.addChild(mySprite2);
//在2秒内移动精灵到指定位置
varmoveTo=cc.moveTo(2,0));
mySprite1.runAction(moveTo);
//在2秒内向右移动精灵50像素
varmoveBy=cc.moveBy(2,0));
mySprite2.runAction(moveBy);
Rotate
在2秒内顺时针旋转一个Node。
15
mySprite1=
mySprite1.setPosition(cc.p(winSize.width/4,winSize.height/4));
.addChild(mySprite1);
mySprite2=
cc.Sprite(res.node_png);
mySprite2.setPosition(cc.p(winSize.width/4,winSize.height/4*3));
.addChild(mySprite2);
rotateTo=cc.rotateTo(2.0,40.0);
mySprite1.runAction(rotateTo);
rotateBy=cc.rotateBy(2.0,40.0);
mySprite2.runAction(rotateBy);
|
Scale
在2秒内放大3倍Node然后再在2秒内x轴缩小为0.5，y轴缩小为0.3。
18
19
20
21
22
23
24
25
//Scaleuniformlyby3xover2seconds
scaleBy1=cc.scaleBy(2.0,3.0);
scaleBy2=cc.scaleBy(2.0,0.5,0.3);
scaleBySeq1=cc.sequence(scaleBy1,scaleBy2);
mySprite1.runAction(scaleBySeq1);
scaleTo1=cc.scaleTo(2.0,3.0);
scaleTo2=cc.scaleTo(2.0,0.3);
scaleBySeq2=cc.sequence(scaleTo1,scaleTo2);
mySprite2.runAction(scaleBySeq2);
|
Fade In/Out
淡入一个Node.
它从0到255修改透明度. 这一动作的反向是淡出。
13
mySprite.setPosition(winSize.width/2,winSize.height/2);
.addChild(mySprite);
fadeIn=cc.fadeIn(1);
fadeOut=cc.fadeOut(2);
seq=cc.sequence(fadeOut,fadeIn);
mySprite.runAction(seq);
|
Tint
改变一个Node的RGB从当前颜色到一个自定义的着色。
22
//等待两秒
sleep=cc.delayTime(2);
showlog1=cc.callFunc(
(){
"tintToend"
);
});
showlog2=cc.callFunc(
(){
"tintBystart"
);
tintTo=cc.tintTo(2.0,120.0,232.0,254.0);
tintBy=cc.tintBy(2,120,232,254);
seq=cc.sequence(tintTo,showlog1,sleep,showlog2,tintBy);
Animate
使用Animate可以让你的Sprite对象做简单的原始动画。这只是在动画期间每隔一段时间替换显示帧。让我们细想下这个例子吧。
cc.spriteFrameCache.addSpriteFrames(res.running_plist);
cc.Sprite(res.runner_png);
.addChild(mySprite);
SpriteFrame=[];
for
(
i=0;i<8;i++){
str=
"runner"
+i+
".png"
;
frame=cc.spriteFrameCache.getSpriteFrame(str);
SpriteFrame.push(frame);
}
animation=
cc.Animation(SpriteFrame,0.1);
animate=cc.animate(animation);
mySprite.runAction(cc.repeatForever(animate));
|
很难在文本描述动画,所以请运行这个动作的示例代码来查看效果。
Easing
Easing是指定加速度的动画，以使动画平滑。 请记住无论是何种速度，ease动作总是在相同的时间开始和结束。Ease动作是一个在你的游戏里伪造一个物理现象的好方法。或许你需要一些模拟的物理但是又不想增加开锁并增加几个非常基本的动力。 另一个很好的例子是动画菜单和按钮。
下面画片展示了常见的Easing函数：
Cocos2d-js支持Easing比上图提供的更多。它们也很容易实现。让我们来看看一个特定的用例吧。我们让一个Sprite对象从屏幕的顶端掉下来并反弹。
20
| //createasprite
cc.Sprite(res.node_png);
.addChild(mySprite);
move=cc.moveBy(2,cc.p(0,-mySprite.getPositionY()+mySprite.getContentSize().height/2));
move_back=move.reverse();
move_ease_in=move.easing(cc.easeIn(2));
move_ease_in_back=move_back.easing(cc.eaSEOut(2));
delay=cc.delayTime(0.25);
seq1=cc.sequence(move_ease_in,delay,move_ease_in_back,delay);
mySprite.runAction(cc.repeatForever(seq1));
|
请运行这个动作的示例代码来查看效果。
Sequences以及如何来运行他们
Sequences是按顺序来执行一系列Action对象。这可以是任意数量的Action对象、Functions甚至是其他的Sequence。函数?是的! Cocos2d-js有一个CallFunc对象， 它允许你创建一个function()并传递给你正要执行的Sequence。除了Cocos2d-js规定的stockAction对象,这允许你增加自己的功能到你的Sequence对象中。下面就是当Sequence执行时的样子：
一个 sequence的例子
23
//createafewactions.
jump=cc.jumpBy(0.5,0),100,1);
rotate=cc.rotateTo(2,10);
callbackJump=cc.callFunc(
(){
"Jumped!"
);
});
callbackRotate=cc.callFunc(
(){
"Rotated!"
);
});
seq=cc.sequence(jump,callbackJump,rotate,callbackRotate);
|
//create2actionsandrunaSpawnonaSprite
mySprite1.setPosition(winSize.width/4,winSize.height*3/4);
.addChild(mySprite1);
moveBy1=cc.moveBy(10,cc.p(400,100));
fadeTo1=cc.fadeTo(2,120);
cc.Sprite(res.node_png);
mySprite2.setPosition(winSize.width/4,winSize.height*2/4);
.addChild(mySprite2);
moveBy2=cc.moveBy(10,100));
fadeTo2=cc.fadeTo(2,120);
|
使用一个Spawn:
3
//runningtheaboveActionswithSpawn.
mySpawn=cc.spawn(moveBy1,fadeTo1);
mySprite1.runAction(mySpawn);
|
以及连续的runAction()语句：
//runningtheaboveActionswithconsecutiverunAction()statements.
mySprite2.runAction(moveBy2);
mySprite2.runAction(fadeTo2);
两个将会产生相同的结果。 然而，你可以在Sequence使用Spawn。这个流程图展示它看起来的样子：
//createaSprite
mySprite3=
mySprite3.setPosition(winSize.width/4,winSize.height*1/4);
.addChild(mySprite3);
moveBy3=cc.moveBy(10,30));
fadeTo3=cc.fadeTo(2.,120);
scaleBy3=cc.scaleBy(2,3);
mySpawn3=cc.spawn(scaleBy3,fadeTo3);
seq3=cc.sequence(moveBy3,mySpawn3,moveBy3);
mySprite3.runAction(seq3);
Reverse
Reverse就像它看起来那样执行。如果你运行一系列动作，你可以调用reverse()来用相反的方向来执行它。然而不仅仅是简单地在相反运行。它实际上也操作在reverse中原始Sequence或Spawn的内容。使用上面的Spawn例子来产生反向动作是很简单的。
2
mySprite.runAction(mySpawn.reverse());
|
大多数Action和Sequence对象都是可逆的。
它使用起来很简单，但是让我们来确认下我们看见发生了什么。给出的例子：
20
mySprite.setPosition(50,56);
scaleBy=cc.scaleBy(2,2);
delay=cc.delayTime(2);
delaySequence=cc.sequence(delay,delay.clone(),delay.clone());
sequence=cc.sequence(moveBy,scaleBy,delaySequence);
mySprite.runAction(sequence.repeatForever());
mySprite.runAction(sequence.reverse().repeatForever());
|
什么正在发生 ？我们列出的步骤的列表可能是有益于理解的：
mySprite被创建
mySprite的坐标设置成 (50,56)
sequence开始执行
sequence移动mySprite向右 500,用时2秒,mySprite的新坐标是(550,252);">sequence等待2秒
sequence在2秒内放大mySprite2倍
sequence等待另外6秒 (注意我们运行另一个序列来完成这一任务)
我们在sequence上执行reverse， 所以我们运行了每个动作的倒退
sequence等待6秒
mySprite -2x
sequence向右移动mySprite-500,在2秒内,252);">mySprite的新坐标是 (50,56)
你可以看到reverse()使用起来很简单，但它的内在逻辑没那么简单。 Cocos2d-js 做了大部分艰巨的任务！
源引：http://my.oschina.net/soarwilldo/blog/418668
