javascript 如何为requestAnimationFrame添加定时和延迟？

xghobddn 于 2023-09-29 发布在 Java

关注(0)|答案(2)|浏览(144)

我有一个设计，包括一个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/

JavaScript

来源：https://stackoverflow.com/questions/55860395/how-to-add-timing-and-delay-to-requestanimationframe

2条答案

按热度按时间

eivgtgni1#

对于这样的需求，最好是有一个斯托克方法的回调，这样我们就知道什么时候绘图完成了。但是我们没有任何这样的实现。对于你的情况，一个简单的解决方案是在大约3秒后开始圆弧的动画，因为你已经明确提到了3秒的时间来渲染垂直条。查看更新的fiddle：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);

赞(0）回复(0）举报 2023-09-29

qojgxg4l2#

我用这个

requestAnimationFrame(() => {
        setTimeout(_fncName, 500, fnc_param);
    });

500是超时

赞(0）回复(0）举报 2023-09-29

我来回答

javascript 如何为requestAnimationFrame添加定时和延迟？

2条答案

相关问题

热门标签

最新问答