Question

我使用requestAnimationFrame(animate);函数更改文本颜色：

requestAnimationFrame(animate);

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

offset_s和offset_s表示颜色更改文本的开始和结束位置。在某些情况下，动画应持续2秒，但在顺序情况下 - 持续5秒，但在这两种情况下offset_e - offset_s可能相同。如何根据给定时间以秒/毫秒为单位控制动画的速度？

Answer 1

从问题的标签我只能看到你在画布上绘制的东西的动画，这就是为什么你不能使用css-animation或jquery-animation。

您必须通过计算时差来控制动画的长度。

你可以这样做

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

触发动画并调用start_animate（2000）//持续时间，以毫秒为单位1000 = 1秒

Answer 2

你应该清楚地区分问题运行一个requestAnimationFrame，它计算当前动画时间并调用每个更新并绘制相关函数然后你的动画将由处理当前动画时间的函数（或类实例，如果你去OOP）处理。

代码的一些方向：

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

要启动您的引擎＆＃39;，只需致电launchAnimation，然后您就会有一个有效的animationTime和dt来处理。

我要animationHandler AnimationHandler类的实例，允许添加/删除/更新/绘制动画。

Answer 3

我建议在JavaScript中使用setInterval函数。

requestAnimationFrame确实需要一些“丑陋”的计算。别相信我？向上滚动，您将看到...

因此，为了使setInterval像rAF（requestAnimationFrame）一样方便地将函数存储在变量内部。这是一个示例：

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

通过这种方式，您可以控制FPS并为物体选择正确的速度。

Answer 4

我通常会做类似的事情

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

如何控制动画速度（requestAnimationFrame）？

4 个答案: