如何添加时间和延迟到requestAnimationFrame？

Question

我的设计包含一个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/