围绕圆的 SVG 动画虚线

Question

我正在尝试绘制圆的线条动画。我需要这个在移动设备上工作，所以选择了 SVG。我有一个完美的工作示例，但它的效率非常低，并且使页面上的其他动画结结巴巴。

这是我目前拥有的以及我正在努力实现的目标：http://jsfiddle.net/sj76ysqs/

<svg class="bean-halo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
   viewBox="0 0 500 500"
   preserveAspectRatio="xMidYMid"
   style="width:100%; height:100%; position:absolute; top:0; left:0;">

    <path d="M200,200 " id="bean-halo" fill="none" stroke="#FF0000" stroke-linecap="round" stroke-width="2.5" stroke-dasharray="0.1,10" />
</svg>

(function() {
    var i = 0,
        circle = document.getElementById('bean-halo'),
        angle = 0,
        radius = 167,
        interval = 20,
        d, radians, x, y, e;

    window.timer = window.setInterval(function() {
        angle -= 5;
        angle %= 360;
        radians = (angle / 180) * Math.PI;
        x = 250 + Math.cos(radians) * radius;
        y = 250 + Math.sin(radians) * radius;
        e = circle.getAttribute('d');
        d = e + (i === 0 ? ' M ' : ' L ') + x + ' ' + y;
        if (angle === -5 && i !== 0) {
            window.clearInterval(window.timer);
            this.beanHaloisDrawn = 1;
        }
        circle.setAttribute('d', d);
        i++;
    }.bind(this), interval);
})()

我想使用以下技术或类似的技术，但对 SVG 了解不多：http://css-tricks.com/svg-line-animation-works/

我也想过用一条显示它的动画线掩盖一条静态虚线，但同样，我不知道该怎么做。

任何帮助将不胜感激。

更新：该解决方案必须处理以图像为背景的元素。

Answer 1

只处理一个圆的stroke-dasharray怎么样

<svg class="bean-halo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
   viewBox="0 0 500 500"
   preserveAspectRatio="xMidYMid"
   style="width:100%; height:100%; position:absolute; top:0; left:0;">

    <circle cx="200" cy="200" r="167" id="bean-halo" fill="none" stroke="#FF0000" stroke-linecap="round" stroke-width="2.5" stroke-dasharray="0.1,20000" />
</svg>

加上这样的东西......

(function() {
            var angle = 0;
            var circle = document.getElementById('bean-halo');
            var dash="0.1,10 ";
            var interval = 20;


            window.timer = window.setInterval(function() {

                circle.setAttribute("stroke-dasharray", dash + " 0, 20000");
                dash = dash + "0.1,10 ";
                if (angle >= 360) window.clearInterval(window.timer);
                angle += 10.1/360;
            }.bind(this), interval);
        })()

如果您不想使用 javascript，则必须自己进行插值，方法是创建包含所有中间步骤的巨大动画。我已经完成了下面的 4 个，但你明白了要点。不过，您可以使用 javascript 和循环创建属性。

<svg class="bean-halo" xmlns="http://www.w3.org/2000/svg" 

xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
   viewBox="0 0 500 500"
   preserveAspectRatio="xMidYMid"
   style="width:100%; height:100%; position:absolute; top:0; left:0;">

    <circle cx="200" cy="200" r="167" stroke-width="1" stroke="red" fill="white">

        <animate attributeName="stroke-dasharray" 

values="1,10,0,20000;1,10,1,10,0,20000;1,10,1,10,1,10,0,20000;1,10,1,10,1,10,1,10,0,20000" 

dur="4s" repeatCount="1" fill="freeze" />
   </circle>
</svg>

Answer 2

使用两个圆圈的动画技巧，无需编码：-

<svg width="400" height="400" viewBox="0 0 400 400" >
    <circle cx="200" cy="200" r="167" stroke-dasharray="1,6" stroke-width="1"  stroke="red" fill="white" />
    <circle cx="200" cy="200" r="167" stroke-dasharray="1200,1200 " stroke-width="3" stroke-dashoffset="0" stroke="white" fill="none">
       <animate attributeType="XML" attributeName="stroke-dashoffset" from="0" to="1200" dur="4s" repeatCount="1" fill="freeze" />
    </circle>
</svg>