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 - 將一個圓沿動畫直線

回答

相關問題