对象构造函数 - 管理循环动画

我正在做一个网站，里面有很多由JavaScript管理的动画，当我开始的时候，我只是为动画定义了一个函数和一些变量，然后重复这个过程，就像这样。思考不是好方法。

//BRIGHT ANIMATION  
var frameWidth1 = 386;
var frameHeight1 = 100;
var spriteWidth1 = 20067;
var spriteHeight1 = 100;
var spriteElement1 = document.getElementById("bright");
var curPx1 = 0;
var ti1;
function animateSpriteB() {
    spriteElement1.style.backgroundPosition = "-" + curPx1 + 'px 0px';
    curPx1 = curPx1 + frameWidth1;
    if (curPx1 >= spriteWidth1) {
        curPx1 = 0;
    }
    ti1 = setTimeout(animateSpriteB, 70);
}
animateSpriteB();

//  PAPIRO ANIMATION
var frameWidth = 56;
var frameHeight = 218;
var spriteWidth = 2016;
var spriteHeight = 218;
var spriteElement = document.getElementById("roll-off");
var curPx = 0;
var ti;
function animateSprite() {
    spriteElement.style.backgroundPosition = "-" + curPx + 'px 0px';
    curPx = curPx + frameWidth;
    ti = setTimeout(animateSprite, 27.7);
    if (curPx === spriteWidth) {
        clearTimeout(ti);
    }
}
function slideMask(){
    var mask = $("#paper-mask");
    var paper = $("#paper");
    mask.animate({
        width: 450
    },{
        duration: 1000,
        complete: function(){
            $("#paper-content").fadeIn();
        }
    });
}
var ti = setTimeout(function(){
    animateSprite();
    slideMask();
}, 3000);

所以知道，我决定使用构造函数来重新使用相同的代码并管理网站中的所有动画。 我带来了这样的东西：

// CONSTRUCTOR WHO MANAGE THE ANIMATIONS FOR THE WEBSITE
        function SpriteAnimation(frameWidth, spriteWidth, spriteElement, isLoop){
            this.frameWidth = frameWidth;
            this.spriteWidth = spriteWidth;
            this.spriteElement = spriteElement;
            this.isLoop = isLoop;
            this.curPx = 0;
            this.ti;
        }
        SpriteAnimation.prototype.start = function(){
            var selector = document.getElementById(this.spriteElement);
            selector.style.backgroundPosition = "-" + this.curPx + "px 0px";
            this.curPx = this.curPx + this.frameWidth;
            this.ti = setTimeout(this.start, 2000);
            if (this.curPx === this.spriteWidth){
                clearTimeout(this.ti);
            }
            this.start();
        }
        var letter = new SpriteAnimation(935.4, 17774, "letter", true);
        letter.start();

我在性能方面遇到了问题，每次我运行代码时，我的浏览器都会崩溃，我也认为我没有做好循环。所以我的问题来了：我该如何使用对象构造函数来管理动画，我可以传递参数，例如循环动画和精灵参数?...我很感激你们能给我带来的帮助:)

@Tibos 您的代码对我有很大帮助 我刚刚花了将近 4 个小时试图实现这一目标，然后 yo 出来让它变得非常简单，这就是我的代码现在的样子，我添加了另一个参数：帧速率。 因此，每个动画都可以具有不同的帧速率。还修改了一下 if 语句，因为动画一直运行到精灵消失，我需要它们停留在最后一帧，让我知道这是否是正确的形式。

// CONSTRUCTOR WHO MANAGE THE ANIMATIONS FOR THE WEBSITE
        function SpriteAnimation(frameWidth, spriteWidth, spriteElement, shouldLoop, frameRate){
            this.frameWidth = frameWidth;
            this.spriteWidth = spriteWidth;
            this.selector = document.getElementById(spriteElement);
            this.shouldLoop = shouldLoop ;
            this.curPx = 0;
            this.frameRate = frameRate;
            this.ti;
        }
        SpriteAnimation.prototype.start = function(){
            this.selector.style.backgroundPosition = "-" + this.curPx + "px 0px";
            this.curPx += this.frameWidth;
            if (this.curPx < (this.spriteWidth - this.frameWidth)){
                setTimeout(this.start.bind(this), this.frameRate);
            } else if (this.shouldLoop) {
                this.curPx = 0;
                this.start();
            }
        };
        var letter = new SpriteAnimation(935.4, 17774, "letter", true, 60);
        letter.start();