Het maken van CSS-Animaties Voelen zich Meer Natuurlijke

0
94

Het wordt gebruikt om dat ontwerpers ontworpen en codeurs gecodeerd. Er was geen crossover, en dat is de manier waarop het was. Maar met de komst van CSS transities en animaties, die lijnen vervagen een beetje. Het is niet meer zo eenvoudig als de ontwerper het dicteren van het ontwerp en de coder transcriberen—ontwerpers nu moet je iets weten over de code, en de codeurs moeten iets weten over design, om effectief samen te werken.

Als voorbeeld, laten we zeggen dat een ontwerper vraagt een ontwikkelaar om een vak te stuiteren. Dat is het—geen extra instructie. Zonder een aantal cross-kennis en een gemeenschappelijke woordenlijst, beide kanten zijn een beetje verloren in deze mededeling: de ontwikkelaar niet genoeg informatie om volledig realiseren van de ontwerper zien, maar de ontwerper weet niet echt wat de opties zijn en hoe te communiceren. Met een zeer eenvoudige interpretatie, je zou kunnen eindigen met iets dat eruit ziet als dit:

Zie de Pen Stuiteren Box 1 van Brandon Gregory (@pulpexploder) op CodePen.

Niet erg spannend. Hoewel, om eerlijk te zijn, deze niet voldoet aan alle criteria. Kunnen We zeker beter doen dan deze, dat wel.

Het eerste ding om naar te kijken is de timing functie. In het bovenstaande voorbeeld gebruiken we een lineaire timing functie, wat betekent dat het vak is voortdurend in beweging op dezelfde snelheid. In sommige gevallen is dit wenselijk, maar in de echte wereld, motion meestal werkt het niet.

Een makkelijke oplossing is om gewoon de timing functie te verlichten. Dit maakt het begin en einde van elke animatie een beetje trager dan het middelste deel, die voegt een meer natuurlijke uitstraling van een aantal animaties. Hier is de doos met de versoepeling van de functie is ingeschakeld:

Zie de Pen Stuiteren Vak 2 door Brandon Gregory (@pulpexploder) op CodePen.

Dit is een lichte verbetering, maar er is nog veel werk te doen. De box ziet er nog steeds mechanische en stijf, met dezelfde animatie die zich in dezelfde periode over en voorbij. Het toevoegen van een kleine vertraging tussen stuitert voegt een aantal visuele contrast dat lijkt een beetje meer natuurlijk:

Zie de Pen Stuiteren Box 3 door Brandon Gregory (@pulpexploder) op CodePen.

Het venster ziet er nu uit alsof het springen in plaats van simpelweg op en neer bewegen. Er is een beetje wind-up en cool-down tussen de sprongen die bootst wat een levend wezen zou kunnen doen als ze de dezelfde instructie. Ook al hebben we geen referentie voor wat een vak springen eruit zou zien, we hebben allemaal een vrij goed idee van wat een jumping schepsel eruit zou zien. Omdat we weten wat er zou gebeuren in de natuur, door het nabootsen van de animatie voelt veel natuurlijker. Maar we kunnen meer doen om te maken dat wind-up voel me een beetje meer zwaar.

Als je van tekenfilms kijken, zult u merken dat het de natuurlijke bewegingen zijn vaak overdreven, het maken van een karikatuur van het echte leven. Wanneer het goed gedaan, dit voelt net zo natuurlijk als iets in de echte wereld, met de toegevoegde bonus van het inbrengen van een klein beetje charme en karakter in de animatie.

In dit stadium, is de samenwerking tussen de ontwerper en de ontwikkelaar is cruciaal — maar veel ontwerpers kunnen niet eens van bewust dat deze opties bestaan. Het kan zijn dat de ontwikkelaar om de toonhoogte van deze mogelijkheid om de ontwerper.

Door het toevoegen van een aantal subtiele vervorming van de schaal van het vak, kunnen we veel toe te voegen aan de animatie:

Zie de Pen Stuiteren Vak 4 van Brandon Gregory (@pulpexploder) op CodePen.

Nu, de doos heeft karakter. Het voelt leven. Er zijn veel dingen te tweaken, maar dit is al de bewegende veel verder dan de oorspronkelijke instructie — in een heel goede manier!

We gaan een stap verder te gaan en het toevoegen van een kleine opleving aan het einde van de sprong:

Zie de Pen Stuiteren Vak 5 van Brandon Gregory (@pulpexploder) op CodePen.

De tweede bounce is waardoor deze zich meer in leven, maar iets lijkt nog steeds uit. De bounce ziet er stijf in vergelijking met de rest van de animatie. We moeten nog een beetje van vervorming zoals we dat deden voor de wind-up:

Zie de Pen Stuiteren Vak 6 van Brandon Gregory (@pulpexploder) op CodePen.

Dat subtiele vervorming aan het einde maakt de rebound lijken veel meer natuurlijk. Kortom, een enorme verbetering ten opzichte van onze elementaire lineaire stuiteren in het eerste voorbeeld.

Dat recht er kan precies wat we zoeken, maar verdere aanpassingen om de snelheid van de beweging kan worden gemaakt met een aangepaste cubic Bézier-curve:

Zie de Pen Stuiteren Vak 7 van Brandon Gregory (@pulpexploder) op CodePen.

Zonder de designer en de ontwikkelaar hoogte te zijn van de animatie principes en controles, dit niveau van maatwerk is onmogelijk. Echt, dit artikel alleen krassen op het oppervlak van beide velden. Als je een web-designer en web ontwikkelaar die werkt met designers, zou ik dring er bij u om te lezen.

Voor animatie principes, De Illusie van het Leven: Disney Animatie door Ollie Johnston en Frank Thomas is een geweldige primer over hoe om die karikatuur van het echte leven lijken levend en echt. Met die gemeenschappelijke taal in plaats van de communicatie en samenwerking tussen ontwerpers en ontwikkelaars veel eenvoudiger wordt.

Voor de technische controles en variaties van CSS animatie, de mogelijkheden zijn bijna eindeloos. Vertraging en timing zijn eenvoudig aan te passen. Zoals gezegd, als je niet van de out-of-the-box gemak de functie van de timing, het is heel goed mogelijk om uw eigen maken met behulp van een kubieke-bezier(). U kunt ook de mate van vervorming die u wilt om de animatie dichter of verder van de werkelijkheid. Het belangrijkste is dat zowel de ontwerper en de ontwikkelaar denkt over deze variaties op de plaats van blindelings alles zonder aanpassingen. Kennis te delen en samenwerking kunnen zelfs eenvoudige animaties in groten.

Meer Middelen

  • 12 basisprincipes van animatie – Wikipedia post een uiteenzetting van de begrippen geïntroduceerd in De Illusie van het Leven.
  • De Gids voor CSS-Animaties: Principes en Voorbeelden – Smashing Magazine artikel biedt een uitgebreide gids voor CSS-animaties.
  • Animatie in het Ontwerp-Systemen – 24 Manieren artikel door Sarah Drasner
  • Animatie eigendom – CSS-Tricks almanak vermelding dekking van de goederen en de waarden
  • Overgang van eigendom – CSS-Tricks almanak vermelding dekking van de goederen en de waarden
  • CubicBezier.com – Bron voor het maken van aangepaste animatie bochten met een user interface.