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

如何操纵圆圈的笔划-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>

SVG围绕圆圈设置虚线

2 个答案: