Herstellung von CSS-Animationen, Mehr Natürliches Gefühl

0
13

Es verwendete, zu sein, die von Designern entworfen und Codierern codiert. Es war kein crossover, und das ist, wie es war. Aber mit dem Aufkommen von CSS transitions und Animationen, die sich die Linien verschwimmen ein wenig. Es ist nicht mehr so einfach wie die designer, die diktieren, das design und die coder transkribieren—Designer muss wissen jetzt etwas über code, und Programmierer müssen wissen, etwas über design, um effektiv zu arbeiten.

Als ein Beispiel, sagen wir mal, ein designer fragt einen Entwickler, um ein Feld hüpfen. Das ist es—keine zusätzliche Anweisung. Ohne einige cross-Kenntnisse und ein gemeinsames Vokabular, sind beide Seiten ein wenig verloren in dieser Mitteilung: die Entwickler haben nicht genügend Informationen, um in vollem Umfang von den designer ‘ s vision, aber die designer nicht wirklich wissen, was die Optionen sind und wie Sie kommunizieren. Mit eine sehr einfache interpretation, Sie könnten am Ende mit etwas, das aussieht wie dieses:

Finden Sie die Stift-Bouncing Box 1 von Brandon Gregory (@pulpexploder) auf CodePen.

Nicht sehr aufregend. Obwohl, um fair zu sein, diese erfüllt alle Kriterien gegeben. Wir können auf jeden Fall besser als diese, obwohl.

Das erste, was zu betrachten ist die timing Funktion. Im obigen Beispiel verwenden wir eine lineare timing-Funktion, was bedeutet, dass das Feld ist ständig in Bewegung mit der gleichen Geschwindigkeit. In einigen Fällen ist dies wünschenswert, jedoch in der realen Welt-Bewegung in der Regel nicht wie das funktioniert.

Eine einfache Lösung ist, einfach ändern Sie die timing-Funktion zu erleichtern. Dies macht den Beginn und das Ende jeder animation ein wenig langsamer als der mittlere Teil, wodurch eine mehr Natürliche Optik einige Animationen. Hier ist das Feld mit der easing-Funktion eingeschaltet:

Finden Sie die Stift-Bouncing Box 2 von Brandon Gregory (@pulpexploder) auf CodePen.

Dies ist eine leichte Verbesserung, aber es gibt noch eine Menge Arbeit zu tun. Die box sieht immer noch mechanisch und steif, mit der gleichen animation, die in der gleichen Zeitrahmen über und über. Das hinzufügen einer leichten Verzögerung zwischen prallt, fügt einige visuelle Kontrast, scheint ein wenig mehr Natur:

Finden Sie die Stift-Bouncing Box 3 von Brandon Gregory (@pulpexploder) auf CodePen.

Die box sieht jetzt aus wie Sie springen, anstatt einfach nur auf und ab bewegt. Es gibt ein wenig wind-up und cool-down zwischen den Sprüngen, die nachahmt, was ein live-Kreatur möglicherweise tun, wenn Sie die gleiche Anweisung. Wir haben zwar keine Referenz für das, was ein springen box Aussehen würde, wir alle haben eine ziemlich gute Vorstellung davon, was einen springenden Kreatur Aussehen würde. Weil wir wissen, was passieren würde, in die Natur, durch Nachahmung, dass die animation natürlicher wirkt. Aber wir können mehr tun, um die wind-up Gefühl ein wenig mehr schwer.

Wenn Sie cartoons beobachten, werden Sie feststellen, dass Natürliche Bewegungen sind oft übertrieben, erstellen eine Karikatur des wirklichen Lebens. Wenn gut gemacht, kann diese fühlen sich genauso natürlich an, wie etwas in der realen Welt, mit dem zusätzlichen bonus der Infusion ein wenig Charme und Charakter in der animation.

In diesem Stadium, die Zusammenarbeit zwischen designer und Entwickler ist entscheidend — aber viele Designer, die möglicherweise nicht einmal bewusst sein, dass diese Möglichkeiten existieren. Es kann sein, bis auf die Entwickler, um die Tonhöhe von dieser Möglichkeit der designer.

Indem Sie einige subtile Verzerrung der Skala der box, können wir noch eine Menge auf die animation:

Finden Sie die Stift-Bouncing Box 4 von Brandon Gregory (@pulpexploder) auf CodePen.

Nun, die Kiste hat Charakter. Es fühlt sich lebendig. Es gibt viele Dinge zu optimieren, aber das bewegt sich schon viel, viel weiter als die original Anleitung in einem sehr guten Weg!

Wir gehen einen Schritt weiter und fügen Sie ein wenig Zugstufe am Ende des Sprungs:

Finden Sie die Stift-Bouncing Box 5 von Brandon Gregory (@pulpexploder) auf CodePen.

Der zweite Schlag wird die Herstellung dieses lebendig fühlen, aber etwas scheint noch immer aus. Die bounce-sieht steif aus im Vergleich zum rest der animation. Wir müssen hinzufügen, ein bisschen Verzerrung, wie wir es für die wind-up:

Finden Sie die Stift-Bouncing Box 6 von Brandon Gregory (@pulpexploder) auf CodePen.

Diese subtile Verzerrung am Ende macht der rebound scheint viel natürlicher. Insgesamt eine enorme Verbesserung aus unserer basic linear bounce im ersten Beispiel.

Dieses Recht besteht möglicherweise genau das, was wir suchen, aber weitere Optimierungen um die Geschwindigkeit der Bewegung kann mit einer custom-kubische Bézier-Kurve:

Finden Sie die Stift-Bouncing Box 7 von Brandon Gregory (@pulpexploder) auf CodePen.

Ohne den designer und die Entwickler sich der grundlegenden animation Prinzipien und steuert auf dieser Ebene der Anpassung ist unmöglich. Wirklich, dieser Artikel nur Kratzer die Oberfläche der beiden Felder. Wenn Sie ein web-designer oder web-Entwickler, arbeitet mit Designern, würde ich Ihnen dringend, zu Lesen, auf beide.

Für die animation Prinzipien, Die Illusion of Life: Disney Animation von Ollie Johnston und Frank Thomas ist eine gute Grundierung auf how zu machen, dass eine Karikatur des wirklichen Lebens scheinen lebendig und real. Mit dieser gemeinsamen Sprache im Ort, die Kommunikation und die Zusammenarbeit zwischen Designern und Entwicklern wird viel einfacher.

Für die technischen Kontrollen und die Variationen der CSS-animation, die Möglichkeiten sind nahezu endlos. Verzögerung und timing sind einfach zu justieren. Wie bereits erwähnt, wenn Sie nicht wie die out-of-the-box-einfache timing-Funktion, es ist sehr möglich, erstellen Sie Ihre eigenen mit ein cubic-bezier(). Sie können auch den Pegel der Verzerrung Sie wollen, um die animation näher an oder weiter von der Realität. Das wichtigste ist, dass sowohl die designer und Entwickler denken über diese Variationen, anstatt blind alles ohne Anpassung. Gemeinsames wissen und Zusammenarbeit können sogar einfache Animationen in großen.

Mehr Ressourcen

  • 12 grundlegende Prinzipien der animation – Wikipedia Beitrag skizziert die Konzepte, die in Der Illusion des Lebens.
  • Die Anleitung zu CSS Animation: Prinzipien und Beispiele – Smashing Magazine Artikel bietet eine umfassende Anleitung für CSS-Animationen.
  • Animation-Design-Systeme – 24 Ways Artikel von Sarah Drasner
  • Animation-Eigenschaft – CSS-Tricks Almanach Eintrag Deckung der Eigenschaft und Ihrer Werte
  • Transition-Eigenschaft – CSS-Tricks Almanach Eintrag Deckung der Eigenschaft und Ihrer Werte
  • CubicBezier.com – Ressource zu erstellen, benutzerdefinierte animation von Kurven mit einer Benutzeroberfläche.