Wie man Linienanimation mit CSS und SVG macht

Mein Ziel ist es, scrollende Zeilen ähnlich wie this site zu erstellen. Ich habe begonnen, eine einfache SVG-Form zu verwenden, um es zum Laufen zu bringen. Ich kann eine einfache Animation machen, aber nicht sicher, wie man eine bestimmte Farbe von Anfang bis Ende füllt.Wie man Linienanimation mit CSS und SVG macht

Mein SVG:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="75px" height="100px" viewBox="0 -450 1230 1640" preserveAspectRatio="xMidYMid meet"> 
<path class="path" d="M131.2,-318.8a672.4,672.4,0,0,1,0,1344.8" stroke="black" id="e7_circleArc" style="fill: none; stroke-width: 3px; vector-effect: non-scaling-stroke; stroke-dasharray: 5px, 5px;" />

Meine CSS

.path { 
    stroke-dasharray: 500; 
    stroke-dashoffset: 5000; 
    animation: dash 2s linear forwards; 
} 

@keyframes dash { 
    to { 
    stroke-dashoffset: 0; 
    } 
}

können Sie die Arbeits Geige sehen hier - https://jsfiddle.net/cbd9L2L3/

Quelle

2016-04-08 Trey Copeland

Sie meinen wie Schlaganfall: blau; oder etwas anderes? –

Die Methode, die diese Website verwendet, ist interessant. Kannst du die gleiche Methode anwenden oder hast du SVG eingestellt? Siehe http://stackoverflow.com/questions/11847040/animate-the-clip-rect-property –

Sie müssen dem onscroll-Ereignis einen Ereignishandler hinzufügen und dann die Animation auslösen, wenn Sie sich dafür entscheiden, dass das SVG auf dem Bildschirm "genug" angezeigt wird. . –

ich verwendet, um die sa Me-Methode als Link, den Sie gepostet haben - Animation des 'unteren' Wertes von clip: rect() mit jquery. Mit dem Unterschied, dass ich ging und SVG-Formen (eine für den Hintergrund und eine für die eine animierte) verwendet Nur eine Notiz, dass clip ist offenbar veraltet und wurde durch clip-path ersetzt. Ich habe versucht mit clip-path aber konnte nicht das gleiche Ergebnis erzielen.

Position Absolut beiden Linien oben auf sie, wenn es nicht offensichtlich ist:

$('#line1-overlay').animate({ 
 
    fontSize: 515 //some unimportant CSS to animate so we get some values - and height of the line 
 
}, { 
 
    duration: 2000, 
 
    step: function (now, fx) { //now is the animated value from initial css value 
 
     $(this).css('clip', 'rect(0px, 217px, ' + now + 'px, 0px)') 
 
    } 
 
});

.line-container { 
 
    position: relative; 
 
} 
 

 
.line { 
 
    position: absolute; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="line-container"> 
 

 
    <svg version="1.1" class="line" id="line1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
 
    width="217px" height="515px" viewBox="0 0 217 515" enable-background="new 0 0 217 515" xml:space="preserve"> 
 
    <path fill="#FFFFFF" stroke="#CCCCCC" stroke-width="4" stroke-miterlimit="10" d="M77.229,10.222c64,22,142,140,129,203 
 
    c-13,63-152,60-186,118c-34,58,61,159,130,177"/> 
 
    </svg> 
 

 
    <svg version="1.1" class="line" id="line1-overlay" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
 
    width="217px" height="515px" viewBox="0 0 217 515" enable-background="new 0 0 217 515" xml:space="preserve"> 
 
    <path fill="#FFFFFF" stroke="#000000" stroke-width="4" stroke-miterlimit="10" d="M77.229,10.222c64,22,142,140,129,203 
 
    c-13,63-152,60-186,118c-34,58,61,159,130,177"/> 
 
    </svg> 
 

 
</div>

auch: JSFiddle DEMO

Dank teilweise zu this answer.

Quelle

2016-04-09 19:01:37

Wie man Linienanimation mit CSS und SVG macht

Antwort

Verwandte Themen