如何控制动画速度(请求动画帧）

How to control animation speed (requestAnimationFrame)?

本文关键字：动画 速度 请求 控制 何控制      更新时间：2023-09-26

我用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可能是相同的。我该怎么做才能根据给定的秒/毫秒来控制动画的速度？

从问题的标签中，我只能看到您在画布上绘制了一些动画，这就是为什么您不能使用 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 秒

您应该清楚地区分关注点。
运行单个 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);
}

要启动您的"引擎"，只需调用launchAnimation，然后您将有一个有效的animationTime和dt来处理。

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

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

requestAnimationFrame真的需要一些"丑陋"的计算。不要相信我？向上滚动，您将看到...

因此，为了使setInterval函数像rAF（requestAnimationFrame）一样方便，请将函数存储在变量中。下面是一个示例：

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

给定的方式，您可以控制您的 FPS 并为您的对象选择正确的速度。

我通常会做类似的事情

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)
    });
}
相关文章：