Javascript 求助，尝试同时为两个不同的精灵制作动画

Question

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

这是一个 fiddle 我开始了，但我被困住了。

如何将两个 div ID 合并到一个语句中？或者我是否应该在 div 的运行语句中使用 ClassName？

http://jsfiddle.net/akwilinski/3t7d6qbL/1/

<div id="animate" class="animation"></div>
<div id="animate2" class="animation2"></div>

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

}

感谢您的帮助！

Answer 1

你可以这样做：

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 以进一步自定义每个动画。

Answer 2

http://jsfiddle.net/f4v1vy7x/5/

我制作了一个 Can 对象来存储每个罐头的配置（这样你就可以有不同的 frameHeights、frames 和 frameRates。

我使用 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 );
    } );
}

Answer 3

使用您已经开始使用的方法来执行此操作的最简单方法是定义 2 个新变量，1 个用于第二个 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);

}

Fiddle

Javascript 求助，尝试同时为两个不同的精灵制作动画

Javascript help, Trying to animate two different sprites at same time

javascript

jquery

animation

sprite