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/

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

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

1 个答案: