Как добавить время и задержку в requestAnimationFrame? - PullRequest
Новая
       42

Как добавить время и задержку в requestAnimationFrame?

0 голосов
/ 26 апреля 2019

У меня есть дизайн, который включает в себя прямоугольник 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/

1 Ответ

0 голосов
/ 26 апреля 2019

Для такого требования было бы лучше, если бы был обратный вызов для метода Сток, чтобы мы знали, когда рисование завершено.Однако у нас нет такой реализации.Одним из простых решений для вашего случая было бы запустить анимацию дуги примерно через 3 секунды, поскольку вы явно указали 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);
...