Not sure what I'm doing wrong here...
window.requestAnimFrame = function(){
return (
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(/* function */ callback){
window.setTimeout(callback, 1000 / 60);
}
);
}();
function animationSequence(elem, ind) {
this.ind = ind;
this.elem = elem;
this.distance = 450;
this.duration = 900;
this.increment = 0;
this.start = Math.abs(this.ind)*450;
var requestId = requestAnimFrame(this.animate);
this.move();
this.move = function() {
this.elem.style.left = this.start - this.increment + "px";
}
this.animate = function() {
var self = this;
this.move();
this.increment += 5;
if (this.increment >= 450) {
if (this.ind == 0) { console.log("true"); this.elem.style.left = "1350px" }
cancelAnimFrame(requestId);
}
}
// this.animate();
}
If you assign your requestAnimationFrame() method to a variable, you can use the cancelAnimationFrame() method to cancel it before it runs.
requestAnimationFrame() The window. requestAnimationFrame() method tells the browser that you wish to perform an animation and requests that the browser calls a specified function to update an animation before the next repaint. The method takes a callback as an argument to be invoked before the repaint.
If your animation requires a different frames per second (up to 60 fps) or simply doesn't require that high a level of refresh rate, you can slow it down by calling requestAnimationFrame inside setTimeout() .
The time stamp is: current time for when requestAnimationFrame starts to fire callbacks. The main difference between an ordinary timestamp and high-res timestamp is: DOMTimeStamp only has millisecond precision, but DOMHighResTimeStamp has a minimal precision of ten microseconds.
Ok so help me out if I'm getting you wrong - is your problem that you have lost your reference to this
within the animate method? i.e. you can't call this.move()
or increment the increment?
If so try this-
var requestId = requestAnimFrame(this.animate.bind(this));
See this answer about binding with requestAnimation callbacks here.
And this blog post on binding.
Update May 2019
If you can use ES6 you can employ an arrow function, which will maintain scope like this:
let requestId = requestAnimFrame(() => { this.animate(); });
Read about arrow functions here:
Blog post about arrow functions and the keyword this
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With