Cocos2d-js 3.x 动作 moveTo

发布时间：2020-12-14 17:29:36 所属栏目：百科来源：网络整理

导读：Action 对象就像它看起来的一样,让 Node 执行一个对属性的变化. Action 对象允许及时地转化 Node 属性。继承自 Node 的对都可以在上面执行 Action 对象。举个例子，你可以移动在一个段时间内把 Sprite 一个从一个坐标移动到另一个坐标。 MoveTo 和 MoveBy

Action对象就像它看起来的一样,让Node执行一个对属性的变化.Action对象允许及时地转化Node属性。继承自Node的对都可以在上面执行Action对象。举个例子，你可以移动在一个段时间内把Sprite一个从一个坐标移动到另一个坐标。

MoveTo和MoveBy动作的例子：

 
    ? 
   
         //在2秒内移动精灵到坐标50,10 
        
         var 
         moveTo=cc.moveTo(2,cc.p(50,10)); 
        
         mySprite1.runAction(moveTo); 
        
         //在2秒内向右移动20个点 
        
         moveBy=cc.moveBy(2,cc.p(20,0)); 
        
         mySprite2.runAction(moveBy);

By和To有什么区别呢?

你将会注意到每一个Action都有一个By和To版本.。为什么呢？他们有不同的实现方式。By是相对于Node的当前状态。Toaction 是绝对的,这意味着不用考虑Node的当前状态。让我们看一个具体的例子:

 
         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()+ 
         ); 
        
         //MoveBy-让我们2秒内在x坐标上移动精灵200像素 
        
         //MoveBy是相对的-x=200+200，在移动后是400 
        
         //MoveTo-让我们2秒内移动精灵到（300，256） 
        
         //MoveTo是绝对-不管现在在什么位置，精灵都将移动到（200，256） 
        
         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); 
        

 
         //RotatesaNodetothespecificangleover2seconds 
        

 
         rotateTo=cc.rotateTo(2.0,40.0); 
        

 
         mySprite1.runAction(rotateTo); 
        

 
         //RotatesaNodeclockwiseby40degreeover2seconds 
        

 
         rotateBy=cc.rotateBy(2.0,40.0); 
        

 
         mySprite2.runAction(rotateBy); 
        

在2秒内放大3倍Node然后再在2秒内x轴缩小为0.5，y轴缩小为0.3。

Tint

Sequences以及如何来运行他们

Sequences是按顺序来执行一系列Action对象。这可以是任意数量的Action对象、Functions甚至是其他的Sequence。函数?是的! Cocos2d-js有一个CallFunc对象，它允许你创建一个function()并传递给你正要执行的Sequence。除了Cocos2d-js规定的stockAction对象,这允许你增加自己的功能到你的Sequence对象中。下面就是当Sequence执行时的样子：

一个 sequence的例子

两个将会产生相同的结果。然而，你可以在Sequence使用Spawn。这个流程图展示它看起来的样子：

Reverse就像它看起来那样执行。如果你运行一系列动作，你可以调用reverse()来用相反的方向来执行它。然而不仅仅是简单地在相反运行。它实际上也操作在reverse中原始Sequence或Spawn的内容。使用上面的Spawn例子来产生反向动作是很简单的。

它使用起来很简单，但是让我们来确认下我们看见发生了什么。给出的例子：

你可以看到reverse()使用起来很简单，但它的内在逻辑没那么简单。 Cocos2d-js 做了大部分艰巨的任务！

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!