Animation von Bewegungspfaden in CSS und SVG

1. Einführung: Schön, dass ihr wieder da seid, Leute. Ich bin wieder mit einem neuen Kurs zurück. Heute werden wir in diesem Kurs Bewegungspfadanimation lernen. Dies ist das Beispiel einer Bewegungspfadanimation mit SVG-Grafik. Hier können Sie feststellen, dass der Punkt auf den vordefinierten Pfad verschoben wurde. Es ist das erste Beispiel für eine Bewegungspfadanimation mit SVG. Lassen Sie mich Ihnen ein anderes Beispiel zeigen. Dies ist das zweite Beispiel für Bewegungspfadanimation, aber hier verwenden wir keine SVC-Eigenschaft Es besteht aus reinem CSS und muss nur den vordefinierten Pfad verwenden . Wir müssen den CSS-Keyframe und die Animationseigenschaft verwenden CSS-Keyframe und die Animationseigenschaft Hier können Sie feststellen, dass ein Flugzeug dem vordefinierten Pfad folgt, aber Sie können den Pfad nicht sehen Aber in unserem vorherigen Beispiel können Sie den Pfad sehen. Denken Sie daran, dass Sie hier anstelle eines Flugzeugs alles benutzen können Es könnte ein Schiff sein, es könnte ein Ball sein, es könnte eine Sonne sein, was auch immer Wie Sie sehen können, hat Harry das Flugzeug durch das Kreuzfahrtschiff ersetzt , sodass Sie alles benutzen können In diesem Kurs werde ich Ihnen insgesamt zwei Methoden zeigen , um diese Art von Animation zu erstellen Erste mit AVG-Grafik und die zweite mit reinem CSS. In unseren ersten drei Videos werde ich Ihnen zeigen, wie wir den Pfad mithilfe der SVG-Eigenschaft zeichnen können , wie wir die Kurve erstellen können, wie wir die Bögen erstellen können, wie wir die Punkte an verschiedenen Positionen zeichnen können, als Nächstes werden wir über O sprechen, wir werden lernen, wie wir mit der Adowillustrator-Anwendung einen Pfad zeichnen und die Pfadkoordinaten exportieren können Adowillustrator-Anwendung und Und dann werden wir die Animation und ein Projekt erstellen . Wenn Sie die ersten drei Videos überspringen möchten, in denen ich über das Pfadelement spreche, können Sie sie überspringen. Wenn Sie sich bereits mit Pfadelementen auskennen, können Sie diese Videos überspringen. Lass uns anfangen. 2. SVG-Pfadelement-Tutorial: Hallo Leute. Schön dich wieder zu sehen. Ich bin wieder mit einem neuen Tutorial zum Thema Vigigraphic Und heute werden wir in diesem Tutorial das wichtigste Element in Vigi lernen , nämlich das Es ist eines der fortschrittlichsten Elemente in Vigigraphic. Sie können damit jede Form zeichnen , wenn Sie die Kontrolle darüber haben Mit diesem Element können Sie Linien, Kurven, Kreise, Polylinienelemente, Polygonelemente zeichnen , was auch immer Sie machen möchten Versuchen wir also zu verstehen, wie wir mithilfe von Pfadelementen Formen erzeugen können mithilfe von Pfadelementen Formen erzeugen Lass uns auf den Bildschirm springen. Hier können Sie aus meiner Sicht sehen, denn wir erstellen eine Grundform mit Badewanne und Sie wissen schon, wenn zwei Linien zusammenkommen, nennen wir das Positionspunkte. Angenommen, Sie möchten diese Form vom Punkt aus starten, Sie müssen die Koordinaten mit XXs und Yx angeben . Für den grünen Punkt, den blauen Punkt und den roten Punkt müssen wir den gleichen Schritt ausführen blauen Punkt und den roten Und von rotem Punkt zu Punkt können Sie eine Kurvenform sehen Für diese müssen wir den Befehl arc verwenden. So können Sie jede Form sehr einfach zeichnen. Es gibt viele Formen: Bogen, Polygon, Kreis, Linie usw. Für diese müssen wir verschiedene Befehle verwenden . Sehen wir uns die Befehle an. Hier sehen Sie die Befehle, die sich auf einen VG-Pfad beziehen , und wir teilen sie in vier Kategorien ein. Unser erster Befehl ist der Zeilenbefehl, und innerhalb des Zeilenbefehls haben wir vier verschiedene Befehle L, H, V und Z. In diesem Tutorial werden wir den Zeilenbefehl lernen und dann kommen Vic-Sor-Kurven und quadratische Basiskurven In unserem nächsten Tutorial werden wir mehr über diese Kurve lernen und unser letzter Befehl ist der Befehl arc Also werde ich dir alle Befehle nacheinander beibringen. Fangen wir mit dem Zeilenbefehl an. Hier können Sie sehen, dass ich bereits ein TML-Dokument erstellt habe und dass ich bereits einen Deep-Plus-Container erstelle Und Hurricc habe ich so tief gestylt. Ich habe bereits eine Hintergrundfarbe festgelegt, und ich habe Höhe und Breite gesagt, und ich habe auch Rand gesagt Und in dieser Tiefe habe ich bereits ein SVG-Tag und in dieser Tiefe habe ich auch das View-Feld gesetzt. Vorübergehend erstelle ich ein Raster innerhalb dieses SVG-Tags. Mit dieser Körnung ist es sehr einfach, unsere Eigenschaften zu verstehen Fangen wir also mit dem Praktischen an. Also nehme ich zuerst den Put-Tag. Pfad. Um diesen Pfad zu starten, benötigen wir eine wichtige Eigenschaft namens D. D, die innerhalb der doppelten Codes steht. Wir müssen die Punkte angeben. D bedeutet Unentschieden. Statt der Klammern müssen Sie zuerst das Kommando übernehmen und M sollte ein Großbuchstabe sein Damit können wir den Startpunkt unseres Cursors definieren. Jetzt werde ich einen Punkt nehmen, von dem aus ich diesen Pfad beginnen möchte. Ich möchte meinen Weg von diesem Punkt aus beginnen. Mann, x ist 20, YX ist 30. Ich tippe 20, YX ist 30. Wenn Sie eine einfache Linie zeichnen möchten, müssen Sie den Befehl verwenden. Und ich möchte eine Linie von diesem Punkt bis zu diesem Punkt ziehen. Xs ist 80 und Y xs ist 30. Also werde ich 80 30 bestehen. Und wir müssen auch für diesen Schlaganfall sorgen. Andernfalls können wir die Linie nicht sehen. Unsere Strichfarbe ist rot. Wenn ich also diese Datei einstelle, siehst du hier eine rote Linie. Also zuerst müssen Sie diesen Startpunkt mit einem Befehl angeben . Damit müssen Sie Xxs und YX angeben. Dann müssen Sie einen Platz bereitstellen. Wenn Sie eine Linie zeichnen möchten, müssen Sie den Befehl verwenden. Außerdem müssen Sie Xxs und YxS angeben. Und wenn Sie mit nur zwei Punkten eine gerade Linie erstellen möchten , können Sie diesen Befehl entfernen Wenn ich diese Datei einstelle, können Sie hier sehen, dass unsere Linie auch existiert. Sie können sehen, dass es keine Änderungen gibt. Es ist auch Arbeit. Es hat auch funktioniert, wenn wir eine gerade Linie erstellen. Aber im Moment werde ich Command verwenden. Und jetzt möchte ich eine weitere vertikale Linie zeichnen. Ich werde ein Leerzeichen angeben und X 80 eingeben und YX ist 70. Wenn ich diese Datei einstelle, können Sie sehen, dass sie eine Linie zeichnet. Bdfaul gibt die schwarze Farbe in dieser Wenn Sie die Farbe ändern möchten, kennen Sie den Vorgang. Sie müssen Feldeigenschaften verwenden und ich möchte diese Form mit grüner Farbe füllen Wenn ich diese Datei einstelle, können Sie sehen, dass sie grün geworden ist Jetzt erstelle ich eine weitere Linie bis zu diesem Punkt. Also werde ich ein Leerzeichen angeben und den Zeilenbefehl verwenden, X-Wert ist 40 und der YX-Wert ist 80. Wenn ich diese Datei einstelle, können Sie sehen, wie sie eine Linie von diesem Punkt bis zu diesem Punkt Sie können jede Art von diagonaler Linie erstellen. Es ist nicht zwingend erforderlich, immer eine gerade Linie zu erstellen. Sie können sich vorstellen, dass es dem Polylinienelement ziemlich ähnlich ist. In ähnlicher Weise müssen Sie, um diese Form zu vervollständigen , den letzten Punkt angeben Wenn ich diese Form beenden möchte, gebe einfach 20 und 30 ein. Wenn ich diese Datei eingestellt habe, können Sie jetzt sehen, dass sie die Form vervollständigt hat. Wenn Sie den Endpunkt nicht angeben möchten, können Sie Großbuchstaben Z verwenden. Wenn ich diese Datei festlege, können Sie ein ähnliches Ergebnis sehen . Es gibt keine Änderungen. Und wenn Sie diese Form an diesem Punkt beenden möchten, können Sie einfach die Werte entfernen und die Datei festlegen. Jetzt können Sie sehen, dass unsere Form von diesem Punkt an abgeschlossen ist. Z bedeutet Befehl „Pfad schließen“. Wenn Sie einen Pfad schließen möchten, können wir den Befehl Z verwenden, und jetzt werde ich Ihnen die neuen Befehle H und V vorstellen . H bedeutet horizontale Linie, V bedeutet vertikale Linie. Hier können Sie die Linie sehen. Wir müssen zwei Koordinaten angeben, um die Linie zu erstellen, die X-, XS- und die Y-Achse. Wir wissen, dass wir nur eine gerade Linie erstellen müssen. Dafür müssen wir diesen letzten Punkt nicht angeben. Wir können nur den horizontalen Punkt verwenden. Ich werde den Befehl entfernen und durch den Befehl H ersetzen. Und wenn ich diese Datei einstelle, können Sie sehen, dass es keine Änderungen gibt. Es erstellt eine Linie von 20 Pixeln bis 80 Pixeln. Und wenn ich den Wert auf 90 Pixel erhöhe und die Datei festlege, können Sie jetzt sehen, dass sie unsere Form verändert. Der Befehl H funktioniert nur für die horizontale Seite. Also werde ich diese Form zurücksetzen und dir jetzt den V-Befehl zeigen. Für diese müssen wir keine Xxs angeben, wir müssen YxS bereitstellen. Lass es mich dir zeigen Schneller tippen Sie V, und jetzt möchte ich eine Linie mit 30-90 Punkten zeichnen. Also werde ich V 90 eingeben. Wenn ich diese Datei einstelle, können Sie jetzt sehen, dass sie die Liniengröße vertikal erhöht, und jetzt möchte ich eine rechteckige Form erstellen. Ich werde einen weiteren H-Punkt angeben, Mint Xs-Punkt, H 20. Wenn ich diese Datei einstelle, können Sie jetzt sehen, dass sie ein perfektes Rechteck erzeugt und unser Z-Befehl automatisch diese Form vervollständigt, und unser Zt-Befehl erzeugt immer eine gerade Linie. Z bedeutet Befehl für geschlossenen Pfad. Lassen Sie mich die ganze Sache noch einmal erklären. Zuerst müssen Sie den Path-Tag nehmen. Innerhalb des Pfad-Tags müssen Sie eine spezielle Eigenschaft verwenden, D. D bedeutet zeichnen. Und in diesem D müssen Sie zuerst den Befehl verwenden. Sie müssen den Startpunkt mit diesem N-Befehl angeben. Wenn Sie keinen Befehl angeben, wird nichts gezeichnet. Und um eine Linie zu zeichnen, können Sie den Befehl verwenden. Und nach dem Befehl müssen Sie den X-Zugangspunkt und den Y-Zugangspunkt angeben . Andernfalls können Sie den horizontalen Befehl und den vertikalen Befehl verwenden . Zuletzt müssen Sie den Befehl Z und den Befehl Mince close path verwenden Mince close path Ich werde Ihren Pfad schließen Ich hoffe, jetzt ist es für dich klar. Danke, dass du dir dieses Video angesehen hast. 3. SVG-Pfadelement-Lernprogramm Teil 2: Schön euch zu sehen. Dies ist das zweite Put-Tag zum Thema Tutorial . In diesem Abschnitt werden wir Kurvenbefehle lernen. Wie ich Ihnen bereits gesagt habe, müssen wir im Pfadelement, dem Befehl Line, den wir in unserem vorherigen Video abgeschlossen haben, angeben, um welche Art von Pfadelement, dem Befehl Line, den wir in unserem vorherigen Video abgeschlossen haben, angeben, um welche In diesem Tutorial Befehl es sich handelt. In diesem Tutorial werden wir etwas über kubische Basiskurven und quadratische Basiskurven lernen und quadratische Um einen Vic-Bordstein zu erstellen, haben wir zwei Befehle, C und S für quadratische Kurven, und C und S für quadratische Kurven, und wir haben auch zwei Befehle. Und T. Lassen Sie uns zunächst versuchen zu verstehen, wie wir kubische Ser-Kurven erzeugen können Hier können Sie in meinem Darstellungsfenster einen Kurvenverlauf sehen und wir haben zwei Kurven in diesem Pfad Eine Kurve ist von unten und eine andere Kurve ist von oben Um einen Pfad zu erstellen, benötigen wir zunächst zwei Punkte, Startpunkt und einen Endpunkt Angenommen, Rot ist unser Startpunkt und Blau ist unser Endpunkt. Wir erstellen diese Kurve mit kubischen Bezier-Kurven. Für diese benötigen wir zwei Punkte, um diese Kurve zu erstellen. In unserem ersten grünen Punkt müssen wir den X-Zugriffswert und den YX-Wert angeben. Außerdem müssen wir in unserem zweiten grünen Punkt den X-Zugriffswert und den Y-x-Wert angeben , und wir erkennen diesen Punkt mit dem C-Befehl. C bedeutet QB-Kurven. Wenn Sie einen Punkt erstellen, wird automatisch eine Kurve erstellt Es testet den Punkt nicht, aber es folgt dem Punkt, und Sie können die Kurventiefe mithilfe des YXS-Punkts steuern Sie müssen sich nur daran erinnern, dass Sie zwischen Start- und Endpunkt zwei Kurvenpunkte angeben müssen, um eine QV-Ser-Kurve zu erstellen , und wir müssen einen Befehl wie diesen schreiben Zuerst müssen wir die Mittel für den Bewegungspunkt und Sie müssen den Startpunkt mit XXs und YxS definieren mit XXs und YxS Hier können Sie sehen, dass unser XX 15 und YxS 50 ist. Und wie Sie in blauer Farbe sehen können, ist dies unser Endpunkt, 70 und 50. Zwischen Start - und Endpunkt müssen wir also den Befehl C verwenden, um QV ser zu verwenden, und ich erstelle unsere ersten grünen 0,20 70-Koordinaten Bedeutet, dass XXS 20 und YxS 70 ist, und als Nächstes geben wir einen Excess ist 50 und YxS ist 30, und Sie müssen einen Abstand zwischen diesen beiden Bordsteinkoordinaten lassen, damit Sie beide Punkte nach oben, andernfalls nach unten erstellen können Punkte Es hängt völlig von dir ab. Das Wichtigste ist, Sie zwei Punkte erstellen müssen. Lassen Sie mich Ihnen ein weiteres Beispiel für kubische Bezier-Kurven zeigen. Hier können Sie sehen, wie wir die Bordsteine bis zum Startpunkt verlaufen Dazu benötigen wir zuerst Start- und Endpunkt und wir benötigen zwei weitere Punkte, um diese Kurve zu erstellen Schauen wir uns das Praktische an, wie können wir kubische Bezier-Kurven erstellen Hier können Sie sehen, dass ich Seite an Seite meinen Visual Studio Creator und meinen Browser mit der Servererweiterung öffne und meinen Browser mit der Servererweiterung und bereits ein ETML-Dokument erstelle Und innerhalb des ETML-Dokuments erstelle ich ein SVG-Bild und erstelle eine Rasterstruktur, um die Attribute zu verstehen Also werde ich zuerst ein Path-Tag erstellen. Und ich möchte nun die Feldeigenschaft verwenden. Ich gebe „ feel equal to“ in das Zitat ein. Nun, ich möchte Stroke für meinen Pfad bewerten. Ich werde die Eigenschaft Stroke verwenden, Rate entspricht und innerhalb des D-Attributs steht, und ich möchte meinen Pfad mit dem Moving Tool beginnen, also lobe ich die Großbuchstaben AM. Unser XX-Wert ist zehn und unser YxS-Wert ist 60. Dies ist der Startpunkt unseres Pfads, und wir müssen auch den Endpunkt angeben Also stelle ich Platz zur Verfügung und gebe 60 60 ein. Wenn ich diese Datei einstelle, können Sie hier sehen, wie Sie eine Linie zeichnen und lassen Sie mich die Linie um xx sechs vergrößern. Ich möchte diese Linie an dieser Stelle beenden. Also werde ich den XXS-Wert auf 80 erhöhen. Wenn ich diese Datei einstelle, können Sie jetzt sehen, dass sie die Zeilengröße erhöht Und jetzt möchte ich eine Kurve zwischen diesen beiden Punkten nehmen. Zwischen Start - und Endpunkt müssen Sie also einen Befehl ausführen, der C lautet und C sollte groß sein. Bis C müssen wir den Punkt angeben. Ich verwende 20 XXs und der Y-Punkt ist 70. Wenn ich diese Datei einstelle, können Sie sehen, dass die Leitung weg ist. Da wir die QV-Kurve verwenden, müssen wir zwei Punkte angeben Nach dem Leerzeichen werde ich also weitere 0,50 und 30 erstellen. Wenn ich diese Datei eingestellt habe, können Sie jetzt die Kurve sehen. Hier können Sie sehen, wie es an diesem Punkt und an diesem Punkt zwei Kurven erzeugt . Wir müssen zwei Punkte angeben, um diese Kurve zu erstellen. Wenn ich den YxS-Wert 70 auf 90 erhöhe und diese Datei einstelle, können Sie jetzt sehen, dass sie eine viel tiefere Kurve erzeugt Wenn wir die zweite Kurve, den YX-Wert, auf Null, Null verringern und diese Datei einstellen, wie Sie sehen können, ist unsere zweite Kurve oben tiefer Nicht nur das, wir können Minuswerte verwenden. Wenn ich den Minuswert -40 verwende und diese Datei setze, können Sie jetzt sehen, dass sie in der oberen Seite tiefer geht Jetzt ist es für Sie klar, dass wir zwei Koordinaten benötigen, um eine QV-Kurve zu erstellen wir zwei Koordinaten benötigen, um eine QV-Kurve Nicht nur das, wir können auch eine einseitige Kurve erstellen . Lass mich dir das zeigen. Wenn ich YXs Zehn für unseren ersten Punkt verwende, ähnlich, wenn ich YX Zehn für unseren zweiten Punkt verwende und diese Datei setze, können Sie jetzt sehen, dass sie eine einseitige Kurve hat Wenn Sie zwei Kurven mit einem Pfad erstellen möchten, müssen Sie einen anderen Befehl verwenden, bei dem es sich um einen Befehl handelt, und unser Befehl funktioniert immer mit unserer kubischen Kurve Meinter C-Befehl. Lassen Sie mich Ihnen zunächst das Beispiel zeigen. Hier siehst du einen Kurvenpfad. Hier verwende ich zwei kubische Bezier-Kurven in einem Pfad. In ähnlicher Weise haben wir zuerst einen Startpunkt und einen Endpunkt Aber wie Sie sehen können, gibt es noch eine andere Kurve. Aber wie Sie wissen, benötigen wir zwei Attribute, um unsere erste Kurve zu erstellen , und wir müssen einen Befehl in der Art eingeben. Nachdem ich diese Kurve erstellt habe, möchte ich eine weitere Kurve mit demselben Pfad erstellen. Dafür müssen wir den Befehl verwenden. Wenn wir command verwenden, müssen wir den Startpunkt nicht angeben. Wir müssen einfach D-Koordinaten eingeben, und Sie müssen nicht wie beim Befehl C zwei Koordinaten angeben . Sie müssen einfach die schwarzen Punktkoordinaten eingeben, und wir müssen so etwas wie diesen Code schreiben. Nach dem C-Befehl müssen Sie den Befehl verwenden. Zuerst gebe ich den Befehl end ein und zwischen S und Nommand müssen wir den einzelnen Kurvenpunkt angeben Schauen wir uns mal an, wie es in der Praxis funktioniert. Ich bin wieder bei unserem Koordinator für das Grafikstudio. Zuerst ändere ich die Kurvenpunkte, C 20 und C yx ist 80. In unserem zweiten Punkt ist Xs 40 und YxS ist 80. Wenn ich diese Datei einstelle, können Sie sehen, dass sie eine Kurve nach unten erzeugt Und wenn ich den Endpunkt dieser Kurve um 80 auf 50 verringere und diese Datei einstelle, kannst du jetzt die Kurve sehen Es erzeugt eine perfekte Bogenform. Wie ich dir schon sagte, möchte ich damit eine neue Kurve erstellen. Ich werde den Befehl für unsere zweite Kurve verwenden, ich möchte hier einen Punkt erstellen. Bedeutet, dass der X-Wert 70 und der Y-X-Wert 20 ist. Ich werde 70 20 eingeben, und wir müssen auch den Endpunkt für diese Kurve angeben. Ich werde 90 60 verwenden. Wenn ich diese Datei einstelle, können Sie jetzt die Kurve sehen. Ich hoffe, jetzt ist es für Sie klar, wie können wir zwei kubische Kurven in einem Pfad erstellen? Wenn Sie eine UV-Kurve erstellen möchten, verwenden Sie einfach den Befehl C. Und wenn Sie zwei V-Kurven erstellen möchten, Sie den Befehl Einheit zu verwenden. Und unser Befehl funktioniert nur mit QV-Burb, nicht Sie müssen einfach den Endpunkt angeben und zwischen ihnen müssen Sie den Kurvenpunkt angeben. Das ist es. Lassen Sie uns über quadratische Basiskurven sprechen. Dies ist das Beispiel einer quadratischen Basiskurve. Zuerst müssen wir den Startpunkt angeben, dann müssen wir den Endpunkt angeben Der Hauptunterschied zwischen quadratischer Kurve und V-Kurve besteht in der quadratischen Kurve Sie müssen einen Kurvenpunkt angeben, etwa diesen grünen Punkt, und dann biegt er sich automatisch entsprechend Schauen wir uns das praktische Beispiel an, wie es funktioniert. Nehmen wir einen quadratischen Wert an der Spitze dieser Linie. Also gebe ich Xs für 20 und YXS für 30 ein. Wenn ich diese Datei einstelle, können Sie hier sehen, dass sie eine quadratische Kurve erzeugt hat Wenn Sie eine höhere Kurve erstellen möchten, müssen Sie den YXS-Wert verringern Der YX-Wert ist zehn. Wenn ich diese Datei einstelle, können Sie mehr höhere Kurven sehen. Und wenn Sie eine Kurve unter dieser Staatsgrenze erstellen möchten, müssen Sie nur den YXS-Wert erhöhen 80. Wenn ich diese Datei einstelle, können Sie jetzt sehen, dass sie eine Bogenform unter der Linie erzeugt. Wenn Sie diesen Randpunkt von dieser Seite auf diese Seite verschieben möchten , müssen Sie nur eine Einheit nehmen, um den überstehenden Wert um 40 zu erhöhen Wenn ich diese Datei einstelle, können Sie sehen, dass sie den Kurvenpunkt verschoben hat Das ist unser Verlangen nach Quadaty. Das ist unsere quadratische Kurve. Im Grunde müssen Sie einen Punkt zwischen Start- und Endpunkt angeben , und Sie müssen den Befehl Q verwenden, um diesen Punkt anzugeben Wenn Sie zwei quadratische Kurven in einem Pfad erstellen möchten, müssen Sie den Befehl T verwenden Lassen Sie mich Ihnen zeigen, wie T-Befehle funktionieren. In einem einzigen Pfad erstellen wir zwei quadratische Basiskurven Zuerst müssen wir einen Startpunkt und einen Endpunkt eingeben einen Startpunkt und einen Endpunkt Zwischen Startpunkt und Endpunkt müssen wir Q point eingeben, müssen wir Q point eingeben um die erste Kurve zu erstellen, und Sie kennen den Prozess. Wenn wir unsere zweite quadratische Kurve erstellen möchten, einfach nur an einem Endpunkt und wir müssen keinen Kurvenpunkt angeben Gemäß dem grünen Punkt wird dieselbe Kurve in entgegengesetzter Richtung erzeugt Der Hauptvorteil ist, dass wir den zweiten Kurvenpunkt nicht angeben müssen. Für den grünen Punkt müssen wir den Befehl Q verwenden und für den lila Punkt bedeutet der Endpunkt, müssen wir den Befehl T verwenden. Schauen wir uns an, wie es praktisch funktioniert. Also noch einmal, ich bin wieder bei meinen Besuchen bei Ihrem Cod-Redakteur. Also werde ich zuerst die Q-Koordinaten 30 y 30 ändern. Wenn ich diese Datei einstelle, können Sie sehen, dass sie oben eine Bogenform erzeugt. Dann müssen wir nur noch den Befehl T verwenden , weil wir eine weitere quadratische Kurve erstellen müssen Danach müssen wir den X- und YXS-Punkt angeben . Also XX ist, ich nehme 90 und von YxS nehme ich 60. Ich habe diese Datei eingestellt, hier sehen wir die Kurve. Sie können sehen, dass es automatisch diese Kurve erzeugt , nur um einen N-Punkt zu nehmen, nicht um einen Kurvenpunkt. Dieser D-Befehl funktioniert mit Q-Befehlskoordinaten. Ohne den Q-Befehl wird er nicht funktionieren. Es funktioniert nur mit quadratischer Kurve, nicht mit QV-Kurve. Ich hoffe, jetzt ist Ihnen klar, was eine QV-Kurve und was eine quadratische Kurve ist In der QV-Kurve müssen Sie zwei Koordinatenpunkte angeben und in der Quadity-Kurve müssen Sie nur einen Koordinatenpunkt angeben Dies ist der Hauptunterschied zwischen diesen beiden Kurven. Vielen Dank, dass Sie sich dieses Video angesehen haben. Wir sehen uns beim nächsten Tutorial. 4. SVG-Pfadelement-Lernprogramm Teil 3: Hallo Leute, das ist unser drittes Tutorial-Relitd-BG-Pfadelement Und in diesem Tutorial werden wir etwas über den Befehl arc lernen Wie ich Ihnen bereits früher in diesem Tutorial gesagt habe, haben wir im AVG Path-Tag vier verschiedene Befehle, und wir haben in unseren vorherigen Videos den Linienbefehl, die kubische Bizer-Kurve und die quadratische Bzier-Kurve gelernt kubische Bizer-Kurve und quadratische Bzier-Kurve In diesem Tutorial werden wir uns mit dem Befehl arc befassen. Um einen Bogen zu erstellen, müssen wir einen Befehl verwenden. Damit müssen wir mehrere Eigenschaften verwenden. Sehen wir uns die Eigenschaften an. Hier können Sie den Bogen in unserer Viewbox sehen. Es sieht aus wie ein Nabenkreis. Um einen Bogen zu erstellen, sollten Sie zwei Punkte haben, Startpunkt und den Endpunkt, und wir müssen ihren Xcess-Wert und ihren YxS-Wert angeben , um ihre Position zu definieren Zwischen Startpunkt und Endpunkt müssen wir den Befehl A verwenden A bedeutet Arc-Befehl. Beim Befehl arc müssen wir den Xcess-Punkt und den YxS-Punkt angeben Dieser Punkt, der den Radius dieses Bogens definiert , bedeutet die Tiefe des Wenn wir den Radiuspunkt weiter zum Mittelpunkt bewegen, wird der Bogen um so mehr Tiefe erhalten. Schauen wir uns also den Befehl an. Zuerst müssen Sie den Befehl M ausführen, M bedeutet Bewegungspunkt. Dann müssen Sie den Startpunkt X, den Erfolgswert und den YxS-Wert sowie den Punkt-Xcess-Wert und den YxS-Wert angeben Startpunkt X, den Erfolgswert und den YxS-Wert sowie den Punkt-Xcess-Wert und den YxS-Wert Zwischen diesen beiden Punkten müssen wir den Befehl arc eingeben. Zuerst müssen wir den Xcess-Wert und den YX-Wert für den Kurvenpunkt angeben , und dann müssen wir die drei verschiedenen Parameter angeben die drei verschiedenen Parameter Versuchen wir also, die Parameter zu verstehen. Hier können Sie mit dem Befehl arc drei weitere Parameter sehen. Wir nennen den ersten Parameter Xces-Rotation. Kann unseren Kreis vom X-Überschusspunkt aus drehen. Im Grunde verwenden wir diesen Punkt nicht. In den meisten Fällen verwenden wir Wert Null und müssen mit diesem Punkt sehr vorsichtig umgehen. Unser nächster Parameter ist Large Arc Flag. Mit diesem Punkt können wir die Kreisgröße definieren. Standardmäßig hat sie Null, was einen kleinen Bogen bedeutet , und sie hat zwei Werte, eins oder Null. Wenn ich einen Wert verwende, vergrößert sich dadurch die Bogengröße, und unser letzter Parameter ist Suit Flag. Standardmäßig ist seine Eigenschaft eins und es gibt auch zwei Werte, Null oder Eins. Eins bedeutet, dass es dort gebaut wird, wo wir bauen wollen. Aber wenn wir den Wert Null oder so etwas verwenden , dann wird der Bogen in die entgegengesetzte Richtung erzeugt. Sie müssen den überschüssigen Wert nicht ändern oder X ist ein Wert. Im Grunde müssen Sie nur mit dem Sue-Flap-Parameter spielen. mit diesem Parameter spielen, wird Ihr Bogen in entgegengesetzter Richtung erzeugt Wenn wir mit diesem Parameter spielen, wird Ihr Bogen in entgegengesetzter Richtung erzeugt. Schauen wir uns das Praktische an und versuchen, den Bogen in unserem Browser zu erstellen. Hier können Sie also sehen, dass ich bereits ein Stal-Dokument erstellt habe und dass ich bereits eine DV erstelle , deren Klasse Container ist Ich nehme ein VG-Tag in diese Tiefe und habe schon die Viewbox hundert mal hundert gesetzt Und wir erstellen auch eine temporäre Körnung , um die Eigenschaften zu verstehen Lass uns einen Bogen zeichnen. Wie Sie sehen können, habe ich bereits ein Pfadelement genommen und ich habe rote Farbe für den Pfadstrich und für Feldfarbe keine Farbe gesagt. Wie Sie wissen, müssen wir zuerst das tiefere T verwenden , um eine Linie zu zeichnen. Zuerst müssen wir den Bewegungspunkt und den Endpunkt angeben , und wir müssen A verwenden, um den Bewegungspunkt zu starten. XX ist zehn und YXS ist 50, Leerzeichen, und jetzt gebe ich den Endpunkt an XXS ist 90 und YXS ist 50. Es wird also eine Linie von diesem Punkt bis zu diesem Punkt erstellt von diesem Punkt bis zu diesem Punkt Wenn ich diese Datei einstelle, können Sie hier die Linie sehen, und jetzt werde ich den Bogen zwischen Startpunkt und Endpunkt erstellen . Dafür müssen wir den Befehl A verwenden. Um einen perfekten Bogen zu erzeugen, müssen wir den Mittelpunkt nehmen. Im Grunde möchte ich sagen, dass ich an dieser Position einen Punkt erstellen möchte . Sie müssen also XXS 50, YXS 30 angeben. Wenn ich diese Datei mit nichts in unserer Klasse festlege, geben wir hier nur einen Parameter an, also müssen wir weitere drei Parameter angeben Zuerst müssen wir den X-Rotationsparameter angeben, und ich werde ihn auf Null setzen. Und für einen großen Flack-Parameter nehme ich Null. Und für Swift Flack nehme ich einen. Wenn ich diese Datei einstelle, können Sie hier sehen, dass sie einen Bogen erzeugt. Wir können die Bogentiefe mit YxSvlu ändern. Wenn ich diesen Wert reduziere und ich sage zehn , und diese Datei einstelle, können Sie hier sehen, dass sie die Bogentiefe reduziert hat Wenn ich sage, YX ist Null und diese Datei setze, kannst du hier sehen, wie sie einfach eine Linie zeichnet Und wenn Sie die Tiefe erhöhen möchten, müssen wir den YS-Wert erhöhen. Wenn ich es auf 50 setze und diese Datei einstelle, kannst du hier die Bogentiefe sehen. Und jetzt werden wir lernen, was ein großer Flaggenparameter ist. Hier können Sie sehen, dass unser großer Flaggenwert Null ist. Wenn ich es auf eins setze und diese Datei einstelle, kannst du sehen, dass der Bogen gewachsen ist. Sie müssen sich nur daran erinnern, dass Null kleineren Bogen und eins einen größeren Bogen bedeutet. Und daher kommen die Flag-Parameter. Es hat zwei Werte, eins oder Null. Es kann die Richtung des Bogens ändern. Wenn ich es auf Null setze und diese Datei einstelle, können Sie den Bogen in entgegengesetzter Richtung sehen. Außerdem werde ich diesen Wert auf Null ändern. Wenn ich diese Datei setze, können Sie jetzt sehen, ob Sie den Bogen in entgegengesetzter Richtung zeigen möchten, dann müssen Sie nur den Sweet-Plug-Wert ändern. Im Moment werde ich es auf eins setzen und ich werde diese Datei setzen. Jetzt möchte ich eine weitere Linie mit diesem Bogen erstellen. Ich möchte mit diesem Bogen eine Pi-Form erstellen. Ich möchte an dieser Position einen Punkt erstellen. Nach diesem Endpunkt werde ich mit einem Befehl eine Linie zeichnen . Also tippe ich, und ich werde XXS 50 verwenden und yx ist 80. Wenn ich diese Datei einstelle, können Sie hier sehen, dass sie eine Linie erzeugt, und jetzt möchte ich die Endzeile mit dem Startpunkt verbinden die Endzeile mit dem Startpunkt Dafür verwende ich den Z-Befehl. Wie Sie wissen, bedeutet Z den Befehl Pfad schließen. Wenn ich diese Datei einstelle, können Sie hier sehen, wie sie unseren Pfad schließt, und ich möchte diese I-Form mit grüner Farbe füllen. Soto-Typ fühlt sich grün an. Wenn ich diese Datei einstelle, siehst du hier die Pi-Form und jetzt werde ich mit diesen Parametern spielen Wenn ich den Parameter Sweet Flag auf Null ändere und diese Datei setze, können Sie hier sehen, wie sie eine Form wie ein Stealth-Bombarflugzeug erzeugt wie ein Stealth-Bombarflugzeug Wenn wir den Wert von Large Flag 1 ändern und diese Datei setzen, können Sie hier sehen, dass sie die Pi-Form invertiert Es vergrößert den Bogen in entgegengesetzter Richtung. Und wenn Sie den Wert eins von Sweet Flag ändern und diese Datei setzen, können Sie hier sehen, dass sie nach oben gewachsen ist. Hier können Sie also sehen, dass Sie mit einem Befehl verschiedene Arten von Formen erstellen können, Sie müssen mit ihren Parametern spielen. Und jetzt spiele ich mit diesem Parameter, der Cess-Rotation. Aber vorher werde ich die Bogengröße verringern. Also werde ich diesen Parameter einstellen. Also werde ich diesen Parameter auf Null setzen. Jetzt ist es wieder in seiner normalen Position, und jetzt werde ich den Rotationswert von X ändern. Also werde ich zuerst den YX-Wert des Bogens um 30 verringern und dann den Wert des Rotationsparameters um 20 erhöhen . Wenn ich diese Datei einstelle, können Sie jetzt sehen, wie sie unseren Bogen um 20 Grad dreht. Wenn ich diesen Wert, acht, ändere und diese Datei festlege, reagiert sie ganz anders. Wir setzen den Rotationswert immer auf Null. Sie können mit diesem Parameter spielen und experimentieren. Ich hoffe, jetzt ist Ihnen klar was der Befehl arc im Path-Tag ist. Danke, dass du dir dieses Video angesehen hast. Wir sehen uns im nächsten Tutorial. 5. SVG (skalierbare Vektorgrafik) Pfad mit Adobe Illustrator erstellen: Hallo Leute, schön, dass ihr wieder da seid. Ich bin wieder mit einem neuen Tutorial zurück, und in diesem Tutorial werden wir den besten Weg finden, einen Pfad zu erstellen. Wir suchen nach dem einfachsten Weg, einen Pfad zu zeichnen. Dafür müssen wir uns keine Punkte, keine Bogenbefehle, keine Kurven merken Bogenbefehle, keine Kurven Wir werden nur den Pfad zeichnen, den wir brauchen. Dafür öffne ich hier eine Anwendung, und unser Anwendungsname ist Adobe Illustrator Es ist eine vektorgrafische Anwendung . Jetzt werde ich eine neue Datei erstellen. Und hier werde ich eine Datei für Wave erstellen, also nehme ich diese Auflösung, 1920 — 180. Andernfalls können Sie eine beliebige Auflösung wählen, es liegt an Ihnen. Aber für dieses Beispiel werde ich dieses auswählen. Danach werde ich die Seite erstellen. Das ist unsere Ansicht Worx Dimension, 1920 5.080. Und jetzt werde ich einen einfachen Pfad zeichnen. Im Moment werde ich die Füllfarbe ausschalten und diese Konturfarbe einschalten. Wenn Sie diese Strichfarbe ändern möchten, müssen Sie die Strichfarbe auswählen und von hier aus können Sie eine beliebige Strichfarbe auswählen. In diesem Beispiel verwende ich die Standardfarbe Schwarz. Dann werde ich Farbe verwenden. Dieser ist bezahlt und ich werde einen Weg zeichnen. Außerdem werde ich hier einige Kurven zeichnen . Ich werde einen sehr komplexen Pfad zeichnen , der mit SVG-Code nicht einfach zu zeichnen ist. Das ist unser Ausgangspunkt. Ab diesem Punkt werde ich einige Kurven hinzufügen. Hier erstellen wir mehrere Kurven und es ist nicht einfach zu zeichnen. Das ist der Pfad, den ich für dieses Beispiel verwenden werde. Jetzt werde ich diese Datei als SVG-Bild festlegen. Dazu müssen wir in den Dateibereich springen dann Inter Speichern unter auswählen. Ich möchte diese Datei als ZG-Bild festlegen. Da ich das R-Board auswählen werde. Dann wähle ich mein aktuelles Arbeitsverzeichnis aus. In diesem Verzeichnis werde ich diese Datei einrichten und unsere Datei ist PPT mit Unterstrich eins Dann klicke ich auf die Schaltfläche Speichern. Jetzt können Sie einige Optionen sehen. Jetzt können Sie einige erweiterte Optionen in Ihrer Illustrator-Anwendung sehen in Ihrer Illustrator-Anwendung Sie können diese SVG-Datei als Stilattribute und auch als Stilelemente festlegen Stilattribute und auch als Stilelemente Ich würde gerne Stilelemente verwenden. Sie können auch das Stilattribut speichern. Dann müssen Sie auf Okay klicken. Nachdem Sie auf Okay geklickt haben, wird diese Datei im aktuellen Arbeitsverzeichnis gespeichert . Kehren wir nun zum aktuellen Arbeitsverzeichnis zurück. Jetzt können Sie in meinem aktuellen Arbeitsverzeichnis weiter sehen, und hier haben wir eine SVG-Datei mit dem Namen path unter dem ersten Quadrat. Wenn ich diese Datei in meinem Browser öffne und darauf doppelklicke, wie Sie sehen können, ist dies der Pfad, den wir in unserer Illustrator-Anwendung zeichnen Und wie Sie sehen können, lautet die Dateierweiterung Wig, Is an Wig image Jetzt werde ich diese Datei in einem Code-Editor öffnen. In unserem Fall werde ich sie im Sublink-Code-Editor öffnen. Lassen Sie mich Ihnen jetzt das Wichtigste zeigen. Zuerst müssen Sie die Vevox-Dimension beachten. Unsere Vevox-Dimension ist 1920 × 1080. Dann müssen Sie auf der Seite das Wichtigste beachten. Hier weist er eine Klasse und wir stylen diese Klasse innerhalb dieses Stils td Aber das brauchen wir nicht für unser Projekt. Wir brauchen den D-Attributwert, diesen. Es ist der wichtigste Teil dieses Tutorials. Sie können den Startpunkt anhand des Tags erkennen. Sie können die kubischen Bezier-Kurven erkennen. In diesem de-Attribut ist alles enthalten, und in unseren Vs-Tutorials erfahren Sie bereits mehr über die Koreaner Wenn Sie den Wert der D-Attribute haben, können Sie in jedem anderen Projekt genau denselben Pfad zeichnen in jedem anderen Projekt Aus diesem SVD-Bild möchten Sie nur den Dattribute-Wert extrahieren In diesem Tutorial versuche ich Ihnen nur zu zeigen, wie wir mit der Adobe Illustrator-Software zeichnen und in einer VG-Datei speichern können, wie wir komplexe Pfade und in einer VG-Datei speichern Nachdem wir es aus dieser Datei in einer SVG-Datei gespeichert haben, können wir den D-Attributwert extrahieren , sodass wir denselben Pfad in jedem anderen Projekt verwenden können Im nächsten Tutorial werde ich denselben Pfad in einem anderen Projekt anwenden. Vielen Dank, dass Sie sich diesen Videoplan für das nächste Tutorial 6. Animation des Bewegungspfads im SVG: Schön, dass ihr wieder da seid, Leute. Dies ist unser erstes Projekt, das sich mit Bewegungspfadanimationen befasst. In diesem Projekt werden wir lernen, wie wir Bewegungspfade mit Hilfe von reinem SVG erstellen können . Wir werden dafür keinen CSS-Keyframe, keine CSS-Animationseigenschaft verwenden keine CSS-Animationseigenschaft Wir werden es mit dem Animate-Motion-Tag und dem Pat-Tag machen Animate-Motion-Tag und dem Pat-Tag Lassen Sie mich Ihnen die Demonstration zeigen. Dies ist das Beispiel für diese Animation, die wir in diesem Projekt erstellen werden. Hier können Sie einen SVG-Pfad sehen, und Sie können auch einen roten Punkt sehen und der rote Punkt bewegt sich in diesem vordefinierten Pfad. Das werden wir heute in diesem Projekt bauen. also, ohne Ihre Zeit zu verschwenden, Lassen Sie uns also, ohne Ihre Zeit zu verschwenden, zum Visual Studio-Pot zurückkehren Endlich bin ich in einem Studio-Code-Editor. Zuerst nehme ich im Body-Tag das SVG-Tag AVG. Dann gebe ich in diesem SVG-Tag die Zuweisung mit, und W ist gleich zwei, ich übergebe 1920 1920 und Höhe gleich zwei hier innerhalb der Doppelcodes, ich werde tausend 80 volle SD-Dimension übergeben. Dann müssen wir das View-Feld definieren. Geben Sie also Vevox attribute view bars ein. Viewbox entspricht innerhalb der Doppelcodes. Innerhalb der Doppelcodes werde ich zuerst, um die Startposition zu definieren, von Exzessen ausgehen und yx ist Null und Null, und dann müssen wir die Dimension dieser Viewbox definieren , die 1920 mal tausendacht ist 1920 Genau die Höhe und Breite dieses Tags ist das Vg-Tag. Als Nächstes müssen wir innerhalb des SVG-Tags den Pfad erstellen, der für das Tracking verwendet wird. Geben Sie also einfach einen einzigen Befehl ein, definieren Sie den Pfad. Und hier werde ich das Pfad-Tag verwenden. Aber zuerst werde ich diesem Pfad-Tag eine ID zuweisen. Ich werde die ID ID eingeben, die meinem Pfad entspricht. Dann müssen wir das Dattribute definieren. Welches Dattribut das den Pfad definieren wird , ist identisch. Wie Startpunkt, Kurve, Bogen usw. Wenn Sie sich an unser vorheriges Tutorial erinnern, zeichnen wir mit Adovillustrator einen Pfad und diese Datei in ein SVG-Bild , müssen wir aus diesem SVG-Bild Wie ich Ihnen bereits sagte, müssen wir aus diesem SVG-Bild den D-Attributwert extrahieren Ich kopiere genau den Dattribute-Wert aus diesem Bild, kopiere ihn und dann zurück zum Studio-Code des Benutzers Dann füge ich das genaue Attribut und den Verzicht in das Spot-Tag füge ich das genaue Attribut und den Verzicht in das Danach definiere ich die Strichfarbe, ein Typ Strichstrich, entspricht dem, den ich zuweisen werde Außerdem müssen Sie das Feld transparent machen. Geben Sie also innerhalb der Doppelcodes ein, fühlen Sie sich gleich an. Ich werde diese Datei transparent machen. Wenn ich nun diese Datei eingerichtet habe, öffne ich diesen Code in unserem Browser, wie Sie hier sehen können, öffne ich diese Datei in unserem Browser und Sie können den Pfad sehen, den genauen Pfad, den wir in unserem Adobe Illustrator zeichnen Es ist aufgrund dieses D-Attributwerts passiert, und jetzt müssen wir das Objekt, das animiert werden soll , durch diese Linie zeichnen animiert werden soll , durch diese Dafür verwende ich einen Kreis. Aber zuerst gebe ich ein einzelnes Befehlsobjekt ein, das animiert werden soll Hier zeichne ich einen Kreis, Summentyp, Kreis, dann definiere ich innerhalb dieses Kreis-Tags zuerst den Radius mit dem R-Befehl R, der Radius entspricht innerhalb des doppelten Kurses, ich gebe Tin Head Dann werde ich diesen Kreis spüren, das Gefühl haben, diesen Kreis mit roter Farbe füllen zu wollen. Ratte. Jetzt, nachdem ich diese Datei eingerichtet habe und zu meinem Browser zurückkehre, können Sie hier diesen Kreis sehen, den Hubkreis, weil seine Mittelposition Null mal Null Pixel ist , weshalb Sie diesen Teil dieses Kreises sehen können Jetzt müssen wir diesen Kreis zusammen mit diesem Teil von dieser Position zu dieser Position animieren zusammen mit diesem Teil von dieser Position zu dieser Position Dazu müssen wir das Attributattribut innerhalb dieses Kreises verwenden, bei dem es sich um Attributattribut innerhalb dieses Kreises verwenden, animierte Bewegung handelt Kehren wir zum Ergebnis-Studio-Code zurück. Innerhalb dieses Kreises werde ich ein Attribut namens animate motion verwenden Bewegung animieren. Bewegung animieren. Zunächst müssen wir die Animationsdauer angeben. Dafür gebe ich das UR-Attribut ein, die Dauer entspricht, ich verwende fünf Sekunden. Innerhalb von fünf Sekunden wird die Animation abgeschlossen sein. Dann müssen wir die Anzahl der Wiederholungen angeben, und ich möchte diese Animation in unendlicher Zeit wiederholen . Um also „repeat-count heap wenn die Anzahl innerhalb des doppelten Kurses entspricht, übergibt Heund den Wert Also in, DE, FI, NI, T, unbestimmt eingegeben FI, NI, T, unbestimmt Es wird die Animation erneut ausführen und AM danach müssen wir den Pfad definieren Wir müssen den Bewegungspfad definieren , in welchem Bewegungspfad die Animation ausgeführt werden soll. Dafür müssen wir innerhalb einer animierten Bewegung den Pfad definieren, P hier weisen wir den Pfad Um dies zuzuweisen, müssen wir seine ID, meinen Pfad, verwenden. Wie Sie sehen können, weisen wir hier die ID zu. Kopiere meinen Pfad und verwende hier das HREF-Attribut. HRP in den Doppelcodes, Sie müssen das Hestec-Zeichen verwenden, weil sie es benutzt, weil es ID ist, dann werde ich den ID-Namen einfügen und diese Datei einrichten Wenn ich nach dem Einrichten dieser Datei zu meinem Browser zurückkehre , können Sie das Ergebnis sehen Innerhalb von fünf Sekunden ist die Animation abgeschlossen und die Animation wird entlang des Pfads ausgeführt. Wenn Sie die Geschwindigkeit dieser Animation erhöhen möchten, können Sie die Animationsdauer verringern. Lass es mich dir zeigen. Wenn ich die Animationsdauer innerhalb von 2 Sekunden verringere, lege diese Datei fest. Jetzt können Sie feststellen, dass es die Animationsgeschwindigkeit erhöhen wird . Wenn Sie die Animationsgeschwindigkeit verringern möchten, müssen Sie auf die gleiche Weise Animationsgeschwindigkeit verringern möchten, müssen Sie auf die den Wert für die Animationsdauer erhöhen. In unserem Fall zehn Sekunden. Wenn ich nach dem Einrichten dieser Datei zu meinem Browser zurückkehre , können Sie das Ergebnis sehen. Jetzt, innerhalb von 10 Sekunden, wird die Animation abgeschlossen sein. Es vervollständigt den Pfad. Auf diese Weise können Sie die Putraging-Animation mit SVG erstellen . Es gibt eine andere Möglichkeit, Es gibt eine andere Möglichkeit, Ptraging-Animation durchzuführen In unserem nächsten Tutorial werden wir mehr darüber erfahren. 7. Animation des Bewegungspfads in CSS: Ich bin also wieder mit einem anderen Beispiel für Motion Cath-Animation zurück. Aber dieses Mal werde ich reine CSS-Animation, reine CSS-Animationseigenschaften und die Keyframes verwenden , und wir werden dafür keine animierte Bewegung aus dem VG-Tag verwenden animierte Bewegung aus dem VG-Tag Lassen Sie mich Ihnen anhand der Demonstration zeigen , was wir heute in diesem Projekt bauen werden Wie Sie in diesem Beispiel sehen können, fliegt ein ErrupN über den vordefinierten Pfad Hier verwenden wir denselben Pfad , den wir in unserem vorherigen Projekt verwendet haben Der Vorteil ist jedoch, dass wir den tatsächlichen Pfad in unserem Projekt nicht angeben müssen den tatsächlichen Pfad in , da er mit CSS erstellt wurde. Dafür müssen wir nur die SVG-Pfadkoordinate verwenden. Und der Hauptvorteil der Verwendung von CSS ist, dass Sie das Erupted durch alles Mögliche ersetzen können Es könnte eine Sonne sein, es könnte ein Ball sein, es könnte ein Schiff sein, irgendwas. Lass es mich dir zeigen. Wie Sie sehen können, ersetzen wir hier den Airpen durch ein Schiff, anstatt einen Stift zu verwenden ersetzen wir hier den Airpen durch ein Schiff, anstatt einen Stift zu Und das Schiff folgt dem vordefinierten Pfad. Lassen Sie uns mit dem Praktischen beginnen und sehen, wie wir diese Bewegungspfad-Animation erstellen können. Endlich sind wir in meinem Studio-Code-Editor. Zunächst erstelle ich innerhalb des Body-Tag-Heads ein Deep Tag DIV, Deep Dot, und weise dem Deep-Tag , das sich bewegt, eine Klasse zu. Tiefer Punkt bewegt sich. Dann nehme ich ein Style-Tag in das Head-Tag. Also hier bin ich gefesselt, geblieben. In diesem Style-Tag werde ich zuerst das Body-Tag stylen. So straffer Körper. Dann werde ich innerhalb der Arisse den Hintergrund zuweisen. Hintergrund, hier möchte ich dem Hintergrund das Tag 222 zuweisen, dunkelgrauer Hintergrund, und ich werde diese Datei unterschreiben. Nachdem ich diese Datei eingerichtet habe, werde ich sie in meinem Browser öffnen . Jetzt ist mein Browser leer. Jetzt geht es zurück zum Code. Danach werde ich dieses tiefe Element mit seinem Klassennamen movie stylen . Punktfilm vom Typ Hämo. Dann werde ich innerhalb von AlivSSF werde ich Im Grunde werden wir dieses Element entlang dieses Pfades bewegen dieses Element entlang dieses Pfades Also hier werde ich die Breite 20 Pixel, 20 Pixel definieren. Dann werde ich die Höhe definieren. Auch 20 Pixel sind eine quadratische Box. Dann möchte ich eine Hintergrundfarbe zuweisen. Hintergrund, ich möchte rote Farbe verwenden, reines Rot. Danach definiere ich die Position und möchte sie absolut machen. Jetzt werden wir dieses Element entlang des Pfads verschieben, also müssen wir den entgegengesetzten Pfadtyp definieren , diesen Pfad. Hier gebe ich Path ein. Dann innerhalb der Runden innerhalb der Doppelcodes, hier weiter, um das Do weiterzugeben. Nun stellt sich die Frage, welcher Wert? Genau derselbe Pfadwert , den wir in unserem vorherigen Tutorial verwendet haben. Ich kopiere genau den gleichen Wert vom Startpunkt zum Endpunkt. Dann füge ich diesen Wert in diesen Pfad ein. Und ich werde diesen einstellen. Danach müssen wir den Animations-Keyframe erstellen. Um den Animations-Keyframe zu erstellen, gebe ich Keyframes mit der Geschwindigkeit ein, füge die Keyframes hinzu und unser Animationsname lautet move Dann im Livass bei 0% oder bei 0% der Zeit. Im Inneren der Klippen werde ich sagen, dass es Flecken ausgleicht, ich mache Und dann dupliziere ich diesen Abschnitt. Dann möchte ich bei 100% der Dauer, bei 100% der Dauer, bei 100% der Dauer, die entgegengesetzte Entfernung zu 100% erreichen. Das ist alles. Ich werde diese Datei einrichten. Jetzt werde ich diese Animation anwenden. Dafür gebe ich Animation-Tag ein. Animation. Hier drin werde ich den Animationsnamen move weitergeben. Dann stelle ich die Animationsdauer ein. Ich stelle fünf Sekunden ein, dann die Animationsrichtung linear. Anzahl der Animations-Iterationen. Ich möchte diese Animation unendlich lang laufen lassen, also sage ich unendlich Ich werde diese Datei einrichten. Stellen Sie diese Datei Wenn ich zu meinem Browser zurückkehre, können Sie das Ergebnis sehen. Jetzt können Sie den Pfad nicht mehr sehen, aber Sie können feststellen, dass sich das Objekt entlang des Pfads bewegt. Es folgt dem Pfad und beendet die Animation Es ist gut, die Animation unendlich lang laufen zu lassen. So können wir Bewegungspfadanimationen mit CSS erstellen. Wenn Sie die Geschwindigkeit erhöhen oder verringern möchten, können Sie die Dauer ändern. Wenn du die Dauer verlängerst, wenn ich sie auf zehn Sekunden setze und dann den Stapel festlege, kannst du jetzt sehen, wie sich die Geschwindigkeit der Animation verringert. Das Wichtigste ist nun, wenn Sie CSS-Animationseigenschaften verwenden, können Sie dieses Objekt durch alles ersetzen. Ich möchte jeden PNG-Hintergrund sagen. Es könnte ein Schiff sein, es könnte ein Flugzeug sein, es könnte ein Basketball sein, irgendwas. Lass mich dir zeigen, wie. Wie Sie in meinem aktuellen Arbeitsverzeichnis sehen können, sind wir jetzt glücklicher, Airplane Dot Png und Us Dot PNG abzubilden. Es ist ein Bild eines Flugzeugs und es ist ein Bild eines Schiffes. Jetzt werde ich die quadratische Schachtel ersetzen. Ich möchte das rote quadratische Kästchen mit diesen Bildern sagen. Dafür werde ich diese Zeile auskommentieren und Property Call Background verwenden. Hintergrund und dieses Mal verwende ich URL, URL. Hintergrund, URL, hier innerhalb des einzelnen Kurses werde ich den Bildnamen Cush Crews Dot PNG übergeben Cush Crews Dot Damit werde ich die Höhe und Breite ein wenig erhöhen die Höhe und Breite ein wenig Ansonsten ist es kaum sichtbar. Also werde ich es 40 mal 40 schaffen. Außerdem werde ich eine andere Eigenschaft als Hintergrundgröße verwenden , und ich werde sie überdecken, weil unsere Bildauflösung viel höher ist als unsere innere Auflösung. Sie ist 500 mal 500 Pixel groß. Bitte stellen Sie diese Datei ein , wenn ich zu meinem Browser zurückkehre. Sie können das Ergebnis sehen. Hier können Sie das Ergebnis sehen. Diesmal wurde die rote quadratische Kiste durch dieses Kreuzfahrtschiff ersetzt die rote quadratische Kiste durch dieses Kreuzfahrtschiff Wenn ich die Größe noch etwas erhöhe, lass mich dir zeigen, ob ich es hundert mal hundert, hundert mal hundert mache und sie werden diese Datei einstellen Jetzt ist das Schiff sichtbar und wie Sie sehen können , bewegt sich das Schiff auf dem vordefinierten Pfad. Auf die gleiche Weise können Sie das Schiff durch das Flugzeug ersetzen . Lass mich dir zeigen, wie Statt Crus Ship PNG werde ich Airplane Dot PNG verwenden Dann stelle ich diese Datei ein, und ich werde diesmal die Innenhöhe reduzieren Ich werde daraus 55 50 Pixel machen. Und ich werde diese Datei einrichten. Wenn ich nach dem Einrichten dieser Datei zu meinem Browser zurückkehre, können Sie das Ergebnis sehen. Ich hoffe, jetzt ist es für Sie klar, wie wir Bewegungspfadanimationen mit SVG-Grafik und mit reinem CSS erstellen können . Aber in jeder Animation müssen wir den Bewegungspfad definieren. Also danke, dass du dir dieses Video angesehen hast. Seien Sie gespannt auf das nächste Tutorial.