Animation cocos2djs中的一个简单精灵表动画

基于helloworld示例和cocos-2d-xdocs（），我尝试制作一个简单的精灵表动画。代码如下：

this.mostafa = cc.Sprite.create(res.Mostafa_png);        
this.mostafa.attr({
    x: size.width / 3,
    y: size.height / 3,
    scale: 0.2,
    rotation: 180
});
this.addChild(this.mostafa, 0);
var rotate = cc.RotateTo.create(2, 0);

cc.spriteFrameCache.addSpriteFrames(res.Mostafa_plist);

var animFrames = [];
var str = "";
for (var i = 1; i < 9; i++) {
    str = "mosquito_fly" + (i < 10 ? ("0" + i) : i) + ".png";
    var frame = cc.spriteFrameCache.getSpriteFrame(str);
    animFrames.push(frame);
}
var animation = cc.Animation.create(animFrames, 0.04);
var animate   = cc.Animate.create(animation); 

this.mostafa.runAction(animate);  // shows nothing
//this.mostafa.runAction(rotate);   // shows turning sprite

this.mostafa=cc.Sprite.create（res.mostafa_png）；
这是mostafa.attr({
x:size.width/3，
y：尺寸。高度/3，
比例：0.2，
轮换：180
});
this.addChild（this.mostafa，0）；
var rotate=cc.RotateTo.create（2,0）；
cc.spriteFrameCache.addSpriteFrames（res.Mostafa_plist）；
var animFrames=[]；
var str=“”；
对于（变量i=1；i<9；i++）{
str=“蚊子”+（i<10？（“0”+i）：i）+“.png”；
var frame=cc.spriteFrameCache.getSpriteFrame（str）；
动画帧。推（帧）；
}
var animation=cc.animation.create（animFrames，0.04）；
var animate=cc.animate.create（动画）；
this.mostafa.runAction（动画）；//什么也看不出来
//this.mostafa.runAction（旋转）；//显示旋转的精灵

它没有显示任何东西。但是如果我把最后一行放进去，把第二行放出来，它就会显示一个旋转的精灵。（精灵帧缓存已正确加载）

---

缺少什么？

问题有两方面。首先，必须为动画定义纹理，其次，如果它应该是连续动画，则animFrames必须为animationFrame类型。工作代码如下（放入helloworld示例的ctor函数中）：

//创建精灵并设置属性
this.mostafa=cc.Sprite.create（res.mostafa\u single\u png）；
这是mostafa.attr({
x:size.width/3，
y：尺寸。高度/3，
比例：0.5，
轮换：0
});
this.addChild（this.mostafa，0）；
//将精灵帧加载到帧缓存，添加纹理节点
cc.spriteFrameCache.addSpriteFrames（res.Mostafa_plist）；
var mostafaTexture=cc.textureCache.addImage（res.Mostafa_png），
mostafaImages=cc.SpriteBatchNode.create（mostafaTexture）；
这是addChild（mostafaImages）；
var animFrames=[]；
var str=“”；
对于（变量i=1；i<9；i++）{
str=“蚊子”+（i<10？（“0”+i）：i）+“.png”；
var spriteFrame=cc.spriteFrameCache.getSpriteFrame（str）；
var animFrame=new cc.AnimationFrame（）；
animFrame.initWithSpriteFrame（spriteFrame，1，null）；
animFrames.push（animFrame）；
}
var animation=cc.animation.create（animFrames，0.08100）；
var animate=cc.animate.create（动画）；
this.mostafa.runAction（动画）；

垃圾=this；
cc.spriteFrameCache.addSpriteFrames（“res/e.plist”）；
spriteSheet=新的cc.SpriteBatchNode（“res/e.png”）；
垃圾。添加儿童（精神表，15）；
var animFrames=[]；
对于（变量i=1；i<19；i++）{
var str=“e/e”+i+.png”；
var frame=cc.spriteFrameCache.getSpriteFrame（str）；
动画帧。推（帧）；
}
var animation=新的cc.animation（animFrames，0.1）；
runningAction=new cc.RepeatForever（new cc.Animate（animation））；
mask=新的cc.Sprite（#e/e1.png”）；
mask.attr({
x:400，
y:105，
主播：0.5，
主播：0.5，
比例：0.5
});
spriteSheet.addChild（面具，25）；
mask.runAction（runningAction）

// Create sprite and set attributes
    this.mostafa = cc.Sprite.create(res.Mostafa_single_png);        
    this.mostafa.attr({
        x: size.width / 3,
        y: size.height / 3,
        scale: 0.5,
        rotation: 0
    });
    this.addChild(this.mostafa, 0);

// Load sprite frames to frame cache, add texture node
    cc.spriteFrameCache.addSpriteFrames(res.Mostafa_plist);
    var mostafaTexture = cc.textureCache.addImage(res.Mostafa_png),
        mostafaImages  = cc.SpriteBatchNode.create(mostafaTexture);
    this.addChild(mostafaImages);

    var animFrames = [];
    var str = "";
    for (var i = 1; i < 9; i++) {
        str = "mosquito_fly" + (i < 10 ? ("0" + i) : i) + ".png";
        var spriteFrame = cc.spriteFrameCache.getSpriteFrame(str);
        var animFrame = new cc.AnimationFrame();
            animFrame.initWithSpriteFrame(spriteFrame, 1, null);
        animFrames.push(animFrame);
    }
    var animation = cc.Animation.create(animFrames, 0.08, 100);
    var animate   = cc.Animate.create(animation); 

    this.mostafa.runAction(animate); 

junk = this;
cc.spriteFrameCache.addSpriteFrames("res/e.plist");
spriteSheet = new cc.SpriteBatchNode("res/e.png");
junk.addChild(spriteSheet,15);

var animFrames = [];
for (var i = 1; i < 19; i++) {
    var str = "e/e"+i+".png";
    var frame = cc.spriteFrameCache.getSpriteFrame(str);
    animFrames.push(frame);
}
var animation = new cc.Animation(animFrames, 0.1);
runningAction =  new cc.RepeatForever(new cc.Animate(animation));

mask = new cc.Sprite("#e/e1.png");
mask.attr({
    x: 400,
    y:105,
    anchorX: 0.5,
    anchorY: 0.5,
    scale:0.5
});
spriteSheet.addChild(mask,25);
mask.runAction(runningAction)