Question

我正在做一个有很多动画由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();

我在性能方面遇到问题，每次运行代码时我的浏览器都会崩溃我也认为我没有做好循环。所以这里有我的问题：如何使用对象构造函数来管理动画我可以传递参数，如果它是循环动画和精灵参数？...我感谢你们可以带给我的帮助：）< / p>

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

// 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();

Answer 1

您的代码中存在一些问题，按照影响顺序显示在此处：

递归调用start
失去对此
设置后立即清除超时
未使用的变量
在每次迭代时选择元素

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

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();

DEMO：http://jsbin.com/oJIYoRU/1/edit

Answer 2

此函数以递归方式调用自身，没有基本情况。一旦调用它，您将锁定UI并溢出调用堆栈。

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

}

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

2 个答案: