如何为 requestAnimationFrame 添加时间和延迟？答案

【问题标题】：How to add timing and delay to requestAnimationFrame?如何为 requestAnimationFrame 添加时间和延迟？
【发布时间】：2019-09-15 13:00:22
【问题描述】：

我的设计包括一个 SVG 矩形和一个绘制弧线的画布。我正在制作一个动画，其中矩形将首先增长，然后弧线将增长。

我快到了，但我的两个元素同时动画。

我正在使用 css 关键帧来制作矩形的动画，并在绘制时使用 requestAnimationFrame 为圆弧设置动画。

  .ss{

animation: myframes 3s ease-in-out 

}

@keyframes myframes {

from {

height: 0px;
}

to{
  height: 315px;
}

}

<svg  height="350" width="800">
    <rect  class="ss" x="415" y="51" filter="#008080" stroke-miterlimit="10" width="110" height="413">
    </rect>
</svg>
<canvas style="display: block;" id="bar" width="600" height="500">
</canvas>

var canvas = document.getElementById('bar'),
    width = canvas.width,
    height = canvas.height;


var ctx = canvas.getContext('2d');
ctx.lineWidth = 110;
ctx.strokeStyle = '#000';
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
ctx.shadowBlur = 10;


var x = width / 2,
    y = height / 98,
    radius = 170,
    circum = Math.PI * 2,
    start = Math.PI / -44, // Start position (top)
    finish = 37, // Finish (in %)
    curr = 0; // Current position (in %)

var raf =
    window.requestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function(f){return setTimeout(f, 9000/60)};

window.requestAnimationFrame = raf;


function animate(draw_to) {
  ctx.clearRect(0, 0, width, height);
  ctx.beginPath();
  ctx.arc(x, y, radius, start, draw_to, false);
  ctx.stroke();
  curr++;
  if (curr < finish + 1) {
    requestAnimationFrame(function () {
      animate(circum * curr /100 + start);
    });
  }
}

animate();

我想保持矩形动画现在的样子，但是当矩形完成时弧会开始动画（添加延迟），我希望弧的动画更慢（添加时间）

在下面添加一个小提琴： https://jsfiddle.net/r9t2v6g5/

【问题讨论】：

可以使用animationend event启动animate()函数

标签： javascript animation svg canvas keyframe

【解决方案1】：

对于这样的要求，最好有一个 stoke 方法的回调，以便我们知道绘图何时完成。但是我们没有任何这样的实现。对于您的情况，一种简单的解决方案是在大约 3 秒后启动 arc 动画，因为您已明确提到渲染垂直条的 3 秒时间。查看更新的小提琴：https://jsfiddle.net/cLrxhdnf/ 你可以根据自己的喜好调整圆弧动画速度，我只是添加了一个占位符。

function animateArc(angle) {
    console.log("animateArc : "+ angle);
  ctx.clearRect(width, height, width, height);

  ctx.beginPath();

  ctx.arc(x, y, radius, start, angle, false);

  ctx.stroke();

  curr++;

  if (angle < Math.PI) {
    requestAnimationFrame(function () {
      animateArc(angle + 0.05);
    });
  }
}

animate();
setTimeout(function() { animateArc(0.05)}, 2500);

【讨论】：