javascript - 如何控制动画速度(requestAnimationFrame)？

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

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