SVG - 将一个圆沿动画直线

我试图做的，随着那也正在动画线移动的圆的简单动画的路径。SVG - 将一个圆沿动画直线

我的用于移动使用圆，只是匹配当前方法中的，并从与该行的开始和结束坐标的坐标，这是一个手动和耗时的过程。

我也读了SMIL动画已经过时，在未来几乎没有支持。 https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_SMIL

任何人都可以提出这样做的更有效的方法？

.line { 
 
    stroke: #bfbfbf; 
 
    stroke-width: 1; 
 
    fill: none; 
 
    animation: drawline 2s linear forwards; 
 
    -moz-animation: drawline 2s linear forwards; 
 
    -webkit-animation: drawline 2s linear forwards; 
 
} 
 

 
@keyframes drawline { 
 
    from { 
 
    stroke-dasharray: 0 400; 
 
    stroke-dashoffset: 0; 
 
    } 
 
    to { 
 
    stroke-dasharray: 400 400; 
 
    stroke-dashoffset: 0; 
 
    } 
 
}

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 521.156 545.59"> 
 

 
    <line class="line" id="audit-line" fill="#000" stroke="#bfbfbf" x1="154" y1="238" x2="214" y2="30"></line> 
 
    
 
    <circle id="audit-circle" r="18" cx="158" cy="238" stroke="#7ac142" fill="#7ac142" /> 
 
    <text id="audit-text" font-family="Arial" font-size="13">A</text> 
 
    <text id="audit" class="fade-in delay-2" x="245" y="35" font-size="13" font-family="Arial">Text</text> 
 
    <animate 
 
    xlink:href="#audit-circle" 
 
    attributeName="cx" 
 
    to="214" 
 
    dur="1s" 
 
    fill="freeze" /> 
 
    <animate 
 
    xlink:href="#audit-circle" 
 
    attributename="cy" 
 
    to="30" 
 
    dur="1s" 
 
    fill="freeze" 
 
    /> 
 
    <animate 
 
    xlink:href="#audit-text" 
 
    attributeName="x" 
 
    from="155" 
 
    to="210" 
 
    dur="1s" 
 
    fill="freeze" /> 
 
    <animate 
 
    xlink:href="#audit-text" 
 
    attributename="y" 
 
    from="240" 
 
    to="35" 
 
    dur="1s" 
 
    fill="freeze" 
 
    /> 
 

 
</svg>

来源

2017-07-06 TJXStyles

可以多一点有效地做到这一点。例如，您不需要独立设置动画圈和文本的动画。另外，通过混合使用CSS和SMIL动画，IMO可以让自己变得更加复杂。

.line { 
 
    stroke: #bfbfbf; 
 
    stroke-width: 1; 
 
    fill: none; 
 
}

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 521.156 545.59"> 
 

 
    <line class="line" id="audit-line" fill="#000" stroke="#bfbfbf" x1="154" y1="238" x2="154" y2="238"></line> 
 

 
    <g id="audit-circle"> 
 
    <circle r="18" cx="158" cy="238" stroke="#7ac142" fill="#7ac142" /> 
 
    <text x="154" y="242" font-family="Arial" font-size="13">A</text> 
 
    </g> 
 

 
    <text id="audit" class="fade-in delay-2" x="245" y="35" font-size="13" font-family="Arial">Text</text> 
 

 
    <animateTransform 
 
    xlink:href="#audit-circle" 
 
    attributeName="transform" 
 
    type="translate" from="0,0" to="56,-208" dur="1s" 
 
        additive="replace" fill="freeze"/> 
 
    <animate 
 
    xlink:href="#audit-line" 
 
    attributeName="x2" 
 
    from="154" 
 
    to="214" 
 
    dur="1s" 
 
    fill="freeze" /> 
 
    <animate 
 
    xlink:href="#audit-line" 
 
    attributename="y2" 
 
    from="238" 
 
    to="30" 
 
    dur="1s" 
 
    fill="freeze" 
 
    /> 
 

 
</svg>

来源

2017-07-06 18:08:27

SVG - 将一个圆沿动画直线

回答

相关问题