Question

我有一个带有使用requestAnimationFrame动画的SVG，并且动画可以工作，但是我想要做的是在3秒钟内设置动画，然后重复，所以圆圈的动画将在3秒钟内对dasharray和dashoffset设置动画，我不这样做知道如何使用CSS来执行此操作，因为它需要使用Math.Pi在javascript中进行计算，因此有人可以查看他们是否可以按照我所描述的方式使此动画正常工作。 codepen.io

HTML

<svg width="20" height="20" viewBox="0 0 20 20">
  <circle cx="10" cy="10" r="7" fill="none" stroke="#e6e6e6" stroke-width="6" />
  <circle id="shape" cx="10" cy="10" r="7" fill="none" stroke="#ff0000" stroke-width="6" stroke-linecap="square" /> 
</svg>

CSS

#shape {
 fill: none;
 stroke: red;
 stroke-width: 6;
 transition: all 4s ease-in-out;
 transform: rotate(-90deg);
 transform-origin: 50%;
}

JavaScript

var endPercentage = 100;

var shape = document.getElementById('shape');
var circumference = Math.PI * parseFloat(shape.getAttribute('r')) * 2;

shape.setAttribute('stroke-dasharray', circumference);
shape.setAttribute('stroke-dashoffset', circumference);

var updatePercentage = function () {
    var dashOffset = parseFloat(getComputedStyle(shape)['stroke-dashoffset']);
    var curPercentage = Math.floor((100 * (circumference - dashOffset)) / circumference) || 0;

    document.getElementById('perc').getElementsByClassName('value')[0].innerText = curPercentage;

    if (curPercentage < endPercentage) {
        window.requestAnimationFrame(updatePercentage);
    }
}

var animateShape = function (percent) {
    var offset = circumference - (circumference * percent / 100);
    shape.setAttribute('stroke-dashoffset', offset);
    window.requestAnimationFrame(updatePercentage);
}

setTimeout(function () {
    animateShape(endPercentage);
}, 0);

Answer 1

您可以使用以下方式定义pi：

:root {
  --PI: 3.14159265358979; 
}

...

stroke-dashoffset: calc(2 * var(--PI) * 7);
/* 7 is the radius of your circle */

将此与calc结合使用，您应该能够获得纯CSS解决方案。

如果您仍然想通过JS路线，我建议：

  shape.animate([
    { strokeDashoffset: 0 },
    { strokeDashoffset: circumference }
  ], { duration: 3000, iterations: Infinity });

警告：较旧的浏览器需要使用polyfill。

3秒动画，重复requestAnimationFrame

1 个答案: