Databases
StackOverflow2013
Postsdbo
POObject constructor - managing loop animation
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POObject constructor - managing loop animation
    text
    copied!<p>I am doing a website wich has a lot of animations managed by JavaScript, when i started i just defined a function and some variables for the animation and repeat the process, like this. And a think is not the good way.</p> <pre><code>//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 &gt;= 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); </code></pre> <p>So know, I decided to use a constructor to re use the same code and manage all the animations in the website. i came with Something like this: </p> <pre><code>// 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(); </code></pre> <p>I am having problems in performance, every time i run the code my browser just crash i also think im not doing good the loop. So here comes my question: how can i do to manage the animations with an object constructor in wich i can pass parameters like if it is loop animation and the sprite parameters?... I appreciate the help you guys can bring me :)</p> <p>@Tibos Your code has been from great help for me i just spent almost 4 hours trying to achieve this, and then yo came out and make it really easy, this is how my code looks now, i added another parameter: frame rate. so every animation can have a different frame rate. Also modified a bit the if statement because the animation was running untill the sprite dissapear and i need them to stay in the last frame, let me know if this is the correct form.</p> <pre><code>// 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 &lt; (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(); </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload