Schakel je menu's uit met animatie met CSS

Het is door animatie die we de wereld begrijpen: deuren schommelen open, auto's rijden naar hun bestemmingen, lippen krullen naar een glimlach. Zelfs de dingen die ogenblikkelijk voelen, zoals bliksem opvallend of een telefoon op je gezicht laten vallen terwijl ze het in bed gebruiken, in de loop van de tijd gebeuren. Het is door die beweging die we begrijpen hoe objecten betrekking hebben en functioneren; Als ze licht of zwaar, stijf of los, verbonden of afzonderlijk, kleverig of glad zijn.

Op het web hebben we echter gewend aan dingen die verschijnen en verdwijnen in een oogwenk. We klikken op een link en alles verandert. Het is alsof je wordt geleid in een geblinddoekte kamer, rond een paar keer draait en het verwijderen van de blinddoek om in de omgeving te nemen. Je weet niet eens welke deur je hebt aangegaan. Dit is en groot hoe de meeste sites zijn gebouwd. We kunnen het beter doen.

Bij het leren over het potentieel van CSS-animatie ​ Het kan gemakkelijk zijn om onze fantasieën te laten gaan in hyperdrive en strooi de animaties op ongeveer alles. Terwijl animatie geweldig kan zijn, moeten we voorzichtig zijn en ons altijd vragen: Is deze animatie zinvol? Voegt het een andere waarde toe dan mooi zijn? Maakt het ons product gemakkelijker te gebruiken?

Zinvolle animatie

In dit artikel gaan we werken met een gemeenschappelijk UI-ontwerp Element: een menu-schakelaar. We gaan het menu maken (en een pictogram om ermee te gaan) met CSS, en het laten leven met animaties. We zorgen ervoor dat de animaties zinvol zijn, maar ook best practices van webprestaties toepassen om ervoor te zorgen dat ze zo soepel mogelijk zijn.

Jij kan Bekijk hier een voorbeeld van het eindresultaat ​Wanneer de gebruiker op het menu-pictogram klikt, breiden we de achtergrondplaat van de pictogram (een cirkel) uit om het scherm te bedekken en de menu-overlay te presenteren.

In plaats van gewoon op een hechtpictogram te knipperen, gaan we animeren en morf de drie verticale lijnen (die het menu-pictogram vormen) in een 'X', om een ​​nauwe pictogram te vertegenwoordigen. Met andere woorden, zoals het menu wordt onthuld het pictogram Morphs in een knop Sluiten.

Gerelateerde elementen

Misschien denk je 'dus, is dit een zinvolle animatie?' Nou, geweldige vraag. Kort antwoord: Ja! Langer antwoord: animaties zijn geweldig in het aansluiten van elementen op het scherm en laten zien hoe ze zich met elkaar verhouden.

Naarmate we de achtergrondplaat van het menu opslaan om het menu te worden, laten we zien hoe de twee zijn aangesloten - vergelijkbaar met hoe een app-pictogram, wanneer ingedrukt op iOS of Android, schalen en het scherm overneemt, waaruit de app is gelanceerd datzelfde pictogram. Ons menupictogram schakelt niet alleen het menu aan: het is het menu, alleen ingestort.

Evenzo, net als hoe een aan / uit-toggle transformeert tussen de in- en uitschakelen wanneer u op IOS drukt, verandert onze menu-schakelaar tussen een menupictogram en een nauwe pictogram, afhankelijk van het menu van de site zichtbaar of verborgen. Dit helpt het idee af te dwingen dat de twee pictogrammen op soortgelijke manieren functioneren: ze besturen beide het menu.

Dus terwijl we onze site leuk maken om te gebruiken, maken we het ook gemakkelijker om het te begrijpen, en het verbeteren van de gebruikerservaring zo enigszins.

Zie hoe dit te doen in de video-tutorial hierboven en geschreven stappen hieronder.

01. Ga aan de slag

Download de projectbestanden ​Openen index.html In een browser en je zou drie grote banden tegen een witte achtergrond moeten zien. Dit is de menu-overlay die we onthullen.

Allereerst moeten we het verbergen. In stijlen.css , voeg deze stijlen toe aan .menu-overlay ​

 Dekking: 0;
Zichtbaarheid: verborgen; 

Met de overlay verdwenen, moet een knop in de linkerbovenhoek verschijnen. Laten we ons menu-pictogram hier tekenen, dus er is iets om op te klikken om de overlay weer te geven. Om het gemakkelijk te maken om te animeren, trekken we het met alleen HTML en CSS; geen bitmaps of vectoren. We hebben al wat html in index.html Voor het menu: een container ( .menu ), een achtergrond ( .menu-cirkel ), een link ( .menu-link ) en het pictogram ( .menu-pictogram ) met één overspanning voor elke regel.

Een apart hebben div want de achtergrond is een enigszins onconventionele aanpak. Als we niet op het punt waren om animaties toe te voegen aan deze cirkel, hadden we geen apart div ​We kunnen gewoon een toevoegen grensradius en achtergrondkleur aan onze menu-link ​

We willen echter vrij zijn om de transformeren Onroerend goed op de cirkel, zodat we het kunnen schalen zonder het pictogram zelf te beïnvloeden, dus we moeten de achtergrond van het pictogram decouperen.

Laten we beginnen met het tekenen van de lijnen die het pictogram vormen. Wat hebben ze allemaal gemeen? Ze zijn even breed, ze hebben afgeronde hoeken, zijn absoluut gepositioneerd en ze hebben een achtergrondkleur. Omdat alle lijnen de menu-lijn Klasse, laten we het gebruiken om deze gedeelde eigenschappen in te stellen:

 .Menu-lijn {
 Achtergrondkleur: # 333;
 Hoogte: 2px;
 Breedte: 100%;
 Border-Radius: 2px;
 Positie: absoluut;
 Links: 0;
} 

Dan kunnen we de unieke klassen van de regels gebruiken om de verticale positie in te stellen:

 .MENU-LINE-1 {TOP: 0;​

.menu-line-2 {
 Top: 0;
 onderkant: 0;
 marge: auto;
​

.menu-line-3 {bodem: 0; } 

02. Voeg een hover-effect toe

Laten we het pictogram duidelijk klikkend klikt door een zwevend effect toe te voegen. In stijlen.css , maak een nieuwe selector voor menu-cirkel Om het op te schalen wanneer u over het menu hangt:

 .MENU: Hover .menu-cirkel {transformatie: schaal (1.4); } 

Nu kunnen we onze eerste animatie toevoegen. Toevoegen "Transitie: alle 0,2S-gemak-in-out" naar .menu-cirkel {} (niet op de hover status). We vertellen de browser om alle eigenschappen te animeren die kunnen veranderen .menu-cirkel ​Dus wanneer we het opslaan op zweef, animeert het in de loop van 0,2 seconden naar zijn nieuwe staat, met een timingfunctie van in-out ​

Hoe weet u welke timingfunctie moet kiezen? Vooral, vermijd het gebruik van een lineaire timingfunctie. Weinig dingen in de echte wereld bewegen met een perfect constante snelheid, dus objecten geanimeerd met een lineaire timingfunctie hebben de neiging om onnatuurlijk en stijf uit te zien (zoals Einstein zou hebben gezegd: "God speelt niet dobbelstenen met een lineaire timingfunctie").

Als vuistregel, uitverkocht Werkt goed voor het presenteren van nieuwe objecten, en vergemakkelijken Werkt goed voor het verwijderen van objecten. En bij twijfel, in-out is een solide timingfunctie voor in gebreke naar: het heeft een langzaam begin en een langzaam einde, waardoor een gladde en vloeiende animatie wordt gecreëerd.

03. Toon en verberg het menu

Laten we jQuery gebruiken om onze nieuw gemaakte overlay te laten zien en te verbergen. In script.js , schakel de klasse van Open Aan .menu-overlay In de bestaande klikbehandelaar:

  $ (". Menu-overlay"). Toggleclass ("open"); 

Toon vervolgens de overlay wanneer het een open klasse heeft:

 .Menu-overlay.open {
 Dekking: 1;
 Zichtbaarheid: zichtbaar;
} 

04. Sluit het menu-pictogram aan

De overgang die we eerder hebben toegevoegd betekent dat we al een nette fade-effect hebben wanneer we de overlay laten zien en verbergen. We kunnen het echter laten lijken op de achtergrond van het menu-pictogram wordt het menu-overlay en sluit de twee niet visueel aan.

Het bereiken van dit effect is gemakkelijker dan het lijkt: alles wat we moeten doen is snel de menucirkel vergroten wanneer erop wordt geklikt. De overlay zal tegelijkertijd vervagen, waardoor de illusie wordt gemaakt die het menu-pictogram transformeert in de overlay.

We moeten in staat zijn om de cirkel van het menu te stylen wanneer het menu is geklikt. Openen script.js , en in onze bestaande klikfunctie schakelt de klas open voor onze .menu ​

  $ (". Menu"). Toggleclass ("open"); 

Nu kunnen we deze klasse richten met CSS en de cirkel uitzetten terwijl het menu wordt geopend. Onder de onderkant van style.css , breiden de .menu-cirkel wanneer .menu heeft ook een klasse .Open ​

 .menu.open .menu-cirkel {transformatie: schaal (60);
} 

05. Transformeer het pictogram

We hebben een mooi onthullend effect voor ons menu, maar hoe draaien we het menu-pictogram in een hechtpictogram? Het is verrassend eenvoudig als je eenmaal weet hoe - we hoeven alleen drie CSS-eigenschappen in te stellen. Ten eerste moeten we de middelste regel verbergen terwijl het menu wordt weergegeven:

 .MENU.OPEN .MENU-LINE-2 {Dekking: 0; } 

Dan moeten we alles wat we moeten doen, de andere twee regels 45 graden in tegengestelde richtingen omdraaien (de lijnen moeten in verschillende richtingen wijzen om een ​​'x' te vormen, dus noteer hoe een van de lijnen een negatieve rotatie van 45 graden heeft):

 .Menu.open .menu-line-1 {
 Transformeren: Roteren (-45DEG);
​

.menu.open .menu-line-3 {
 Transformeren: Roteren (45DEG);
} 

Ja soort van. We moeten ook deze twee regels verticaal centreren. Op dit punt zou je 'gemakkelijk kunnen denken! We moeten alleen de top en bodem positie om ze te centreren '. En je zou gelijk hebben - als we dit pictogram niet hebben geaneerd.

Omdat we alleen hardware-versnelde animaties kunnen bereiken door onszelf te beperken om de transformeren en opaciteit Eigenschappen, we zullen het toevlucht nemen om de lijnen te centreren via transformaties.

 .Menu.open .menu-line-1 {
 Transformeren: Translatyy (7px) Vertaal (-50%) Roteren (-45DEG);
​

.menu.open .menu-line-3 {
 Transformeren: Translatey (-7px) Vertaal (50%) Roteren (45DEG);
} 

Deze transformaties zullen de twee regels verplaatsen, zodat ze verticaal zijn gecentreerd in de pictogramcontainer en draaien ze vervolgens om het kruis te vormen.

Laten we het breken. We hebben twee vertalingen tegelijkertijd: Vertaaly (7px) en Vertaaly (-50%) ​De eerste transformatie, Vertaaly (7px) , wordt gebruikt om de bovenrand van de lijn naar het verticale midden van het canvas te verplaatsen. De wiskunde hier is eenvoudig: 14 is de hoogte van ons pictogram, door het door twee te delen, krijgen we het middelpunt: 7.

De tweede transformatie, Vertaaly (-50%) , wordt gebruikt om de lijn te verplaatsen, zodat het verticale centrum van de lijn, niet de bovenrand, zich bevindt op het verticale middenpunt van het canvas.

Meestal bij het gebruik van de ​ Aanmelden CSS U verwijst naar de ouder van een element (instelling Breedte: 100% komt overeen met de breedte van het element met die van zijn ouder), maar als u percentages gebruikt met de eigenschap Transformen die u verwijst naar het element zelf, niet de ouder. Dus voor ons om de lengte van een lijn te vinden en deze met de helft daarvan omhoog te bewegen, is alles wat we nodig hebben Vertaaly (-50%) ​

06. Morph tussen pictogrammen

In plaats van het menu-pictogram te vervangen door het pictogram Sluiten, laten we morf tussen de twee staten.

Begin met het toevoegen van een overgang naar .menu-lijn in style.css ​

 Transitie: alle 0,25S gemak-in-out; 

TA-DA! Een morphing menu pictogram. De animatie is echter een beetje saai. Laten we dat oplossen. Om de lijnen levendiger te maken, kunnen we ze zowel nog eens 90 graden roteren. Het pictogram ziet er uiteindelijk hetzelfde uit, maar de lijnen zullen tijdens dezelfde periode verder reizen. Verander de rotaties naar Roteren (-135DEG) en roteren (135 deg) ​

Als vuistregel kunt u altijd een animatie verbeteren door een aangepaste Bézier-curve te gebruiken die beter is aangepast aan uw animatie. We gebruiken momenteel in-out - Dit betekent dat de animatie een langzame start en eindigt, met een sneller tempo in het midden.

Ik denk dat een meer veerachtig effect past voor ons pictogram. Laten we het snel laten draaien, met een klein bounce-effect als het gaat om een ​​einde. Voor .menu-lijn , vervangen " gemak-in-out " Met een Custom Bézier Curve:

 Overgang: alle 0,25S kubiek-bezier (0,175, 0,885, 0,32, 1.275); 

Wat zijn al die nummers? Maak je geen zorgen: Bézier Curves worden zelden met de hand geschreven. Je gebruikt CUBIC-BEZIER () Om het tempo van een animatie in de loop van de tijd te definiëren, en in plaats van ze alleen te schrijven, raad ik aan een referentiesite te gebruiken. Dit komt van EasyS.net. Het overschrijdt aan het einde van de animatie en creëert een subtiele bounce-effect.

Terwijl we erbij zijn, ga dan naar Easers.net en pak de code voor EasOUTExpo ​We zullen dit gebruiken om een ​​meer verfijnd effect te creëren voor de menuachtergrondanimatie. Update de overgang van .menu-cirkel Om deze Custom Bézier-curve te gebruiken en de animatie een beetje langer (0,5s) te maken:

 Overgang: alle 0,5s kubiek-bezier (0,19, 1, 0,22, 1); 

Gefeliciteerd, je hebt een set van animaties gemaakt die zinvol zijn: ze helpen je te begrijpen wat er op de site gebeurt tijdens het navigeren, waardoor een gevoel van ruimtelijk bewustzijn wordt gecreëerd. Bovendien lopen de animaties soepel.

Door alleen de transformatie- en opaciteitseigenschappen te animeren, kunnen we ervoor zorgen dat de hardware-acceleratie-ondersteuning van de browser kan worden geschopt en onnodige vertraging kan voorkomen. Zorg er bij het spelen met animaties of je deze twee dozen aanklikt: maak ze zinvol en mooi.

Dit artikel verscheen oorspronkelijk in netto tijdschrift uitgave 281. Abonneren op net hier ​

Gerelateerde artikelen:

• 10 indrukwekkende voorbeelden van CSS3-animatie
• 28 uitstekende voorbeelden van CSS
• Aan de slag met webtoegankelijkheid