Javascript帮助，尝试同时设置两个不同精灵的动画

我需要一些javascript帮助。我试图在两个单独的分区中设置两个具有不同帧速率的精灵动画

这是我开始演奏的小提琴，我被卡住了

如何将两个div id组合成一个语句？或者我应该在语句中使用ClassName在两个div上运行

onload=函数startAnimation（）{
var frameHeight=400；
var帧=27；
var帧=0；
var div=document.getElementById（“动画”）；
setInterval（函数（）{
var frameOffset=（++frame%帧）*-帧高度；
div.style.backgroundPosition=“0px”+帧偏移量+“px”；
}, 100); 
}   

---

谢谢你的帮助

您可以这样做：

var div = document.getElementById("animate"); 
var div2 = document.getElementById("animate2");

function anim(div) {
    setInterval(function () { 
        var frameOffset = (++frame % frames) * -frameHeight; 
        div.style.backgroundPosition = "0px " + frameOffset + "px"; 
    }, 100); 
}

anim(div);
anim(div2);

然后，您可以传入其他参数，如frameHeight、frame和frames，以进一步自定义每个动画。

我制作了一个Can对象来存储每个Can的配置（因此可以有不同的帧高、帧数和帧率）

我使用window.requestAnimationFrame，因为它比setInterval效率高很多。在每个可用帧上，我检查是否需要根据每个Can的设置帧速率设置动画：

var Can = function( selector, frameHeight, frames, frameRate )
{
    this.domCan = document.getElementById( selector );
    this.frameHeight = frameHeight;
    this.frames = frames;
    this.frameRate = frameRate;
    this.frame = 0;
};

onload = function startAnimation() { 
    var can1 = new Can( 'animate', 400, 27, 20 );
    var can2 = new Can( 'animate2', 400, 27, 100 );

    var cans = [ can1, can2 ]; 

    window.requestAnimationFrame( function() {
        can1.start = can2.start = new Date();
        animate( cans );
    } );
};

var animate = function( cans ) {
    for( var i = 0; i < cans.length; i++ ) {       
        var now = new Date();
        var can = cans[i];
        if( now - can.start >= 1000 / can.frameRate ) {
            can.start = now;
            var frameOffset = (++can.frame % can.frames) * -can.frameHeight; 
            can.domCan.style.backgroundPosition = "0px " + frameOffset + "px";
        }
    }
    window.requestAnimationFrame( function() {
        animate( cans );
    } );
}

var Can=函数（选择器、帧高、帧、帧率）
{
this.domCan=document.getElementById（选择器）；
this.frameHeight=frameHeight；
这个。帧=帧；
this.frameRate=帧速率；
此.frame=0；
};
onload=函数startAnimation（）{
var can1=新Can（‘动画’、400、27、20）；
var can2=新Can（'animate2'，400,27,100）；
变量cans=[can1，can2]；
window.requestAnimationFrame（函数（）{
can1.start=can2.start=new Date（）；
制作（罐头）动画；
} );
};
var animate=函数（罐头）{
对于（var i=0；i=1000/can.frameRate）{
can.start=现在；
var frameOffset=（++can.frame%can.frames）*-can.frameHeight；
can.domCan.style.backgroundPosition=“0px”+帧偏移量+“px”；
}
}
window.requestAnimationFrame（函数（）{
制作（罐头）动画；
} );
}

使用您已经开始使用的方法执行此操作的最简单方法是定义两个新变量，一个用于第二个div，一个用于第二个帧计数。然后您可以将调用添加到函数中

更新js:

onload = function startAnimation() { 
var frameHeight = 400; 
var frames = 27; 
var frame = 0; 
var div = document.getElementById("animate"); 
var div2 = document.getElementById("animate2");
setInterval(function () { 
    var frameOffset = (++frame % frames) * -frameHeight; 
    var frameOffset2 = (++frame % frames) * -frameHeight - 10; 
    div.style.backgroundPosition = "0px " + frameOffset + "px"; 
    div2.style.backgroundPosition = "0px " + frameOffset + "px"; 
}, 100);

}   

---

问题是什么？你有什么具体的问题？试着把问题写出来，这样答案就可以清楚明了，也可以切中要害=）p.S.JSFIDLE不是为我运行的。谢谢@Mwr247我编辑了这篇文章并修复了JFIDLE链接。“这就是你想要达到的吗？”AnthonyTJRivas我认为这可能涉及不同的帧速率。对安克说：你希望第二次运行的帧速率是多少？@Mwr247在我发布之后，我注意到了这一点。已经有一个更新的小提琴编辑到评论！谢谢你的回复，我最后使用了上面的@AnthonyTJRivas方法。我也喜欢你的方法。感谢您分享并向我展示了一种不同的方法。

onload = function startAnimation() { 
var frameHeight = 400; 
var frames = 27; 
var frame = 0; 
var div = document.getElementById("animate"); 
var div2 = document.getElementById("animate2");
setInterval(function () { 
    var frameOffset = (++frame % frames) * -frameHeight; 
    var frameOffset2 = (++frame % frames) * -frameHeight - 10; 
    div.style.backgroundPosition = "0px " + frameOffset + "px"; 
    div2.style.backgroundPosition = "0px " + frameOffset + "px"; 
}, 100);

}