Accentsconagua
Donovan Hutchinson
Donovan is een in Dublin gevestigde front-end ontwikkelaar met een passie voor CSS, animatie en het maken van het web leuk.
Share
Wat je gaat creërenWanneer we het hebben over het gebruik van animatie, bespreken we vaak de praktische manieren waarop we overgangen, animaties, enzovoort kunnen maken. Animatie is een krachtige manier om onze ontwerpen te laten opvallen, maar in plaats van te focussen op hoe individuele animaties werken, kan de manier waarop meerdere animaties combineren iets krachtiger maken.
Disney's 12 basisprincipes van animatie definieert "Appeal" als corresponderend met "charisma in een acteur". Het is hoe het realisme, de stijl en de inhoud van een animatie samenkomen om een gevoel voor karakter te creëren dat kijkers echt en interessant vinden.
The Illusion of Life: Disney Animation waarin de 12 basisprincipes van animatie zijn vastgelegdHet is een techniek die door Stripe met groot effect wordt gebruikt. Stripe is een betalingsprocessor en biedt hulpmiddelen voor het insluiten van betalingsformulieren in sites. Deze vormen staan erom bekend dat ze prachtig zijn ontworpen, met name het gebruik van animatie.
In dit artikel zal ik bespreken hoe meerdere animaties kunnen worden gebruikt om een effect te creëren dat meer is dan de som van de delen, en laten zien hoe je deze kennis op een praktische manier kunt gebruiken.
In dit voorbeeld gebruiken we animatie om een kaart met details en links naar web- en andere sociale accounts te presenteren.
Wanneer op een knop wordt gedrukt, wordt er gevraagd of een kaart bij sommige wordt weergegeven volgen opties. In plaats van een eenvoudig oud modaal venster te gebruiken, gebruiken we animatie om het interessanter te maken.
Om het aantrekkelijk te maken, vinden er verschillende animaties plaats. De verschillende stukken bezielen in en introduceren elk element op volgorde. Dit helpt de kijker om het verband te begrijpen tussen wat ze hebben ingedrukt en de inhoud en de volgorde van animaties helpt het oog op de volgen-pictogrammen te trekken.
Om te beginnen hebben we een knop nodig om op te drukken en een kaart om weer te geven. De kaart zal worden verborgen wanneer de inhoud voor het eerst wordt getoond.
Donovan Hutchinson
Donovan is een in Dublin gevestigde front-end ontwikkelaar met een passie voor CSS, animatie en het maken van het web leuk.
De knop is een afbeelding en wat tekst. Als je erop drukt, wordt de kaart weergegeven. De kaart bestaat uit vier secties; een knop Sluiten, een gedeelte Details, Headshot en een pictogrambalk met sociale pictogrammen. Voor dit voorbeeld gebruiken we inline SVG-pictogrammen uit de Entypo-verzameling.
Voordat we aan animaties beginnen, voegen we wat stijl toe aan de knop en kaart. Eerst de knop:
.showkaart background: #fff; grensradius: 4em; grens: 0.25em vaste # 1fa756; kleur: # 1fa756; lettergrootte: 18px; links: 50%; regelhoogte: 1,5; opvulling: 1em 1em 1em 4em; positie: absoluut; top: 50%; transformeren: vertalen (-50%, -50%); overzicht: geen; .show-kaart img border-radius: 50%; links: 0,3em; positie: absoluut; top: 0.25em; breedte: 3em;
Notitie: we hebben een toegevoegd overzicht: geen; naar de .toon kaart element omdat sommige browsers een eigenaardige gloed toevoegen aan de focusstatussen van de knoppen (wat we niet willen):
Daarna stylen we de kaart en elk van de secties erin.
.kaart onder: calc (50% - 8em); Geen weergeven; hoogte: 16em; links: calc (50% - 10em); positie: absoluut; overgang: alle 0.4s 0.4s cubic-bezier (.5, .2, .43,1.33); breedte: 20em; .close color: #aaa; cursor: pointer; hoogte: 1em; dekking: 0; positie: absoluut; rechts: 0,5em; top: 0,5em; breedte: 1em; z-index: 10; .details positie: absoluut; onderaan: 2,5em; achtergrond: #fff; grensradius: 0,25 m; hoogte: 0; overloop verborgen; text-align: center; breedte: 20em; .name color: # 333; lettertype: vet; marge: 3em 0 0; dekking: 0; .description color: # 666; lettergrootte: 1em; font-gewicht: 200; regelhoogte: 1,5; marge: 0.75em 2em 2em; dekking: 0; .headshot img border-radius: 50%; border: 0.5em solid #fff; weergave: blok; hoogte: 6em; marge: -3em auto 0,5em; dekking: 0; breedte: 6em; .icon-bar background: # 1fa756; grensradius: 0,25 m; links: -1em; positie: absoluut; rechts: -1em; top: 13em; .icon-bar ul weergave: flex; flex-display: kolom; flex-wrap: nowrap; opvulling: 0; .icon-bar li display: inline-block; font-size: 2em; dekking: 0; opvulling: 0 1em; breedte: 33%; .icon-bar a color: #fff; tekstdecoratie: geen;
Merk op dat we deze kaart hebben ingesteld Geen weergeven in eerste instantie. We zullen dit dan controleren met JavaScript.
In plaats van de CSS in te duiken, stellen we eerst de basisactie in van het weergeven en verbergen van de contactgegevens. Hiervoor wordt een beetje JavaScript (en in dit geval jQuery) gebruikt om klassen toe te voegen en te verwijderen, afhankelijk van waarop is geklikt:
// Laat de kaart zien door op de knop $ ('. Show-card') te klikken. Klik (functie (e) $ ('. Card'). AddClass ('show'). Css ('display', 'block' ); $ ('. show-card'). addClass ('hide');); // Verberg de kaart door op "x" $ ('. Card .close') te klikken. Klik (functie (e) $ ('. Card'). Css ('display', 'none');); We zouden nu de kaart moeten kunnen tonen en verbergen met jQuery en de tonen CSS-eigenschap.
Bekijk de basishow en verberg het voorbeeld hier:
Met de lay-out op zijn plaats moeten we een paar extra stijlen toevoegen om de verschillende elementen te verbergen, zodat we ze in beeld kunnen brengen.
.close, .name, .description, .headshot img, .icon-bar li opacity: 0; .details height: 0;
Deze elementen hebben een vertraging voordat hun animatie van kracht wordt, dus moeten ze in eerste instantie uit het zicht zijn.
Als het mechanisme is geïnstalleerd om de kaart weer te geven en te verbergen, kunnen we beginnen met het toevoegen van animaties. Het JavaScript hierboven voegt een toe laten zien geef aan de kaart die wordt getoond, en we kunnen animaties toevoegen aan deze klasse die de afzonderlijke delen van de kaart zullen introduceren.
Om dit te doen gebruiken we de CSS animatie eigendom en sets van keyframes.
Het is handig om animaties voor algemene doeleinden in CSS te maken en deze opnieuw te gebruiken. Eenvoudige animaties zoals fading in en out kunnen eenmaal worden gedefinieerd en op meerdere plaatsen worden gebruikt.
Om te laten zien hoe keyframes zijn gedefinieerd, laten we de fade-in en fade-out animaties maken.
@keyframes fade-in 0% dekking: 0; 100% dekking: 1; @keyframes fade-out 0% dekking: 1; 100% dekking: 0;
Keyframes zijn een reeks stappen, gedefinieerd als percentages. Dit kunnen een aantal stappen zijn, maar in ons voorbeeld definiëren we alleen de startframe (0%) en het einde (100%) van de keyframes. In de fade-in we beginnen zonder opaciteit (0) en eindigen in volledige dekking (1). De fade-out animatie doet het tegenovergestelde.
We kunnen de gebruiken animatie eigenschap om deze vervagende animaties toe te passen op de knop wanneer deze wordt weergegeven en verborgen.
.show-card animatie: fade-in 0,4s 1s voorwaarts gemak; .show-card.hide animatie: fade-out 0.4s voorwaarts gemak;
De animatie stenografeer hier vertelt de kaart om de te gebruiken fade-in animatie, duurt 0,4 seconden met een vertraging van 1 seconde. De animatie wordt eenmaal afgespeeld en stopt aan het einde (vooruit) en gebruikt de gemak-out timingfunctie.
Wanneer de verbergen klasse wordt toegepast op de knop, de fade-out animatie wordt van kracht.
Het eerste deel dat we zullen introduceren, is de pictogrammenbalk. Omdat dit de plaats is waar de links zullen zijn, willen we dat het opvalt en het eerste zijn dat mensen opmerken.
Bij het animeren kunnen we interessante effecten creëren met behulp van de eigenschap timing function. In dit geval gebruiken we een kubieke Bezier timingfunctie om wat "bounce" toe te voegen wanneer de pictogrambalk verschijnt.
Eerst maken we enkele eenvoudige keyframes om de balk klein te laten worden en in de hoogte te laten groeien.
@keyframes show-icon-bar 0% height: 0; 100% height: 4.5em;
We kunnen deze set hoofdframes nu toepassen op de pictogrambalk wanneer de laten zien klas wordt toegevoegd aan de kaart.
.card.show .icon-bar animation: show-icon-bar .5s vooruit kubieke bezier (.64,1.87, .64, .64);
Het bouncy-effect wordt gecreëerd door het gebruik van de kubieke Bezier timingfunctie. Timing-functies beschrijven de snelheidsveranderingen door een animatie en kunnen worden ontworpen om het begin of einde van een animatie te overschaduwen. Deze animatie gaat iets voorbij, corrigeert en maakt een bounce.
Met de pictogrambalk geïntroduceerd, moeten we animeren het gedeelte dat de details en headshot bevat. We willen dat deze sectie verschijnt nadat de pictogrambalk is geïntroduceerd. Om dit te bereiken gebruiken we de animatie-delay eigendom.
.card.show .details animation: show-detail-container 0.7s 0.5s vooruit cubic-bezier (.54, -0.38, .34,1.42);
De animatie toegepast op de gegevens sectie is ingesteld om een looptijd van 0,7 seconden, en a vertraging van 0,5 seconden. Dit betekent dat de animatie pas begint nadat de pictogrambalk is geïntroduceerd.
We gebruiken hier ook een cubische bezier-timingfunctie om hem wat stuiter te geven.
Vervolgens definiëren we de hoofdframes voor de animatie van deze container.
@keyframes show-detail-container 0% height: 0; 100% height: 13.5em;
De toon-detail-container animatiehoofdframes begint met de container die onzichtbaar is met een hoogte van nul en animeert tot de volledige hoogte. De cubische bezier-timingfunctie zorgt ervoor dat de animatie een beetje overshoot om een beetje bounce te krijgen.
Meerdere animaties kunnen in één enkele eigenschap worden toegepast. Zolang de animaties niet tegenstrijdig zijn (door te proberen dezelfde eigenschap te animeren), kunnen ze worden gebruikt om nuance toe te voegen aan een animatie. Meerdere animaties worden gedefinieerd als afzonderlijke animaties, maar gescheiden door komma's.
In dit geval gaan we de inhoud van headshot, naam en beschrijving vervagen, terwijl we tegelijkertijd een Spring binnen functie zodat ze lijken te zoomen vanaf een afstand.
Als we één enkele animatie hadden gebruikt, met een cubische bezier-timingfunctie, zou het vervagende effect stuiteren en er vreemd uitzien. In plaats daarvan gebruiken we de fade om een lineaire timingfunctie te gebruiken en heeft de zoomlens het bounce-effect.
Eerst definiëren we de Spring binnen keyframes.
@keyframes pop-in 0% transformatie: schaal (0.7); 100% transform: schaal (1);
Dit gebruikt de schaal transformeren om elk element kleiner te laten beginnen en op te schalen naar hun normale grootte.
Laten we de inhoud inbrengen. Elk element heeft twee animaties en elk van de elementen heeft een iets langere vertraging van de animatie om hun uiterlijk te spreiden.
.card.show .headshot img animatie: fade-in 0.4s 1.2s vooruit, pop-in 0.6s 1.2s vooruit cubic-bezier (.64,1.87, .64, .64); .card.show .name animation: fade-in 0,3 sec. 1,3 sec. vooruit, pop-in 0,3 sec. 1,3 sec. vooruit cubic-bezier (.64,1.87, .64, .64); .card.show .description animation: fade-in 0.3s 1.4s vooruit, pop-in 0.3s 1.4s vooruit cubic-bezier (.64,1.87, .64, .64);
De close-pictogramanimatie maakt gebruik van de fade-in keyframes die we eerder hebben gedefinieerd.
.card.show .close animation: fade-in 0.3s 1.3s vooruit;
We hoeven nu alleen de pictogrammen te tonen. Bij het presenteren van animaties is het laatste wat geanimeerd is waar de aandacht van de kijker op zal komen. Dit betekent dat het oog van de kijker de animatie volgt en eindigt met kijken naar de pictogrammen die we zouden willen selecteren.
We zullen opnieuw gebruik maken van de eigenschap animatie-vertraging om ervoor te zorgen dat deze als laatste worden geïntroduceerd. Eerst definiëren we hoofdframes van een animatie voor de pictogrammen:
@keyframes show-icon 0% opacity: 0; transformeren: rotateZ (-40deg); 100% dekking: 1; transformeren: rotateZ (0);
Elk pictogram zal een beetje ronddraaien terwijl ze langzaam verdwijnen. We kunnen nu deze animatie koppelen aan elk van de pictogrammen, met een vertraging op elk pictogram om ze te spreiden.
.card.show .icon-bar li animatie: show-icon 0,5 sec. vooruit cubic-bezier (.64,1.87, .64, .64); .card.show .icon-bar li: nth-child (1) animation-delay: 1.8s; .card.show .icon-bar li: nth-child (2) animation-delay: 1.9s; .card.show .icon-bar li: nth-child (3) animation-delay: 2s;
Zet deze allemaal bij elkaar en we hebben nu een kaart die mooi lijkt wanneer de knop is geselecteerd.
Voordat we kunnen afronden, moeten we een toevoegen verbergen actie om de knop Sluiten te sluiten en de kaart weg te animeren. Eerst zullen we het JavaScript updaten. Druk op de dichtbij pictogram, wacht de JavaScript-code een seconde voordat de kaart wordt verwijderd Geen weergeven.
$ ('. show-card'). klik (functie (e) $ ('. card'). addClass ('show'). css ('display', 'block'); $ ('. show-card ') .addClass (' hide ');); $ ('. card .close'). klik (functie (e) $ ('. card'). addClass ('hide'); setTimeout (function () $ ('. card'). css ('display ',' geen '). removeClass (' show '). removeClass (' hide ');, 1000); $ ('. show-card '). removeClass (' hide ');); Dit geeft ons een seconde om de kaart te animeren. We zullen het van de onderkant van het scherm laten vallen. De keyframes die dit bereiken zijn als volgt:
@keyframes drop-card 100% bottom: -100%; transformeren: rotateZ (20deg); dekking: 0;
We passen dit vervolgens toe als een animatie op de kaart.
.card.hide animatie: drop-card 1s vooruit cubic-bezier (.54, -0.38, .34,1.42);
Alles bijeen, kunt u hier het resultaat zien.
Animaties worden goed ondersteund door browsers. Afhankelijk van uw doelgroep, zouden ze in de meeste situaties moeten werken. Het is de moeite waard om ervoor te zorgen dat de standaardshow- en verbergfuncties werken en dat elke animatie wordt toegevoegd als een progressieve verbetering.
Door het gebruik van meerdere animaties, en met name de animatie-delay property hebben we een heel eenvoudige widget genomen en aantrekkelijker gemaakt. De animatie leidt de kijker door elk van de elementen en leidt ze naar de oproepen tot actie.
Animatie kan een geweldige manier zijn om met uw ontwerpen te communiceren. Deze communicatie helpt bezoekers uw intentie te begrijpen en de geloofwaardigheid en het vertrouwen in de kwaliteit van uw werk te verbeteren.
