javascript - How to control animation speed (requestAnimationFrame)? - Stack Overflow

admin管理员组

文章数量:1289951

I change the text color with requestAnimationFrame(animate); function:

requestAnimationFrame(animate);

function animate(time){
  ... // change text color here
  if (offset_s < offset_e) {requestAnimationFrame(animate);}
}

offset_s and offset_s indicates start and end positions of the text for color change. In some cases the animation should last for 2 seconds, but in order cases - for 5 seconds, but offset_e - offset_s could be the same in these two cases. What can I do to control the speed of animation based on given time in seconds/milliseconds?

I change the text color with requestAnimationFrame(animate); function:

requestAnimationFrame(animate);

function animate(time){
  ... // change text color here
  if (offset_s < offset_e) {requestAnimationFrame(animate);}
}

offset_s and offset_s indicates start and end positions of the text for color change. In some cases the animation should last for 2 seconds, but in order cases - for 5 seconds, but offset_e - offset_s could be the same in these two cases. What can I do to control the speed of animation based on given time in seconds/milliseconds?

• javascript
• animation
• canvas
• html5-canvas
• requestanimationframe

Share Improve this question Follow asked Jan 16, 2015 at 10:57 LA_LA_ 20.4k6060 gold badges179179 silver badges318318 bronze badges 2

• possible duplicate of Controlling fps with requestAnimationFrame? – joews Commented Jan 16, 2015 at 11:03
• if you're only changing the color you could use a css animation, it's easier to control time with it – Luizgrs Commented Jan 16, 2015 at 11:40

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

From the tags of the question i can only see that you animate something drawn on canvas and thats why u cannot use css-animation or jquery-animation.

You have to control the length of the animation by calculating the time difference.

u can do it similar to this example

function start_animate(duration) {
  var requestID;
  var startTime =null; 
  var time ;   

  var animate = function(time) {


   time = new Date().getTime(); //millisecond-timstamp

   if (startTime === null) {
        startTime = time;
   }
   var progress = time - startTime;

   if (progress < duration ) {

       if(offset_s < offset_e){
         // change text color here

       }
       requestID= requestAnimationFrame(animate);
   } 
   else{
      cancelAnimationFrame(requestID);
   }
   requestID=requestAnimationFrame(animate);
  }
  animate();
}

trigger your animation and call start_animate(2000) //duration in millisecond 1000=1 sec

You should separate concerns clearly.
Have a single requestAnimationFrame running, which putes the current animation time and calls every update and draw related functions.
Then your animations would be handled by a function (or class instance if you go OOP) that deals with the current animation time.

Just some direction for the code :

var animationTime = -1;
var _lastAnimationTime = -1;

function launchAnimation() {
    requestAnimationFrame(_launchAnimation);
}    

function _launchAnimation(time) {
    animationTime = 0;
    _lastAnimationTime = time;
    requestAnimationFrame(animate);
}

function animate(time){
  requestAnimationFrame(animate);
  var dt = time - _lastAnimationTime ;
  _lastAnimationTime = time;
  animationTime += dt;

  // here call every draw / update functions
  //  ...
  animationHandler.update(animationTime);
  animationHandler.draw(context);
}

To start your 'engine', just call launchAnimation then you'll have a valid animationTime and dt to deal with.

I'd make animationHandler an instance of an AnimationHandler class, that allows to add/remove/update/draw animations.

I suggest to use setInterval function in JavaScript.

requestAnimationFrame really needs some 'ugly' calculations. Don't believe me? Scroll up, you will see...

So, to make setInterval function as handy as rAF(requestAnimationFrame) store the function inside of variable. Here is an example:

var gameLoop = setInterval(function() {
  update();
  draw();
  if (gameOver)
    clearInterval(gameLoop);
}, 1000/FPS);

given way, you can control your FPS and pick correct velocity for your objects.

I typically do something like

es6

constructor() {
    this.draw();
}

draw() {
    const fps30 = 1000 / 30;
    const fps60 = 1000 / 60;
    window.requestAnimationFrame(() => {
        setTimeout(this.draw.bind(this), fps30);
    });
}

es5

function DrawingProgram() {
    this.draw();
}

DrawingProgram.prototype.draw = function() {
    var fps30 = 1000/30;
    var fps60 = 1000/60;
    var self = this;
    window.requestAnimationFrame(function() {
        window.setTimeout(function() {
            self.draw(); // you could also use apply/call here if you want
        }, fps30)
    });
}

本文标签： javascriptHow to control animation speed (requestAnimationFrame)Stack Overflow