cocos2d-js moveTo 和动画动作答案

【问题标题】：cocos2d-js moveTo and animate actioncocos2d-js moveTo 和动画动作
【发布时间】：2014-09-20 23:54:52
【问题描述】：

我有一个 moveTo 精灵动作，我试图让精灵在移动时动画。这是一个行走的动画。

我的麻烦是我可以让精灵 moveTo 或动画但不能同时使用，这样当精灵停止移动时，动画会回到站立框架。

我正在使用 cocos2d-js v3.0

this.sprite = new cc.Sprite.create("#player-stand-f-0");
this.sprite.setPosition(new cc.Point(300,300));
this.addChild(this.sprite);

    var animFrames = [];
    var str = "";
    for (var i = 0; i < 5; i++) {
        str = "player-walk-f-" + i;
        var spriteFrame = cc.spriteFrameCache.getSpriteFrame(str);
       var animFrame = new cc.AnimationFrame();
        animFrame.initWithSpriteFrame(spriteFrame, 1, null);
        animFrames.push(spriteFrame);
    }

var animation = cc.Animation.create(animFrames, 0.025);
var animate   = cc.animate(animation);

sprite_action = cc.MoveTo.create(2,cc.p(x,y));
this.sprite.runAction(sprite_action);
this.sprite.runAction(animate);

我也尝试了以下方法，但步行会动画一次，直到 moveTo 停止才会继续。

var seq = cc.sequence(animate, sprite_action);

【问题讨论】：

单独调用这些操作是否有效？我的意思是，您是否尝试过仅注释掉其中一个 runAction 调用，以查看如果未调用另一个调用它们是否按预期工作？
如果是，你试过cc.spawn(animate, sprite_action)吗？（题外话：注意cc.spawn() 等于cc.Spawn.create()，这适用于所有其他操作。.create() 方法已弃用）
是的，动作单独运行。它们也按顺序一起运行，但动画只循环一次，而不是在移动期间
是的，我已经尝试过 .spawn 并且动画只运行一个循环，就像序列一样
Bloop。我能想到的只是在官方论坛上提问。那边的人对框架的内部运作有更好的了解。

标签： cocos2d-js cocos2d-html5

【解决方案1】：

如果你使用“cc.sequence”动作，它会先动画然后移动。但是，如果您想在移动精灵表时为其设置动画，有两种方法可以实现：查看“cc.Spawn”动作。它用于您需要的目的。另一种方便的方法是同时运行两个动作。下面提到的代码会给你这个想法。

    // create sprite sheet
    cc.SpriteFrameCache.getInstance().addSpriteFrames(spritesheet_plist); // add Spritesheet Plist 
    var SpriteSheet = cc.SpriteBatchNode.create(spritesheet_png);  // add Spritesheet Png
    this.addChild(SpriteSheet,1);

    // Push the frames for animation
    var animFrames = [];
    for (var i = 0; i < 6; i++) {
        var str = "sequence_" + i + ".png";
        var frame = cc.SpriteFrameCache.getInstance().getSpriteFrame(str);
        animFrames.push(frame);
    }


    // taadaa ...!!  Animate the sprites
    var animation = cc.Animation.create(animFrames, 0.06);
    var sprite = cc.Sprite.createWithSpriteFrameName("sequence_0.png");
    sprite.setAnchorPoint(0.5,0.5); // optional
    sprite.setScale(1.0,1.0); // optional
    sprite.setPosition(widhthPostion, heightPosition);
    sprite.runAction(cc.RepeatForever.create(cc.Animate.create(animation)));
    SpriteSheet.addChild(sprite,1);


    // Move the sprite
    var actionMove = cc.MoveTo.create(duration, cc.p(destinationX, destinationY));
    sprite.runAction(actionMove);

【讨论】：

感谢您的回复，但我的问题是移动完成后如何停止行走动画？他的行走动画应该在移动开始时开始，在到达 xy 时结束
而不是“sprite.runAction(cc.RepeatForever.create(cc.Animate.create(animation)));”使用 var animate = cc.RepeatForever.create(cc.Animate.create(animation));然后在移动动作中添加调用函数 var actionMoveDone = cc.CallFunc.create(function(node) { sprite.stopAction(animate); }, this); sprite.runAction(cc.Sequence.create(actionMove, actionMoveDone));