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

我正在做一个网站，它有很多由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();

//管理网站动画的构造函数
函数SpriteAnimation（frameWidth、spriteWidth、spriteElement、shouldLoop、frameRate）{
this.frameWidth=frameWidth；
this.spriteWidth=spriteWidth；
this.selector=document.getElementById（spriteElement）；
this.shouldLoop=shouldLoop；
这个.curPx=0；
this.frameRate=帧速率；
这是1.ti；
}
SpriteAnimation.prototype.start=函数（）{
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）{
这个.curPx=0；
这个。start（）；
}
};
var字母=新的精神化（935.417774，“字母”，真，60）；
字母。开始（）；

此函数递归调用自身，没有基本大小写。一旦调用它，就会锁定UI并使调用堆栈溢出

SpriteAnimation.prototype.start = function(){
    ... some code ...
    this.start();

}

---

您的代码中存在一些问题，请按影响顺序在此处列出：

• 递归调用start
• 失去了对这一点的参考
• 设置超时后立即清除超时
• 未使用的变量
• 在每次迭代中选择元素

下面是一些更好的代码（有效）：

函数SpriteAnimation（frameWidth、spriteWidth、spriteElement、shouldLoop）{
this.frameWidth=frameWidth；
this.spriteWidth=spriteWidth；
this.selector=document.getElementById（spriteElement）；
这个.curPx=0；
this.shouldLoop=shouldLoop；
}
SpriteAnimation.prototype.start=函数（）{
this.selector.style.backgroundPosition=“-”+this.curPx+“px 0px”；
this.curPx+=this.frameWidth；
如果（this.curPx问题是你在start方法的末尾再次调用start。我想我必须这样做才能实现循环动画，即使我不再调用它，动画也不起作用。你指的是一个基本情况是什么？我想知道为什么当你调用this.start you bin this时，我想在ob中总是会引用它但是传递给setTimeout的回调在全局范围内被调用。如果你想在内部使用
this
，你需要将它绑定到某个东西上。很抱歉，如果我是个局外人，我只是在学习javascript，正如你所看到的，如果我想检查动画是否必须循环使用isLoop参数，我应该如何检查？…应该我需要一个循环动画和非循环的其他方法？刚刚编辑了我的问题，你可以看到我的最终代码，让我知道你的想法
function SpriteAnimation(frameWidth, spriteWidth, spriteElement, shouldLoop){
    this.frameWidth = frameWidth;
    this.spriteWidth = spriteWidth;
    this.selector = document.getElementById(spriteElement);
    this.curPx = 0;
    this.shouldLoop = shouldLoop;
}

SpriteAnimation.prototype.start = function(){
    this.selector.style.backgroundPosition = "-" + this.curPx + "px 0px";
    this.curPx += this.frameWidth;

    if (this.curPx <= this.spriteWidth){
        setTimeout(this.start.bind(this), 2000);
    } else if (this.shouldLoop) {
        this.curPx = 0;
        this.start();
    }
};

var letter = new SpriteAnimation(935.4, 17774, "letter", true);
letter.start();