Hallo aller seits, ich binGraue LizenzIch freue mich sehr, Ihnen ein Tutorial für Trocken waren zu bringen.
Der Inhalt des Tutorials ist zu 100% original, egal ob es sich um Design oder Code handelt.Der Code ist für alle bereitEs ist sehr einfach, Sie k?nnen es verwenden.Open Source hat kein Urheberrecht, bitte verwenden Sie es~
Ich wei? nicht, wann die Cloud-Websites vieler gro?er Hersteller zu einem sehr drei dimensionalen Symbol geworden sind.Es gibt einen interessanten kleinen Effekt beim Ein-und Ausfahren der Maus.
▲ Homepage von Alibaba CloudHttps://www.aliyun.com/
▲ Der Effekt des Ein-und Ausbewegens kleiner Symbole
▲ Tencent Cloud Homepage
▲ Der Effekt des Ein-und Ausbewegens kleiner Symbole
Um allen zu helfen, den Realisierung prozess dieses kinetischen Effekts zu verstehen, schrieb Ah Hui speziell ein sehr detailliertes Tutorial. Bringen Sie Ihnen bei, diese Effekte zu machen und zu erzielen.Für Designer ist es auch m?glich, nur den Teil zu lernen, das Symbol zu machen und den Programmierer meinen Code direkt kopieren zu lassen. 100% Garantie, dass Ihr Design landen kann.
Nicht viel Unsinn, werfen wir einen Blick auf das Endergebnis, das ich gemacht habe (besuchen Sie den blauen Link unten, um es anzuzeigen):
Https://www.pslkzs.com/demo/cloud/index.html
▲ Dies ist der Effekt, den ich entwickelt und produziert habe.
Die Modelle im Tutorial sind sehr einfach, da ich Ihnen nicht beibringen kann, ein paar Stunden lang zu modellieren, zu leuchten und zu rendern... Ich muss die kürzeste Zeit nutzen, um Sie über den gesamten Prozess der Realisierung zu informieren. In Zukunft k?nnen Sie Ihre eigene Methode verwenden, um Ihre eigenen drei dimensionalen Alibaba Cloud-Symbole und-Effekte zu vervollst?ndigen.
Besondere Hinweise:Dieser Artikel hat nichts mit Alibaba und Tencent zu tun. Ich wei? nicht, wie sein Design gemacht wurde und wie der Code geschrieben wurde. Ich nutze meine Erfahrung nur, um über ihre guten Ergebnisse nachzudenken und jedem beizubringen, ?hnliche Effekte zu erzielen und zu erzielen.
Damit der Junior-Designer den gesamten Prozess klarer sehen kann, habe ich ein sehr detailliertes Video-Tutorial aufgenommen.Ich empfehle Ihnen dringend, durch Video zu lernenDies stellt sicher, dass jeder Schritt sehr klar ist. Wenn es für Sie nicht bequem ist, das Video im Unternehmen anzusehen, k?nnen Sie auch unser Grafik-Tutorial direkt ansehen.
-Video-Tutorial-Teil-
Kopieren Sie manuell den blauen unterstrichen Text link unten und überprüfen Sie ihn bei Station b.
Lehrvideo 1:"Alltags vorspiel》
Https://www.bilibili.com/video/BV1sS4y1o7Yk
Lehrvideo 2:"Verwenden Sie C4D, um kleine Modell beweglichkeit zu erzeugen》
Https://www.bilibili.com/video/BV1sS4y1o7Yk? P = 2
Lehrvideo 3:"Verwenden Sie Adobe Xd, um animierte kleine Symbole zu erstellen》
Https://www.bilibili.com/video/BV1sS4y1o7Yk? P = 3
Lehrvideo 4:"Effekt mit Code erzielen》
Https://www.bilibili.com/video/BV1sS4y1o7Yk? P = 4
Es wurde wiederholt betont, dass UI-Designer nicht lernen müssen, wie man Code schreibt. Sie müssen nur darauf achten, wie das Bild des Liefer teils erstellt wird. Wenn Sie zu viele F?higkeiten haben, werden Sie natürlich nicht überw?ltigt. Wenn Sie sich das gesamte Video ansehen, wird Ihr Wissen offener. Verstehen Sie den Workflow und die Beziehung zwischen Ihnen und Forschung und Entwicklung besser,Je mehr Sie wissen, desto mehr haben Sie das Recht zu sprechen, und niemand kann Ihr Design mit "unerreichbar" leugnen.
-Grafik-Tutorial-Teil-
Tutorial 1:C4D macht ein drei dimensionales Symbol für dynamische Effekte
Endeffekt
Schritt 1?ffnen Sie C4D, um einen neuen Würfel zu erstellen.
Schritt 2Verwenden Sie das Zoom-Werkzeug, um den Würfel ein wenig zu quetschen (Sie k?nnen auch das Eigenschaften feld in der unteren rechten Ecke anpassen und einen bestimmten Wert eingeben).
Schritt 3Strg + C Kopieren Sie eine, Strg + V einfügen. Verwenden Sie dann das mobile Werkzeug, um die kopierte Kopie nach oben zu ziehen. Auf diese Weise erhalten Sie 2 Würfel.
Schritt 4Verwenden Sie das Zoom-Werkzeug erneut, um den oberen zu quetschen.
Schritt 5Kopieren Sie den Würfel oben und ziehen Sie ihn nach oben. Auf diese Weise sind Sie mit dem gesamten Symbol fertig.
▲ Ja, so einfach ist das.
Schritt 6Doppelklicken Sie auf den roten Rahmen in der unteren linken Ecke, um 1 Material hinzuzufügen.
▲ Doppelklicken Sie insgesamt 3 Mal, damit Sie 3 neue Material kugeln erstellen k?nnen.
Schritt 7W?hlen Sie die gerade neu erstellten Material kugeln aus und ?ndern Sie sie in Wei?, Orange und Schwarz.
▲ Achten Sie auf die untere linke Ecke. Jetzt gibt es drei Material kugeln.
Schritt 8Ziehen Sie die drei Material kugeln auf die drei Würfel.
▲ Achten Sie auf die obere rechte Ecke. Jeder Würfel hat einen Material ball. Auf diese Weise sind unsere Symbole mit Materialien fertig.
Schritt 9W?hlen Sie den wei?en Würfel oben aus. Im 0. Frame ist ein Key frame der H-Eigenschaft K der Koordinate in der unteren rechten Ecke.
Schritt 10?ndern Sie an der Position des 16. Frames ein weiteres K für das H-Attribut und ?ndern Sie das Attribut auf 180 °
Auf diese Weise sind Sie mit der Rotations animation oben fertig. Der Effekt ist wie folgt:
Verwenden Sie die gleiche Methode auf den K-Rahmen des orange farbenen Würfels. Die gesamte Animation ist fertig. Aber diesmal haben wir den orange farbenen Würfel umgekehrt drehen lassen (das H-Attribut des 16. Rahmens wird auf-180 ° ge?ndert), und der gesamte Bewegungs effekt ist abgeschlossen.
Schritt 11Klicken Sie auf Rendern> Rendering-Einstellungen bearbeiten. W?hlen Sie dann das Eingabe format als PNG aus und überprüfen Sie unbedingt den Alpha-Kanal. Das so exportierte PNG ist ein transparenter Hintergrund.
Schritt 12 Der zu ausgegebene Frame wird in "Manuell" ge?ndert, der Start rahmen ist 0 und der End rahmen ist 16.
▲ Weil wir 16 Bilder für diese Animation gemacht haben.
Schritt 13 Klicken Sie auf Rendern> Zur Rendering-Warteschlange hinzufügen.
Schritt 14 Klicken Sie auf den Render-Button. Auf diese Weise werden 0 bis 16 Bilder und insgesamt 17 Bilder gerendert.
▲ In der Mitte befindet sich ein Cyan-Fortschritts balken. Bestimmen Sie die Geschwindigkeit des Renderings basierend auf der Konfiguration Ihres Computers.
Dies sind die 17 gerenderten Bilder, sie sind alle PNG-Bilder mit transparentem Hintergrund, sehr perfekt. Wir werden einige Splei?ungen in Tutorial 3 vornehmen, um sie an den Programmierer zu liefern.
Tutorial 2 Verwenden Sie Adobe Xd, um einen Kalender mit einer kleinen Bewegung zu erstellen
Endeffekt
Der Ursprung dieses Tutorials ist, dass einige Schüler in der WeChat-Gruppe fragten, ob es eine schnelle M?glichkeit gibt, das Bild unten zu erstellen. Also dachte ich an die 3D-Transformation-Funktion von Adobe Xd. Er wurde sofort animiert.
▲ Dieses Bild stammt aus einem Screenshot von WeChat-Gruppen freunden. Ich wei? nicht, welcher gro?e Gott es gemacht hat. Dies wird nur verwendet, um kostenlose Tutorials zu erstellen, keine kommerzielle Nutzung. Wenn Sie versehen tlich Ihre Rechte verletzen oder wenn Sie unglücklich sind, habe ich Ihre Bilder verwendet. Sie k?nnen sie privat l?schen.
Schritt 1Zeichnen Sie die Vorder ansicht des Kalenders in Adobe Xd. Ich vereinfachte sie hier und zeichne nur 4 abgerundete Rechtecke. Und in eine Gruppe.
Schritt 2W?hlen Sie diese Gruppe aus und klicken Sie auf die Schaltfl?che 3D-Konvertierung rechts.
Durch Ziehen und Ablegen wird das Kalenders ymbol zu einem perspektivischen Gefühl.
Schritt 3W?hlen Sie die grüne Schaltfl?che ebene aus und stellen Sie die z-Achse auf 250 ein. Auf diese Weise wird dieser Knopf aufgeh?ngt.
Schritt 4W?hlen Sie das wei?e Rechteck aus und stellen Sie seine z-Achse auf 150 ein. Auf diese Weise wird auch das wei?e Rechteck aufgeh?ngt.
Schritt 5W?hlen Sie die vorletzte Ebene aus und passen Sie ihre z-Achse auf 80 an.
Auf diese Weise werden wir den endgültigen Effekt dieses kinesen Effekts erzielen. Als n?chstes müssen wir nur mehrere Bilder exportieren, um die ganze Arbeit abzuschlie?en.
Schritt 6W?hlen Sie diese Gruppe aus, ?ndern Sie den Gruppennamen in "Gruppe 20" und exportieren Sie PNG-Bilder mit Strg E. Dies ist das Bild von unserem 20. Frame. Um genau zu sein, unser letztes Bild, da es wahr schein lich nicht so viele von 20 Bildern gibt.
Schritt 7?ndern Sie die z-Achse des Rechtecks unserer dritten Schicht in 0 (ursprünglich 80) und ?ndern Sie dann den Namen der Gruppe in "Gruppe 19". Nach der Auswahl der Gruppe erneut Strg + E Exportieren Sie das Bild für den 19. Frame.
Schritt 8?ndern Sie die z-Achse des wei?en Rechtecks in 75 (ursprünglich 150) und ?ndern Sie dann den Gruppennamen in "Gruppe 18". W?hlen Sie die Gruppe erneut aus Strg + E exportieren Sie das Bild für den 18. Frame.
Schritt 9?ndern Sie die z-Achse des wei?en Rechtecks in 0 (ursprünglich 75) und ?ndern Sie den Gruppennamen in "Gruppe 17". W?hlen Sie die Gruppe erneut aus Strg + E, um das Bild für den 17. Frame zu exportieren.
Schritt 10W?hlen Sie die grüne Schaltfl?che ebene aus, ?ndern Sie die z-Achse direkt in 0 und ?ndern Sie dann den Gruppennamen in "Gruppe 16". Nach der Auswahl der Gruppe erneut Strg + E exportieren Sie das Bild für den 16. Frame.
Bisher gibt es 5 Bilder auf der Z-Achse. Das ist alles, was die Z-Achse ansteigt. Als n?chstes machen wir erneut ein animiertes Bild des Drehwinkels. Nachdem Sie die gesamte Gruppe ausgew?hlt haben, werden Sie feststellen, dass die x-Achsen-Rotation der drei dimensionalen Transformation manuell auf 12 ° und die y-Achsen-Rotation auf-43 ° eingestellt wurde.
Schritt 11?ndern Sie die Drehung der y-Achse auf-33 ° und ?ndern Sie dann den Gruppennamen in "Gruppe 15". W?hlen Sie die Gruppe erneut aus Strg + E exportieren Sie das Bild für den 15. Frame.
Schritt 12?ndern Sie die Drehung der y-Achse auf-23 ° und ?ndern Sie dann den Gruppennamen in "Gruppe 14". Nach der Auswahl der Gruppe erneut Strg + E exportieren Sie das Bild für das 14. Bild.
Schritt 13?ndern Sie die Drehung der y-Achse auf-13 ° und ?ndern Sie dann den Gruppennamen in "Gruppe 13". Nach der Auswahl der Gruppe erneut Strg + E Exportieren Sie das Bild für den 13. Frame.
Schritt 14?ndern Sie die Drehung der y-Achse auf-0 ° und ?ndern Sie dann den Gruppennamen in "Gruppe 12". W?hlen Sie die Gruppe erneut aus, um das Bild für den 12. Frame nach Strg + E zu exportieren.
Wir haben alle Animationen für die Drehung der y-Achse erstellt. Als n?chstes machen wir die Animation für die Drehung der x-Achse. Die Methode ist im Grunde dieselbe.
Schritt 15?ndern Sie die X-Achse auf 6 ° und ?ndern Sie dann den Gruppennamen in "Gruppe 11". W?hlen Sie die Gruppe erneut aus, um das Bild für den 11. Frame nach Strg + E zu exportieren.
Schritt 16?ndern Sie die Drehung der x-Achse auf 0 ° und ?ndern Sie dann den Gruppennamen in "Gruppe 10". Nach der Auswahl der Gruppe erneut Strg + E Exportieren Sie das Bild für den 10. Frame.
Auf diese Weise kommt unser gesamter Kalender. Alle für die Animation erforderlichen Rahmen bilder wurden erhalten. Schauen Sie sich die gerade gespeicherten Bilder an. Tats?chlich gibt es nur 11 Bilder aus Gruppe 10-Gruppe 20. Das hei?t, wir haben eigentlich nur 11 Frames.
Haha, vielleicht k?nnen Sie sich nicht vorstellen, dass der Produktions prozess unseres Effekts so einfach und unh?flich ist. Im kreativen Prozess müssen wir mutig denken und es mutig versuchen.Die Brüder erinnern sich: Solange Sie mutig sind, k?nnen wir den weiblichen Geist auch in Mutterschaft urlaub nehmen lassen!
Das dynamische Effekt-Tutorial von Xd ist hier vorbei. Wir werden sie in Tutorial 3 zusammenfügen, um sie an den Programmierer zu liefern.
Tutorial 3 realisiert den Animations effekt des Ein-und Ausstiegs der Maus über den Code.
Als n?chstes werden wir die beiden zuvor vorbereitete dynamische Effekte zu einem langen Bild zusammenfügen, das geliefert werden soll. Sie müssen die zus?tzlichen Leerzeichen im Bild abschneiden und dann ein langes vertikales Bild zusammenfügen. Einzelheiten finden Sie in der folgenden Abbildung:
Für den obigen Schritt müssen Sie eine Software wie PS verwenden, um diese manuell auszuführen, und sich die Breite, H?he und die Gesamtzahl der Bilder nach dem Zuschneiden merken. Mit diesen 3 Schlüssel informationen kann der Programmierer Code schreiben, um die gesamte Arbeit abzuschlie?en.
Als n?chstes werde ich das von mir selbst entwickelte Plug-In "PS Motion Effect Code Assistant" verwenden, um die gesamte Arbeit abzuschlie?en. Das Plug-In erstellt automatisch Bilder.
Download-Adresse des Plug-Ins:
Https://www.pslkzs.com/animate/index.php
Die n?chsten Schritte werden mit einem Plug-In generiert.Wenn Sie das Plugin nicht verwenden, spielt es keine Rolle, Sie k?nnen das Bild manuell zusammenfügen. Manuelles N?hen ist nicht schwierig, nur ein bisschen mühsam.Das Splei?en von Wachstums bildern ist die Grundlage für PS (oder andere Design-Software). Ich werde hier keinen speziellen Artikel schreiben.
Schritt 1?ffnen Sie PS, erstellen Sie ein neues leeres Dokument mit einer Aufl?sung von 1920*1080 und 72dpi und ?ffnen Sie das Plug-In "PS Motion Code Assistant".
Schritt 2Klicken Sie auf die erste Schaltfl?che des Plugins, um zu importieren. W?hlen Sie den Ordner aus, in dem Sie zuvor die Frames der C4D-Exports equenz gespeichert haben (der Ordner muss nur PNG-Bilder enthalten, es gibt nichts anderes), damit alle Bilder in PS "platziert" werden.
▲ Im Ebenen fenster in der unteren rechten Ecke sind 17 Bilder von 0-16 zu sehen.
Schritt 3Klicken Sie auf die zweite Schaltfl?che des Plugins, um automatisch zu sortieren. Nach dem Klicken ist die Reihenfolge der Ebenen für Sie abgeschlossen.
Schritt 4Klicken Sie auf die dritte Schaltfl?che des Plugins, um den Schnitt zu minimieren. Auf diese Weise wird der leere Bereich des Bildes automatisch für Sie abgeschnitten.
Obwohl die zus?tzliche Gr??e abgeschnitten wurde, betr?gt die Breite des Symbols immer noch mehr als 400 Pixel. Wir ben?tigen nur ein kleines Symbol und müssen es als Ganzes verkleinern.
Schritt 5Bild> Bildgr??e, ?ndern Sie die Breite auf 100, damit das gesamte Symbol kleiner wird.
▲ Denken Sie daran, die Schaltfl?che mit reduziertem Verh?ltnis zu aktivieren. Auf diese Weise werden Breite und H?he insgesamt kleiner.
Schritt 6Klicken Sie auf die 4. Schaltfl?che des Plug-Ins. Es wird eine Datei generiert, die den Effekt antreibt. Es enth?lt ein HTML und ein langes Bild.
Auf dem Desktop befindet sich ein generierter Ordner mit einer HTML-Datei und einem gesplei?ten PNG-Bild. Wenn Sie diese HTML-Datei ?ffnen, k?nnen Sie den generierten Code sehen.
▲ Der Motion Effect Code Assistant ist ein Tool zum Generieren von Motion-Loop-Effekten, aber diesmal ben?tigen wir diese Art von Motion-Effekten nicht, die st?ndig abgespielt werden. Wir brauchen es nur, um ein gutes langes Diagramm zu erzeugen.
Dies ist das lange Diagramm, das es generiert, was wir brauchen. Sehr perfekt.
▲ Das Plug-In ist auch sehr intim und gibt dem generierten Bild einen aussage kr?ftigen Namen. Der Name des Bildes lautet: w100h1343steps17.png, wobei w die Breite darstellt, h die H?he des gesamten langen Bildes darstellt und Steps die Gesamtzahl der Bilder darstellen. Das hei?t: Die Breite eines einzelnen kleinen Bildes betr?gt 100px, die H?he betr?gt 1347/17 = 79 und es gibt insgesamt 17 Bilder. Diese wichtigen Informationen müssen für die Programmierung verwendet werden.
An diesem Punkt ist die Arbeit des UI-Designers abgeschlossen. Der Rest wird vom Front-End-Programmierer erledigt. Wenn Sie Code lernen m?chten, oder Ihr Programmierer nicht wissen, wie es zu implemen tieren. Sie k?nnen dieses Video sehen, es hat mich aufgenommenCode zeilen weise schreibenDer Prozess der Realisierung.
Adresse des Video-Tutorials:
鄂公网安备 42010202002647号