Früher war es so, dass Designer designt und Coder codiert haben. Es gab keine Überschneidungen, und das war so üblich. Aber mit dem Aufkommen von CSS Transitions und Animations verschwimmen diese Grenzen ein wenig. Es ist nicht mehr so einfach, dass der Designer das Design diktiert und der Coder es transkribiert – Designer müssen jetzt etwas über Code wissen und Coder müssen etwas über Design wissen, um effektiv zusammenarbeiten zu können.
Als Beispiel nehmen wir an, ein Designer bittet einen Entwickler, eine Box hüpfen zu lassen. Das ist alles – keine zusätzlichen Anweisungen. Ohne etwas cross-know-how und ein gemeinsames Vokabular sind beide Seiten in dieser Kommunikation etwas verloren: Der Entwickler hat nicht genügend Informationen, um die Vision des Designers vollständig zu realisieren, aber der Designer weiß nicht wirklich, welche Optionen es gibt und wie er sie kommunizieren soll. Mit einer sehr einfachen Interpretation könnte das Ergebnis so aussehen:
Siehe den Pen Bouncing Box 1 von Brandon Gregory (@pulpexploder) auf CodePen.
Nicht sehr aufregend. Obwohl, um fair zu sein, dies alle gegebenen Kriterien erfüllt. Wir können es aber definitiv besser machen.
Das Erste, was wir uns ansehen sollten, ist die Timing-Funktion. Im obigen Beispiel verwenden wir eine lineare Timing-Funktion, was bedeutet, dass sich die Box konstant mit der gleichen Geschwindigkeit bewegt. In einigen Fällen ist dies wünschenswert; in der realen Welt funktioniert Bewegung jedoch normalerweise nicht so.
Eine einfache Lösung ist, die Timing-Funktion einfach auf „ease“ zu ändern. Dies verlangsamt den Anfang und das Ende jeder Animation ein wenig mehr als der mittlere Teil, was einigen Animationen ein natürlicheres Aussehen verleiht. Hier ist die Box mit aktivierter Easing-Funktion:
Siehe den Pen Bouncing Box 2 von Brandon Gregory (@pulpexploder) auf CodePen.
Dies ist eine leichte Verbesserung, aber es gibt noch viel zu tun. Die Box sieht immer noch mechanisch und steif aus, wobei die gleiche Animation immer wieder im gleichen Zeitrahmen stattfindet. Ein leichtes Verzögern zwischen den Sprüngen sorgt für einen visuellen Kontrast, der etwas natürlicher wirkt.
Siehe den Pen Bouncing Box 3 von Brandon Gregory (@pulpexploder) auf CodePen.
Die Box sieht jetzt aus, als würde sie springen und nicht einfach auf und ab gehen. Zwischen den Sprüngen gibt es ein leichtes „Anziehen“ und „Abbremsen“, das nachahmt, was ein lebendes Wesen tun würde, wenn es die gleiche Anweisung erhielte. Auch wenn wir keine Referenz dafür haben, wie eine springende Box aussehen würde, haben wir doch alle eine ziemlich gute Vorstellung davon, wie ein springendes Wesen aussehen würde. Da wir wissen, was in der Natur passieren würde, wirkt die Animation natürlicher, indem wir das nachahmen. Aber wir können noch mehr tun, um dieses „Anziehen“ etwas gewichtiger zu gestalten.
Wenn Sie Zeichentrickfilme ansehen, werden Sie feststellen, dass natürliche Bewegungen oft übertrieben werden, wodurch eine Karikatur des echten Lebens entsteht. Wenn dies gut gemacht ist, kann es genauso natürlich wirken wie etwas in der realen Welt, mit dem zusätzlichen Bonus, der Animation etwas Charme und Charakter zu verleihen.
In diesem Stadium ist die Zusammenarbeit zwischen Designer und Entwickler entscheidend – aber viele Designer sind sich vielleicht nicht einmal bewusst, dass diese Optionen existieren. Es kann am Entwickler liegen, diese Möglichkeit dem Designer vorzuschlagen.
Durch das Hinzufügen einer leichten Verzerrung der Skalierung der Box können wir der Animation viel hinzufügen.
Siehe den Pen Bouncing Box 4 von Brandon Gregory (@pulpexploder) auf CodePen.
Jetzt hat die Box Charakter. Sie fühlt sich lebendig an. Es gibt viele Dinge, die man anpassen kann, aber dies ist bereits weit mehr als die ursprüngliche Anweisung – und das auf sehr gute Weise!
Wir werden noch einen Schritt weiter gehen und am Ende des Sprungs einen kleinen Abpraller hinzufügen.
Siehe den Pen Bouncing Box 5 von Brandon Gregory (@pulpexploder) auf CodePen.
Der zweite Sprung lässt das Ganze lebendiger wirken, aber etwas scheint immer noch nicht zu stimmen. Der Sprung wirkt steif im Vergleich zum Rest der Animation. Wir müssen noch eine weitere Verzerrung hinzufügen, wie wir es für das Anziehen getan haben.
Siehe den Pen Bouncing Box 6 von Brandon Gregory (@pulpexploder) auf CodePen.
Diese subtile Verzerrung am Ende lässt den Abpraller viel natürlicher wirken. Insgesamt eine riesige Verbesserung gegenüber unserem einfachen linearen Hüpfen im ersten Beispiel.
Das mag genau das sein, wonach wir suchen, aber weitere Anpassungen der Bewegungsgeschwindigkeit können mit einer benutzerdefinierten kubischen Bézier-Kurve vorgenommen werden.
Siehe den Pen Bouncing Box 7 von Brandon Gregory (@pulpexploder) auf CodePen.
Ohne dass sowohl Designer als auch Entwickler die grundlegenden Animationsprinzipien und -steuerungen kennen, ist dieses Maß an Anpassung unmöglich. Dieser Artikel kratzt wirklich nur an der Oberfläche beider Bereiche. Wenn Sie Webdesigner oder Webentwickler sind, der mit Designern zusammenarbeitet, möchte ich Sie dringend bitten, sich über beide Bereiche zu informieren.
Für Animationsprinzipien ist „The Illusion of Life: Disney Animation“ von Ollie Johnston und Frank Thomas ein großartiger Einstieg, um zu erfahren, wie man diese Karikatur des echten Lebens lebendig und echt wirken lässt. Mit dieser gemeinsamen Sprache wird die Kommunikation und Zusammenarbeit zwischen Designern und Entwicklern viel einfacher.
Für die technischen Steuerungen und Variationen von CSS-Animationen sind die Möglichkeiten nahezu endlos. Verzögerung und Timing lassen sich einfach anpassen. Wie bereits erwähnt, wenn Ihnen die Standard-Easing-Timing-Funktion nicht gefällt, ist es sehr gut möglich, Ihre eigene mit einer cubic-bezier() zu erstellen. Sie können auch den Grad der Verzerrung anpassen, um die Animation näher an die Realität oder weiter davon weg zu bringen. Wichtig ist, dass sowohl der Designer als auch der Entwickler über diese Variationen nachdenken, anstatt alles blindlings ohne Anpassung zu übernehmen. Gemeinsames Wissen und Zusammenarbeit können selbst einfache Animationen zu großartigen machen.
Weitere Ressourcen
- 12 grundlegende Animationsprinzipien – Wikipedia-Beitrag, der die in „The Illusion of Life“ vorgestellten Konzepte umreißt.
- Der Leitfaden für CSS-Animationen: Prinzipien und Beispiele – Smashing Magazine-Artikel mit einem umfassenden Leitfaden zu CSS-Animationen.
- Animation in Design Systems – 24 Ways Artikel von Sarah Drasner
- Animation property – CSS-Tricks Almanach-Eintrag, der die Eigenschaft und ihre Werte behandelt.
- Transition property – CSS-Tricks Almanach-Eintrag, der die Eigenschaft und ihre Werte behandelt.
- CubicBezier.com – Ressource zur Erstellung benutzerdefinierter Animationskurven mit einer Benutzeroberfläche.
Dies ist ein wichtiges Thema und ich bin froh, dass Leute wie Sie darüber schreiben. Aber als Coder und Designer bin ich mit dem Endergebnis nicht zufrieden. Es fühlt sich immer noch nicht wie eine natürliche Bewegung an, man muss die Timing-Funktion immer noch improvisieren. Als Teil einer 100-Tage-CSS-Challenge habe ich eine ähnliche hüpfende Box erstellt, die Sie hier ansehen können: https://codepen.io/roydigerhund/pen/jqJvWK
Dein Beispiel sieht großartig aus.
Heilige s**t! Dein Beispiel ist fantastisch!
Matze, das ist fantastisch!
Fantastischer Artikel. Etwas, worauf ich mich schon lange spezialisieren wollte, also danke, dass Sie es geschrieben haben!
Großartig! Danke fürs Kommentieren!
Lebewesen sind quetschbar. Daher möchte ich beim Springen der Box etwas Oblateness hinzufügen. Die relevanten Keyframes sind:
Schön! Hier ist der Pen, den ich zur Vorschau erstellt habe:
Das Einzige, was sich hierbei noch unnatürlich anfühlt, ist, dass die Abwärtsbewegung der Box kurz vor dem Erreichen des Bodens langsamer wird. Für ein echtes „Hüpfen“ sollte die Geschwindigkeit der Box am Ende des Falls am größten sein. Ansonsten ist es, als würde sie die „Luftbremsen“ betätigen.
Ja, ich stimme zu. Dieser Verlangsamungseffekt nervt wirklich.
Ehrlich gesagt würde ich die Landung einfach zu einem Spiegelbild des Sprungs machen, d. h. die Box gegen den Boden quetschen, anstatt davon abzuprallen. Ein Abprallen bei der Landung würde bedeuten, dass die Box starr ist, während das Springen genau das Gegenteil impliziert.
Das ist zwar ein wenig vom Thema ab, aber ich versuche, einen Flip-Effekt für ein Memory-Spiel zu erstellen, bei dem die Karten nach dem Umdrehen einige Sekunden an Ort und Stelle bleiben, damit das Kind sie sich einprägen kann, bevor sie sich zurückdrehen. Ich habe versucht, „ease-in-out“ mit unterschiedlichen Zeiten zu verwenden, und sie dreht sich immer noch zu schnell zurück. Kann ich eine Pause hinzufügen?
Die Timing-Funktion ist „ease-in-out“ . . . vielleicht ist das das Problem? Immer die Kleinigkeiten . . . :-)
Richard, dafür wäre es wahrscheinlich am besten, eine Keyframe-Animation zu verwenden und nicht eine Timing-Funktion, egal ob benutzerdefiniert oder nicht. So etwas wie dies:
@keyframes cardFlip
{
0% { [Basisstatus] }
10% { [umgedrehter Status] }
90% { [umgedrehter Status] }
100% { [Basisstatus] }
}
Das ist natürlich kein produktionsreifer Code, aber er sollte Sie hoffentlich auf den richtigen Weg bringen.
Obwohl es möglich sein mag, komplexe Animationen rein über CSS zu realisieren, lohnt es sich oft nicht, einen reinen CSS-Weg zu gehen. Es ist besser, eine JS-Animations-Engine wie GSAP zu verwenden.
JS-Animations-Engines bieten eine viel feinere Kontrolle über die Animation und sind immer noch sehr performant.
Dies ist eine Website, die ich kürzlich erstellt habe und die einige ziemlich coole GSAP-gestützte Animationen enthält:
http://annualreport.communications.gov.au/2017
Diese ältere habe ich nur mit CSS erstellt, um die Animationen auszuführen (abgesehen von etwas JavaScript zum Hinzufügen und Entfernen von Klassen), sie war jedoch ein absoluter Albtraum zu erstellen.
http://annualreport.communications.gov.au/2014
(Muss auf dem Desktop angezeigt werden, um die Animationen zu sehen)
Für einfache Animationen nehmen Sie CSS. Für komplexe Animationen ist GSAP viel besser. Sie müssen jedoch immer noch grundlegende Animationskonzepte wie Squash und Stretch verstehen, um gut aussehende Animationen zu erstellen.
Ich würde immer zuerst mit CSS-Animationen beginnen und nur, wenn es nicht möglich ist, es mit JS animieren. CSS wird besser performen als eine ähnliche JS-Animation.
@Matze nicht unbedingt, JS-Animationen können unter Umständen sogar eine bessere Leistung als CSS haben.
GSAP hat einen Artikel geschrieben, in dem CSS und JS gegeneinander ausgespielt wurden. (Zugegebenermaßen wird GSAP voreingenommen sein, aber es wirkt objektiv und ehrlich.)
https://greensock.com/transitions
Für einfache Übergänge zwischen zwei Zuständen verwenden Sie CSS.
Wenn es sich um eine mäßig komplexe Animation handelt und sie nur einmalig auftritt, versuchen Sie es mit CSS.
Wenn es sich um eine unglaublich komplexe Animation handelt oder Ihre Website überall mäßig komplexe Animationen aufweist. Gehen Sie direkt zur JS-Lösung.
Khan Academy bietet kostenlose Kurse von Pixar an, die sich mit Animation und Bewegung befassen.
Perfekt!!
leicht zu lesen und sehr hilfreich, danke :D
Wenn wir die Schwerkraft simulieren wollen, sollte die Box langsamer werden, wenn sie den höchsten Punkt erreicht, und dann beschleunigen, wenn sie wieder nach unten geht. Ich denke, der beste Weg, die Schwerkraft zu simulieren, ist, die Animation umzukehren, sodass Zeit 0 % und 100 % den höchsten Punkt darstellen. Mit Ease-in-out wird sie oben am langsamsten und unten am schnellsten sein. Probieren Sie es mit Keyframes wie den folgenden:
Schöner Artikel! Danke! Habe kürzlich herausgefunden, dass man auch viel mit der animation-timing-function in den Keyframes spielen kann, um etwas Ähnliches wie in After Effects zu erhalten: https://codepen.io/boasthin/full/BJMWLq/