0

我正在做一个网站，它有很多由 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 个小时试图实现这一点，然后你出来让它变得非常简单，这就是我的代码现在的样子，我添加了另一个参数：帧速率。所以每个动画都可以有不同的帧速率。还修改了一点 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();
4

2 回答 2

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

演示：http: //jsbin.com/oJIYoRU/1/edit

于 2013-10-31T15:14:29.743 回答
0

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

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

}
于 2013-10-31T15:02:50.617 回答