Share
We hebben complete handleidingen samengesteld om je te helpen CSS en geanimeerde css te leren, of je nu net begint met de basis of als je meer geavanceerde technieken wilt verkennen.
Beweging is de afgelopen jaren een heel belangrijk onderdeel van het webontwerp geworden. Beweging en animatie voegen dimensielijnen toe aan een interface, helpen de gebruiker, bieden feedback, verheugen zich en doen mee.
In dit artikel bespreek ik de stappen die nodig zijn bij het leren van animatie voor het web, waar het allemaal om gaat, maar eenvoudige overgangen, complexere animaties en nuttige bronnen. Er zullen enkele praktische, interactieve oefeningen zijn om punten naar huis te boren. Aan het eind heb je een goed idee van het huidige landschap van webanimaties en hoe je er grip op kunt krijgen.
We zullen kijken naar het volgende:
De webontwerpdiscipline verandert voortdurend en een aspect dat de laatste jaren naar voren is gekomen, is het vermogen om te animeren. Browsers zijn beter in staat geworden, processors sneller en handheld-apparaten hebben de weg geëffend voor "gebaren"; vegen, knijpen en kracht aanraken.
Motion biedt interfaces een aantal dingen die de gebruikerservaring verbeteren, waaronder:
Beweging verbetert de gebruikerservaring en brengt leven op het web. Met dit alles in gedachten is het belangrijk dat je als interface-ontwerper rekening houdt met animatie. Laten we beginnen met de basis!
Of spring meteen in met de praktische animatietraining van Craig Campbell!
CSS-overgangen zijn vaak de poort van een webontwerper naar de wereld van beweging. Ze geven de browser de opdracht om een beginstatus van een element, vervolgens een eindstatus te nemen en soepel tussen de twee te schakelen. De syntaxis is relatief direct, bestaande uit vier eigenschappen en een verkorte versie:
Accentsconagua
transitie-objectenovergang durationtransitie-timing-functietransitie-delayLaten we beginnen met een knop. In dit voorbeeld hebben we een knop met een aantal basisstijlen om het een beetje op te laten lijken vanaf de pagina. Als je er standaard boven zweeft, verandert het van kleur. Als u daarop klikt, lijkt deze naar beneden te worden gedrukt. We hebben dit gedaan met behulp van de achtergrond, de plaatsinformatiesignaal top, en de -Positie gelaten eigenschappen, maar de wijziging in elk geval is onmiddellijk:
Laten we nu het effect subtieler maken door er een toe te voegen overgang naar de .knop element. Toevoegen, bijvoorbeeld, overgang: alle 1s; zal ervoor zorgen dat allemaal wijzigingen in eigenschappen worden soepel overgezet in de loop van 1 seconde.
Onthoud de eerste regel in het CSS-venster en je ziet dat het van kracht wordt:
Nu je dat werk hebt gezien, probeer in plaats hiervan de tweede regel ongedaan te maken. In het tweede voorbeeld hebben we elk van de veranderende eigenschappen afzonderlijk opgesomd, zodat we verschillende overgangsniveaus voor elke kunnen definiëren.
Probeer ten slotte het derde voorbeeld niet goed te bekijken, waar u ziet dat we het hebben toegevoegd timing functies te. Deze hebben invloed op de transitiesnelheid - we zullen er binnenkort meer over praten.
Met CSS-overgangen onder uw riem, is het tijd om de zaken een tandje bij te zetten. CSS-sleutelframe-animatie geeft veel meer controle, waardoor u wijzigingen kunt opgeven langs een tijdlijn. Er zijn twee stappen nodig voor sleutelframe-animatie; zelf de keyframes definiëren en de animatie toewijzen aan uw voorkeurselement.
Laten we zeggen dat we met een bal beginnen.
Nu kunnen we enkele keyframes definiëren, een instellen van staat en a naar staat. Hier zeggen we dat het links positie-eigenschap begint bij 5%, met een animatie tot 85%, waardoor de bal effectief over het scherm wordt bewogen.
@keyframes verplaatsen van links: 5%; tot links: 85%;
U kunt zien dat we de. Hebben genest van en naar binnen een @keyframes verklaring. En we hebben onze animatie genoemd verhuizing. Nu moeten we deze animatie aan onze bal toewijzen, wat we wel zo leuk vinden:
.bal animatie: 1s beweging;
Dit wordt geïmplementeerd in zijn meest eenvoudige, steno-vorm. We moeten definiëren hoe lang we willen dat de animatie duurt en welke animatie we toepassen. Wanneer we nu de demo laden, ziet u de animatie van kracht worden:
Notitie: de animatie begint bij het laden van de pagina, dus je moet op de herhaling knop in de hoek van deze ingesloten pen om alles te zien gebeuren.
Verder gaan dan eenvoudig van en naar fasen, kunnen we punten definiëren langs de tijdlijn met behulp van percentages. Het gebruik van 0% en 100% geeft ons exact hetzelfde resultaat als voorheen:
@keyframes verplaatsen 0% links: 5%; 100% links: 85%;
Laten we een extra stap in het midden toevoegen en de bal terugbrengen naar de beginpositie. We zullen ook de animatie-iteratie tellen oneindig, dus het blijft lussen. Bewerk de waarden in de onderstaande pen en zie ze van kracht worden:
Het is mogelijk om meerdere animaties toe te voegen aan één element, de richting van de animatie te wijzigen en de timing volledig te wijzigen. Bekijk deze bronnen voor meer informatie!
Beweging brengt statische objecten tot leven, en het verschil authentiek beweging kan dit enorm maken. Beweging geeft een objectmassa, plaatst deze in de ruimte en er is plotseling een toepassing van de natuurkunde op van toepassing. Als een object beweegt op een manier die we kennen, zullen we veel meer geneigd zijn om die allerbelangrijkste emotionele connectie te maken. Het is het verschil tussen een cirkel die op en neer beweegt en een bal die stuitert:
Het verschil tussen deze twee is duidelijk (hoewel de bounce verre van perfect is). Leren hoe je je animatie authenticiteit kunt geven, is cruciaal.
"De meeste natuurlijke actie heeft de neiging om een gebogen traject te volgen, en animatie moet zich aan dit principe houden door impliciete 'bogen' te volgen voor meer realisme." - Twaalf basisprincipes van animatie
We hebben al een paar keer 'versoepeling' behandeld in dit artikel; het is de snelheid waarmee iets beweegt en kan worden uitgedrukt als een curve langs twee assen. In CSS zijn er een paar ingebouwde timingfuncties die u kunt gebruiken met hun sleutelwoorden (lineair, gemak-in, gemak-in-out enz.) maar u kunt deze tijdstippen nauwkeuriger beschrijven met een kubieke bezier-functie, welke er zo uitziet:
.1, 0,25, .1,1Naarmate de tijd voortschrijdt langs de x-as, versnelt de bewegingssnelheid en vertraagt deze langs de y-as. Dit bovenstaande voorbeeld wordt gebruikt op onze stuiterende bal van vroeger; je kunt je voorstellen dat de bal snel omhoog beweegt en dan langzamer gaat als hij zijn top bereikt. Bekijk deze curve op cubic-bezier.com om u te helpen het te visualiseren.
De curve wordt bepaald door de twee handvatten (waarmee u bekend bent als u ooit het pengereedschap in Adobe Illustrator of Sketch hebt gebruikt) en de kubieke bezier-functie die we in CSS kunnen gebruiken, weerspiegelt die handvatten. Onze functie ziet er dus als volgt uit:
kubieke Bezier (0,1, 0,25, .1,1)
Er zijn vier waarden, die allemaal variëren (terwille van het argument) van 0 tot 1. Zij vertegenwoordigen:
Als u begrijpt hoe de bezier-functies werken, worden uw animaties aanzienlijk verbeterd, vooral als u mikt authentiek beweging.
Het coderen van goed uitziende CSS-animaties met de hand kan moeilijk zijn, maar er zijn een aantal bibliotheken beschikbaar die het zware werk voor je doen. Animate.css, door Dan Eden, is een stylesheet gevuld met keyframe-gebaseerde animaties, allemaal met aangepaste klassenamen, klaar voor gebruik.
SVG (Scalable Vector Graphics) is de afgelopen jaren de beste vriend van webdesigners geworden, waardoor we heldere afbeeldingen, lichtere pagina's en animeerbare elementen hebben. Sommige van wat we hebben besproken, kunnen direct op SVG-elementen worden toegepast, maar veel eigenschappen gedragen zich anders.
Hier is een inline SVG met een overgang toegepast op de kleur bij zweven. U zult echter merken dat we de gebruiken vullen eigendom, niet het Achtergrond kleur wat we zouden verwachten met een HTML-element:
SVG kan worden geanimeerd met CSS, ongeveer zoals we in de rest van dit artikel hebben besproken. Als u het kunt transformeren of vertalen met HTML, kunt u hetzelfde doen met SVG.
Maar SVG kan ook worden gemanipuleerd via SMIL (Synchronized Multimedia Integration Language) waarmee u dingen zoals de. Kunt gebruiken
Dit is een cirkel met daarin een cx coördineren in dit geval), van een positie van 50px tot 400px, duur van 2 seconden, en voor onbepaalde tijd herhalen.
SMIL is een zeer krachtige set hulpmiddelen, begin hieronder te lezen!
Houd van het idee om SVG te animeren, maar weet het niet zeker wat animeren? Bekijk de vectorillustratieservices op Envato Studio en zie wat wordt aangeboden!
Tekens, elementen en objecten klaar voor video-animatieVeel front-end ontwikkelaars spelen eerst met JavaScript (of jQuery) door animaties toe te voegen aan webpagina's. Waar browserondersteuning voor CSS-alternatieven vaag is, is JS een goede gok.
jQuery's UI-bibliotheek wordt geleverd met een aantal standaard UI-helpers, waaronder de effect() methode, hieronder gedemonstreerd (kies een effect uit de vervolgkeuzelijst en kijk hoe het wordt toegepast op de inhoud:
Verderop kan JavaScript (in de juiste handen, niet de mijne) aanbieden ernstig animatie, en sinds Adobe Flash officieel zijn ontslag heeft ingediend, zijn enkele briljante JavaScript-bibliotheken ontstaan. Het Animation Platform (GSAP) van GreenSock is misschien wel de krachtigste ontwikkelaar met een hele reeks tijdlijn- en tween-gebaseerde tools.
Bekijk onze beginnerscursus en zie hoe het met GSAP gaat!
Voorbij zijn de dagen dat ontwerpen van statische ontwerpen voldoende zijn - afbeeldingen en stroomdiagrammen communiceren niet genoeg informatie. Tegenwoordig willen sluwe klanten zien en voelen wat je ontwerpt, de beweging ervaren, daarom beantwoorden prototypen veel meer vragen.
"Als een foto 1000 woorden waard is, is een prototype 1000 vergaderingen waard." -zeggen op @ideo
- John Maeda (@johnmaeda) 5 oktober 2014
Prototypen kunnen behoorlijk rauw zijn, of het eindproduct vrij nauwkeurig weerspiegelen, maar waar ze ook vallen op deze schaal, ze moeten efficiënt zijn. Wat beweging en animatie betreft, zijn er een aantal toepassingen die u helpen uw ontwerpen te communiceren.
Adobe Animate is Flash voor de volgende generatie en biedt geavanceerde animatiegereedschappen. Adobe After Effects is een hulpprogramma voor videoproductie, maar biedt ook geavanceerde op tijdlijnen gebaseerde beweging. Maar dan zijn er ook eenvoudiger applicaties, zoals Principle voor Mac en zelfs Keynote:
Keynote Motion Graphic Experiment, door Linda DongZodra bewegingsontwerp onderdeel is geworden van wat u doet, is het vinden van de beste hulpmiddelen om de wereld te laten zien een belangrijke stap!
En daar hebben we het! Deze gids zou u een goed begrip van het landschap van webanimaties moeten geven zoals het nu bestaat. Met al deze leermiddelen onder je, ben je gewapend met een hele nieuwe reeks vaardigheden om de wereld van het bewegingsontwerp te verkennen.
Ik hoop dat je het nuttig hebt gevonden. Deel uw eigen tips en bronnen in de onderstaande opmerkingen of op het Envato-communityforum.
