SVG Pfad Kurve in entgegengesetzter Richtung animieren

Ich habe eine SVG in Adobe Illustrator erstellt und den Code verwendet, der dadurch generiert wurde. Ich versuche, die Svg-Zeichnung zu animieren. Mein svg Element:SVG Pfad Kurve in entgegengesetzter Richtung animieren

<svg width="100px" height="100px"> 
    <path fill="none" d="M5,60c0-24.873,20.127-45,45-45" /> 
    <path fill="none" d="M95,60c0-24.873-20.127-45-45-45" /> 
</svg>

erste Kurve wird im Uhrzeigersinn Animieren, ich möchte das gleiche für die zweite Kurve, die in Richtung gegen den Uhrzeigersinn belebt. Sie können das Demo-Snippet am Ende der Frage sehen.

Bitte erläutern Sie, wie ich den 2. Pfad im Uhrzeigersinn animieren kann. Bitte erläutern Sie auch, ob Sie die Kurvendaten beider Pfade haben können. Dank

svg { 
 
    width: 300px; 
 
} 
 
svg path { 
 
    fill-opacity: 0; 
 
    stroke: #50514F; 
 
    stroke-width: 5; 
 
    stroke-dasharray: 870; 
 
    stroke-dashoffset: 870; 
 
    animation: draw 10s infinite linear; 
 
} 
 
@keyframes draw { 
 
    to { 
 
    stroke-dashoffset: 0; 
 
    } 
 
}

<svg width="100px" height="100px"> 
 
    <path fill="none" d="M5,60c0-24.873,20.127-45,45-45" /> 
 
    <path fill="none" d="M95,60c0-24.873-20.127-45-45-45" /> 
 
</svg>

Quelle

2016-09-21 Waqas Ibrahim

Um die Richtung der Animation zu ändern, müssen Sie die Richtung ändern, in der die Punkte der Kurve angegeben werden. Aktuell bewegen Sie sich auf 3 Uhr und zeichnen eine Kurve in Richtung 12. Wenn wir den Pfad mit unserem Svg-Editor umkehren, anstelle der Pfadbefehle: 'M95,60c0-24,873-20,127-45-45-45' enden wir mit diesen:' m 50,15 c 24,873,0 45,20,127 45,45'. Wenn wir dann einen CCW 1/2-Kreis von 9 Uhr bis 3 Uhr zeichnen, erhalten wir etwas in der Art von: M 4,6428572,100,21932 C 4,6428572,80,243545 26,088068,60,94722 50,60,576463 79,088033,60,805598 95,357143,81,911631 95,357143,100,21932' – enhzflep

@enhzflep danke, ich habe Illustrator benutzt, um einen Bogen von 12 nach 3 zu zeichnen, ich habe diesen '' Können Sie bitte die Kurvendaten erklären, was jeder Wert bedeutet? Danke –

Keine Sorgen Kumpel. Sicher, Sie können alle Grammatik des SVG-Formats hier in der Dokumentation sehen: https://www.w3.org/TR/SVG2/paths.html#PathDataCubicBezierCommands (sie erklären es viel besser, als ich hoffen konnte) – enhzflep

Der zweite Weg beginnt in gegen den Uhrzeigersinn Art und Weise wie der Ausgangspunkt auf der rechten Seite des Endes definiert ist point.And warum komplexe kubische Bezier-Kurven verwenden, wenn Ihre Anforderung ist nur ein Kreisbogen ? können Sie elliptische Kurven verwenden für das, was viel zu einfach zu bedienen sind und handle.Change beide Wege, die man auf diese beiden Pfad definations definiert hatte, und Sie werden das erreichen, was Sie wollen:

<path fill="none" d="M5,60 A50,50 0 0,1 55,10" /> 
<path fill="none" d="M55,10 A50,50 0 0,1 105,60"/>

die Koordinaten neben M ist Ihr Ausgangspunkt. Werte neben A bezeichnet die horizontalen und vertikalen Radien Ihrer elliptischen Kurve (beide sind die gleichen wie Sie eine kreisförmige Kurve wollen). Die danach bezeichnet den Winkel, um den Sie Ihre Ellipse drehen möchten. Danach müssen Sie zwei Flags angeben, getrennt durch ein Komma. Das erste Flag gibt an, ob Sie den kürzesten() oder den längsten() Pfad zwischen den Start- und Endpunkten nehmen möchten Das Flag gibt an, ob der Pfad im Gegenuhrzeigersinn() oder im Uhrzeigersinn() zwischen dem Anfangs- und dem Endpunkt verlaufen soll (Sie können beide Flags ändern, um die Änderungen zu sehen) Koordinate ist Ihr Endpunkt, der 55,10 für den ersten Pfad und 105,60 für den zweiten ist.

Quelle

2017-07-29 05:18:29

SVG Pfad Kurve in entgegengesetzter Richtung animieren

Antwort

Verwandte Themen