Polylion

Der folgende Beitrag ist ein Gastbeitrag von Dennis Gaebel. Dennis hat einige ziemlich fesselnde Polygon-SVG-Effekte auf CodePen erstellt, und hier teilt er mit, wie er das gemacht hat.

Manchmal erhalten die Dinge, die man am wenigsten erwartet, die größte Aufmerksamkeit, wie es bei Polylion der Fall war, das ich auf CodePen gepostet habe. Ich dachte, die Einfachheit des Animationseffekts wäre leicht zu verstehen, da ich nichts allzu Verrücktes im Code gemacht habe, aber ich schätze, das Endergebnis war einfach cool. Ich möchte mit euch allen teilen, wie und warum diese Animation zustande kam.

Wenn du mir auf Twitter nicht folgst, lass ich dich wissen. Ich schreibe eine ganze Reihe von Artikeln für Tuts+, die sich auf TimelineMax von GreenSock konzentrieren. Im Wesentlichen geht es von Anfänger bis Fortgeschrittene und bietet funktionierende Beispiele, die die Leser selbst ausprobieren können. Das Studium mit Polygon-Animationen begann auch als Übung für ein Projekt, das ich für Jonno Riekwel bei Polyon gemacht habe, also war es im Grunde ein Win-Win für alle.

Der Polyman

Ich begann meine Recherche mit der Untersuchung des Polyman SVG, das ich auf CodePen gefunden habe. Ursprünglich wurde es mit CSS realisiert (explodiert auch beim Hovern \o/), aber ich wollte die Möglichkeiten einer feineren Steuerung mit jeder Polygonform untersuchen. Das Ergebnis ist das, was Sie unten sehen, wobei TimelineMax verwendet wird, um die Polygone gleichzeitig anzuzeigen.

Da das SVG Teile des Mannes (Ohren, Gesicht usw.) in <g>-Tags enthielt, war es ein Kinderspiel, mit JavaScript auf jeden einzelnen zuzugreifen. Da SVG XML ist, ist alles, was es erstellt, einfach ein Knoten. In jQuery wäre der Selektor so etwas wie: $('svg g#shirt path').

Polylion-Einrichtung

Für den Löwen wollte ich jedes Polygon-Element einzeln greifen $('svg.polylion > polygon'), um maximale Kontrolle zu haben und jedem eine kaskadierende Wirkung zu verleihen, wie Sie gesehen haben. Offensichtlich ist das Ergebnis super cool und ehrlich gesagt gar nicht so schlecht zu animieren. Lassen Sie mich erklären, wie der Löwe seine Magie erhalten hat.

Da ich häufig auf CodePen unterwegs bin, habe ich einen Blick auf den Löwen geworfen, der von Dmytro Batarin in seinem Pen SVG Low Poly Lion gepostet wurde, welcher anscheinend ursprünglich auf Dribbble von Breno Bitencourt gepostet wurde, der auch über den Prozess der Erstellung von Polygon-Vektorarbeiten hier geschrieben hat. Falls Sie keine Zeit haben, den Artikel von Breno zu lesen; das gesamte SVG ist von Hand erstellt. Es gibt keinerlei Tricks dahinter und anscheinend ist es derzeit der einzige Weg, um die besten Ergebnisse zu erzielen.

Da das Design bereits für mich erledigt war, musste ich nur noch TimelineMax integrieren und meine Konfiguration entsprechend anpassen, um den gewünschten Effekt zu erzielen.

Polylion Code

Sehen Sie den Pen SVG Low PolyLion: Animierte Polygone von Dennis Gaebel (@grayghostvisuals) auf CodePen.

Bevor wir zum wirklich Spaßigen kommen, werfen wir einen Blick auf die XML-Ausgabe unseres SVG.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" class="polylion">
  <polygon points="392,85 380,128 339,98" style="fill: #FADFAA" />
  <polygon points="392,85 380,128 412,111" style="fill: #EABA8C" />
  <polygon points="339,98 380,128 340,140" style="fill: #FAD398" />
  <polygon points="339,98 340,140 309,142" style="fill: #DFA387" />
  <polygon points="339,98 309,142 286,133" style="fill: #F9D8AD" />
  <polygon points="392,85 412,111 443,101" style="fill: #DBB08E" />
  <polygon points="443,101 412,111 434,126" style="fill: #D59F7D" />
  <polygon points="443,101 434,126 475,122" style="fill: #FACC91" />
  <polygon points="412,111 380,128 402,132" style="fill: #CE8670" />
  <!-- and so on -->
</svg>

An diesem SVG ist nicht viel dran. Abgesehen davon, dass wir wissen, dass seine Erstellung schwierig war, ist die Ausgabe ziemlich einfach. Wenn Sie mit dem Polygon-Element nicht vertraut sind, können Sie hier mehr darüber lesen. Das Polygon-Element definiert eine geschlossene Form, die aus einer Reihe von verbundenen geraden Liniensegmenten besteht.

JavaScript war der einzige Weg, die Polygone zu zählen, um Finger und Zehen zu vermeiden. Wie ich bereits erwähnte, wurde GreenSock's TimelineMax verwendet, um jede Polygonform zu steuern.

Ich begann mit meiner ursprünglichen Einrichtung für TimelineMax, die einige Variablen wie die Konfiguration (tmax_options) und den Timeline-Konstruktor (TimelineMax()) umfasste.

var tmax_options = {
  delay: 0.25, // init pause time
  repeat: -1, // make it repeat
  repeatDelay: 0.25, // delay this amount on repeat
  yoyo: true // also play sequence in reverse
};

var tmax_tl = new TimelineMax(tmax_options);

Basierend auf der als Objekt-Literal dargestellten Konfiguration verzögert die Löwen-Sequenz den anfänglichen Wiedergabezustand um 0,25 Sekunden, wiederholt die Animation, verzögert die Sequenz bei der Wiedergabe um 0,25 Sekunden und setzt dann den yoyo-Wert auf true, damit die Polylion-Sequenz rückwärts animiert wird.

Setup

Für die restlichen Teile meiner Einrichtung definiere ich einige Variablen zur späteren Referenz in meinem Code.

var svg_length  = $('svg.polylion > polygon').length,
    svg_shapes  = [],
    stagger_val = 0.00475,
    duration    = 1.5;

Der einzige Weg, die Anzahl der Polygone dynamisch zu ermitteln, war mit JavaScript, und genau das verwenden wir (wir fragen alle ab und zählen dann die Länge der zurückgegebenen Menge). Die Variable svg_shapes ist nur ein leeres Array, das ich gleich im Detail erklären werde. Der Rest dient zur einfacheren Konfiguration, die festlegt, wie lange die gesamte Animationsdauer in Sekunden dauert und um wie viel die einzelnen Polygone während der Wiedergabe gestaffelt werden sollen.

Da das erste Argument von TimelineMax ein Array von Elementen sein kann, zähle ich jedes in einer Schleife und füge die Ergebnisse in das leere Array ein, das wir zuvor erstellt haben. Beachten Sie auch, dass wir jedes Polygon einzeln mit dem :nth-of-type CSS-Selektor abrufen.

for (var i = 1, l = svg_length; i <= l; i++) {
  svg_shapes.push($('svg.polylion > polygon:nth-of-type('+ i +')'));
}

Der Rest der Konfiguration sind Standardeinstellungen, aber hier passiert die Magie. Unser erstes Objekt-Literal enthält die CSS-Eigenschaften und -Werte, von denen wir möchten, dass das Objekt animiert wird, und das zweite Objekt-Literal sind die Eigenschaften, zu denen wir animieren. Was dieses Ganze wirklich zum Leben erweckt, ist die elastische Easing, die dem Stück seinen subtilen Schwung verleiht.

var stagger_opts_from = {
  css: {
    scale: 0,
    transformOrigin: 'center center',
    opacity: 0
  },
  ease: Elastic.easeInOut,
  force3D: true
};

var stagger_opts_to = {
  css: {
    scale: 1,
    opacity: 1,
  },
  ease: Elastic.easeInOut,
  force3D: true
};

Nun können wir die TimelineMax-Methode staggerFromTo an unseren TimelineMax-Konstruktor-Referenz anhängen, um dem Löwen seine Lebenskraft zu verleihen.

tmax_tl.staggerFromTo(svg_shapes, duration, stagger_opts_from, stagger_opts_to, stagger_val, 0);

Buchstäblich eine Zeile verleiht diesem Kunstwerk Leben. Das Ergebnis ist magisch!

Ja, aber das ist „CSS-Tricks“ und nicht „JS-Tricks“

Ich verstehe. Wir würden wahrscheinlich immer noch JavaScript verwenden, um die Polygone zu zählen, aber sobald wir das wissen, können wir eine Schleife mit einem Präprozessor wie Sass, LESS oder Stylus erstellen, um die Arbeit zu erledigen. Versuchen wir, die Kräfte von Sass zu nutzen, und diesen Löwen, der von Jord Riekwel (@Larkef) für das Polyon-Projekt, das ich zuvor erwähnt habe, erstellt wurde.

Hier ist ein Beispiel für die obige Polyman TimelineMax-Animation, die nur CSS für den Effekt verwendet.

@keyframes polyonlion-animation {
  to {
    transform: scale(1);
    opacity: 1;
  }
}

svg.polyonlion > g polygon {
  animation: polyonlion-animation 400ms linear 1 forwards;
  transform: scale(0);
  transform-origin: center center;
  opacity: 0;
}

Hier ist ein weiteres cooles Beispiel, das den gleichen Ansatz wie oben verwendet, aber mit anderen Transformationen der Polygone arbeitet (ein leichtes Skalieren und Rotieren).

Nachdem wir uns durch einige Überarbeitungen gearbeitet haben, hier ist das Endergebnis, das wir unten erzielt haben.

Sehen Sie den Pen Polyon SVG Lion von Dennis Gaebel (@grayghostvisuals) auf CodePen.

Um die Zahlen für meine Sass-Schleifen zu erhalten, habe ich JavaScript verwendet, um die Länge der vorhandenen Polygone zu zählen. Ich habe auch von Hand die Mähne vom Gesicht getrennt, damit wir diese Abschnitte unabhängig voneinander steuern können. Ich habe jedes Polygon-Element, das sich auf das Gesicht bezog, zusammen mit der Mähne genommen und sie in einem <g>-Tag gruppiert. Sie können sich das in der HTML-Ausgabe des Haml im obigen Pen selbst ansehen. Wie ich schon sagte, um die Länge der Polygone zu zählen, habe ich JavaScript verwendet, was so aussah…

var polygon_mane = $('svg > g#polyonlion-face polygon').length;
console.log(polygon_mane);

Jetzt, da ich die Anzahl für das Gesicht habe, kann ich dasselbe für die Mähne tun. Meine resultierenden Werte sind 26 und 76, was eine Gesamtzahl von 102 Polygonen ergibt (76 + 26 = 102).

$polyonlion-count: $polyonlion-count-mane + $polyonlion-count-face; // reports 102
$polyonlion-count-mane: 26;
$polyonlion-count-face: 76;

Wie oben beschrieben, definieren wir die Zählwerte als Variablen zur Referenz. Die nächsten Schritte sind die Definition einiger Eigenschaften für das SVG selbst und die Einrichtung des `@keyframes`-Aufrufs der Animation.

@keyframes polyonlion-animation {
  to {
    transform: scale(1);
    opacity: 1;
  }
}

svg.polyonlion {
  width: 98px;
  height: 115px;
}

Einige Dinge wie Breite und Höhe werden festgelegt und wir konfigurieren auch eine Animation, die besagt: „Gehe von den aktuell festgelegten Eigenschaften in der Deklaration zu diesen hier angegebenen Eigenschaftswerten.“

Die nächsten Schritte sind, das Objekt zunächst vollständig aus der Ansicht zu entfernen (d. h. unsichtbar zu machen). Die Transformations- und Opazitätswerte, die im folgenden Code verwendet werden, lassen die Polygone schrumpfen und verschwinden, um den Löwen unsichtbar zu machen. Wir sagen auch, dass der Ursprung der Transformationsmittelpunkt der Polygone selbst sein soll. Dies bedeutet im Wesentlichen, dass das Objekt von seiner Mitte nach außen animiert wird.

.polyonlion {
  width: 98px;
  height: 115px;

  > g polygon {
    transform: scale(0);
    transform-origin: center center;
    opacity: 0;
  }
}

Um den obigen Block abzuschließen, füge ich ein paar weitere Zeilen für ein Fallback hinzu, falls JS deaktiviert ist oder die Animations-Eigenschaft keine Unterstützung hat. Für diese Aufgabe verwende ich Modernizr und dessen Feature-Klassen, die auf dem HTML-Tag platziert werden.

.polyonlion {
  width: 98px;
  height: 115px;

  > g polygon {
    transform: scale(0);
    transform-origin: center center;
    opacity: 0;

    .no-js &,
    .no-cssanimations & {
      transform: scale(1);
      opacity: 1;
    }
  }
}

Jetzt müssen wir die Polygone für das Gesicht des Löwen leicht voneinander verzögern und dasselbe für die Mähne tun. Um beides zu tun, benötigen wir zwei Schleifen, da unsere Zählungen unterschiedlich sind (76, 26). Wir müssen auch die Animationsverzögerung mit der Anzahl der Polygone bei jeder Schleifeniteration multiplizieren, um der Animation etwas Zufälligkeit zu verleihen.

@for $i from 1 through $polyonlion-count-face {
  .polyonloaded .polyonlion > g#polyonlion-face polygon:nth-of-type(#{$i}) {
    animation: polyonlion-animation 100ms linear 1 forwards;
    animation-delay: 0.0275s * $i; // 0.0275s * 1, 0.0275s * 2, etc.
  }
}

@for $i from 1 through $polyonlion-count-mane {
  .polyonloaded .polyonlion > g#polyonlion-mane polygon:nth-of-type(#{$i}) {
    animation: polyonlion-animation 100ms linear 1 forwards;
    animation-delay: 0.0475s * $i; // 0.0475s * 1, 0.0475s * 2, etc.
  }
}

Sie haben vielleicht bemerkt, dass ich eine Klasse namens polyonloaded verwendet habe. Diese Klasse steuert das Laden der Animation und die Ausführung, sobald der DOM geladen ist. Im Wesentlichen warte ich, bis der DOM geladen ist, dann führe ich ein setTimeout für 900ms aus und füge dann eine Klasse zum Body hinzu, die meine Animationssequenz auslöst. Das alles sieht in jQuery so aus.

$(document).ready(function() {
  setTimeout(function() {
    $('body').addClass('polyonloaded');
  }, 900);
});

Abschließende Gedanken

Ich kann nicht genug betonen, wie cool SVG heutzutage ist, aber ich bin mir sicher, das wissen Sie bereits. Es ist ziemlich verrückt, wie die Messlatte in der Community oder auf Seiten wie CodePen immer höher gelegt wird, die die Möglichkeiten von SVG im Hinblick auf Animationen wirklich untersuchen. Wenn Sie etwas freie Zeit haben, schauen Sie sich unbedingt meine Sammlung auf CodePen an, wo ich meine bevorzugten SVG-Animationen gesammelt habe. Sie können sich auch die Entwickler auf CodePen ansehen, die täglich atemberaubende Bewegungen mit SVG erstellen.

Weitere Referenzen

Hier sind einige YouTube-Videos zur Erstellung von Poly-Kunst in Photoshop

• Tutorial-Photoshop-Polygon
• Low Poly Portrait Tutorial
• Low Poly Vektor Tutorial