Virta valikot käyttämällä animaatiota CSS: llä

Se on animaation kautta, että meillä on tunne maailmasta: Ovet kääntyvät auki, autot ajaa heidän kohteisiinsa, huulet käpertyä hymyilee. Jopa asiat, jotka tuntevat hetkellisen, kuten salaman silmiinpistävä tai pudottamalla puhelimesi kasvoillasi, kun käytät sitä sängyssä, tapahtuu ajan myötä. Se on sen kautta, että ymmärrämme, miten esineet liittyvät ja toimimaan; Jos ne ovat kevyitä tai raskas, jäykkä tai löysä, liitetty tai erillinen, tahmea tai liukas.

Verkossa on kuitenkin tottunut asioihin, jotka näkyvät ja katoaa silmänräpäyksessä. Klikkaa linkkiä ja kaikki muutokset. Se on kuin on johtanut huoneeseen, kehruu noin muutaman kerran ja poistaa sokean ottaa ympäristöön. Et edes tiedä, mikä ovi olet kirjoittanut. Tämä on ja suuri, kuinka useimmat sivustot on rakennettu. Voimme tehdä paremmin.

Kun oppia potentiaalista CSS-animaatio , Se voi olla helppo antaa mielikuvituksemme hyperdrive ja ripottele animaatioita lähes kaikesta. Vaikka animaatio voi olla suuri, meidän on oltava varovainen ja aina kysy itseltämme: Onko tämä animaatio mielekäs? Lisääkö mikä tahansa arvo muu kuin kaunis? Onko se helpompi käyttää?

Mielekäs animaatio

Tässä artikkelissa työskentelemme yhteistä UI-muotoilu Elementti: Valikko vaihtaa. Aiomme luoda valikon (ja kuvakkeen mennä sen kanssa) CSS: llä ja tehdä se elossa animaatioilla. Varmistamme, että animaatiot ovat merkityksellisiä, mutta myös käyttävät web-suorituskykyä parhaita käytäntöjä, jotta ne ovat mahdollisimman sujuvat.

Sinä pystyt Esikatsele lopputuloksen täällä . Kun käyttäjä napsauttaa valikkokuvaketta, laajentaa kuvaketta taustalevyn (ympyrän) peittämään näytön ja esitä valikkopäällyste.

Sen sijaan, että vain vilkkuu läheiseen kuvakkeeseen, aiomme animoida ja morph kolme pystysuoraa viivaa (jotka muodostavat valikkokuvakkeen) "X": ksi, jotta se edustaa läheistä kuvaketta. Toisin sanoen, koska valikko paljastuu kuvakkeiden morphs suljettuun painikkeeseen.

Liittyvät elementit

Saatat ajatella "niin, onko tämä mielekäs animaatio?" No, suuri kysymys. Lyhyt vastaus: Kyllä! Pidempi vastaus: Animaatiot ovat suuria yhdistää elementtejä näytöllä ja osoittavat, miten ne liittyvät toisiinsa.

Kun mittaamme valikon taustalevyn tulla valikkoon, näytämme, miten nämä kaksi on kytketty - samanlainen kuin sovelluksen kuvake, kun sitä painetaan iOS: lla tai Androidilla, asteittain ja ottaa näytön, osoittaen, että sovellus käynnistettiin että hyvin kuvake. Valikkokuvake ei vain vaihda valikkoa: Se on valikko, vain romahtanut.

Samoin kuin kuinka päälle / pois vaihtaa muunnetaan sen päälle ja pois tilaan, kun painat sitä iOS: ssä, valikkovaihtomme muuttuu valikkokuvakkeen ja läheisen kuvakkeen välillä, jos sivuston valikko on näkyvissä tai piilotettuna. Tämä auttaa noudattamaan ajatusta siitä, että kaksi kuvaketta toimii samalla tavoin: molemmat hallitsevat valikkoa.

Joten kun teemme sivuston hauskaa käyttää, olemme myös helpompi ymmärtää ja parantaa käyttäjäkokemus koskaan niin vähän.

Katso, miten tämä tehdään videon opetusohjelmassa ja alla olevissa kirjoissa vaiheissa.

01. Aloita

Lataa projektitiedostot . Avata index.html Selaimessa ja sinun pitäisi nähdä kolme suurta linkkiä valkoista taustaa vasten. Tämä on valikkopäällyste, jonka paljastamme.

Ensinnäkin meidän on piilotettava se. Sisään Tyylit.css , lisää nämä tyylit .MENU-Overlay :

 Opasiteetti: 0;
Näkyvyys: piilotettu; 

Kun päällekkäinen on mennyt, painike tulee näkyviin vasemmassa yläkulmassa. Let's piirtää valikkokuvake täällä, joten on jotain klikkattavaa näyttämään peittokuvan. Jotta voit helposti animoida, piirrämme sen vain HTML: n ja CSS: n avulla; Ei bittikuvauksia tai vektoreita. Meillä on jo joitakin HTML index.html Valikkoon: Säiliö ( .MENU ), tausta ( .Menu-ympyrä ), linkki ( .MENU-LINK ) ja kuvake ( .MENU-kuvake ) Yhden kappaleen jokaiselle riville.

Joilla on erillinen jakaa Taustalle on jonkin verran epätavallinen lähestymistapa. Jos emme aio lisätä animaatioita tähän ympyrään, emme tarvitsisi erillistä jakaa ; Voisimme vain lisätä a raja-säde ja taustaväri meidän valikkolinkki .

Haluamme kuitenkin olla vapaa käyttää muuttaa Kiinteistö ympyrällä, joten voimme skaalata sitä vaikuttamatta kuvakkeeseen, joten meidän on erotettava tausta kuvakkeesta.

Aloitamme piirustus linjat, jotka muodostavat kuvakkeen. Mitä heillä kaikilla on yhteistä? Ne ovat yhtä laaja, heillä on pyöristetyt kulmat, ovat ehdottoman sijoitetut, ja heillä on taustaväri. Koska kaikki rivit jakavat valikkorivi Luokka, käytämme sitä asettamaan nämä jaetut ominaisuudet:

 .MENU-LINE {
 Tausta-väri: # 333;
 Korkeus: 2px;
 Leveys: 100%;
 Border-RADIUS: 2PX;
 Asema: Absoluuttinen;
 Vasen: 0;
} 

Sitten voimme käyttää linjojen ainutlaatuisia luokkia asettaaksesi pystysuoran asennon:

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

.MENU-LINE-2 {
 Top: 0;
 Pohja: 0;
 Marginaali: auto;
}

.MENU-LINE-3 {Pohja: 0; } 

02. Lisää hover-vaikutus

Tee kuvaketta selkeästi napsauttamalla lisäämällä hover-vaikutus. Sisään Tyylit.css , Luo uusi valitsin Menu-ympyrä Skannata se, kun siirrät valikon päälle:

 .MENU: hover .Menu-ympyrä {muunnos: asteikko (1.4); } 

Nyt voimme lisätä ensimmäinen animaatio. Lisätä "Siirtyminen: Kaikki 0,2S EASE-in-Out" jllek .MENU-Circle {} (ei hover-tilaan). Kerromme selaimesta animoimaan kaikki ominaisuudet, jotka voivat muuttua .Menu-ympyrä . Joten kun me skaatimme sen leijua, se animoi 0,2 sekunnin kuluttua uudelle tilalle, jonka ajoitustoiminto on helppokäyttöinen .

Mistä tiedät, mikä ajoitustoiminto valita? Ensinnäkin vältä lineaarista ajoitustoimintoa. Muutamia asioita todellisessa maailmassa liikkuvat täysin vakionopeudella, joten esineitä animoitu lineaarisella ajoitustoiminnolla pyrkivät näyttämään luonnottomalta ja jäykkiksi (koska Einstein olisi sanonut, "Jumala ei pelaa noppaa lineaarisella ajoitustoiminnoilla").

Peukalosääntönä, helppokäyttöinen toimii hyvin uusien esineiden esittämiseen ja helppokäyttöinen Toimii erinomaisesti esineiden poistamiseksi. Ja kun epäilet, helppokäyttöinen on kiinteä ajoitusfunktio oletusarvoisesti: sillä on hidas alku ja hidas päättyminen, mikä luo sileän ja nesteen animaation.

03. Näytä ja piilota valikko

Käytetään JQuery näyttämään ja piilottamaan äskettäin luotu peitto. Sisään Script.js , Vaihda luokka avata päällä .MENU-Overlay Nykyisen klikkauskäsittelijän sisällä:

  $ ("MENU-Overlay"). Toggleklass ("auki"); 

Sitten näytä peitto, kun se on avoin luokka:

 .MENU-Overlay.open {
 Opasiteetti: 1;
 Näkyvyys: näkyvissä;
} 

04. Liitä valikkokuvake

Aikoi aiemmin lisätty siirtyminen meillä on jo siisti haalistuu vaikutus, kun näytämme ja piilotamme peittokuvan. Voimme kuitenkin tehdä, että valikkokuvaus tausta tulee valikon peittokuvaksi ja liittää paremman visuaalisesti.

Tämän vaikutuksen saavuttaminen on helpompaa kuin näyttää: Kaikki mitä meidän on tehtävä, on nopeasti suurentaa valikkopiiri, kun se on napsautettu. Päällyssä haalistuu samanaikaisesti, mikä luo illuusion, että valikkokuvake muuttuu päällekkäin.

Meidän on kyettävä tyylikäs valikon ympyrä, kun valikko on napsautettu. Avata Script.js , ja nykyisen napsautustoimintojen sisällä Vaihda luokka auki .MENU :

  $ ("MENU"). Toggleclass ("auki"); 

Nyt voimme kohdistaa tämän luokan CSS: llä ja laajentaa ympyrää, kun valikko avataan. Aivan pohjalla Style.css , laajenna .Menu-ympyrä kun .MENU on myös luokka .avata :

 .Menu.open .Menu-ympyrä {muunnos: asteikko (60);
} 

05. Muuta kuvaketta

Meillä on kaunis paljastava vaikutus valikkoon, mutta miten voimme kääntää valikkokuvakkeen läheiseen kuvakkeeseen? Se on yllättävää helppoa, kun tiedät miten - tarvitsemme vain kolme CSS-ominaisuuksia. Ensimmäinen pois, meidän on piilotettava keskilinja, kun valikko näkyy:

 .MENU.APEN .MENU-LINE-2 {OPASPITY: 0; } 

Sitten kaikki mitä meidän on tehtävä, on kääntää muut kaksi riviä 45 astetta vastakkaisiin suuntiin (rivit on osoitettava eri suuntiin "x" muodostamiseksi, joten huomaa, kuinka yksi rivistä on negatiivinen kierto 45 astetta):

 .MENU.OPEN .MENU-LINE-1 {
 Muunnos: Kierrä (-45deg);
}

.MENU.OPEN .MENU-LINE-3 {
 Muunnos: Kierrä (45deg);
} 

No, eräänlainen. Meidän on myös keskitettävä nämä kaksi riviä pystysuoraan. Tässä vaiheessa voit ajatella "helppoa! Meidän on vain vaihdettava huippu ja pohja asento keskittää ne ". Ja olisit oikeassa - jos emme ole animointia tätä kuvaketta.

Koska voimme vain saavuttaa laitteiston nopeutetut animaatiot rajoittamalla itseämme animointiin muuttaa ja peittävyys Ominaisuudet, meidän on turvauduttava linjojen keskittämiseen muunnoksilla.

 .MENU.OPEN .MENU-LINE-1 {
 Muuntaminen: Translatey (7px) Translatey (-50%) Kierrä (-45deg);
}

.MENU.OPEN .MENU-LINE-3 {
 Muuntaminen: Translatey (-7px) Translatey (50%) Kierrä (45deg);
} 

Nämä muunnokset siirtävät kahta riviä, joten ne ovat pystysuoraan keskittyneet kuvakkeeseen säiliöön ja pyörivät sitten ristin muodostamiseksi.

Katkaise se alas. Meillä on kaksi käännöstä, joita käytetään samanaikaisesti: Translatey (7px) ja Translatey (-50%) . Ensimmäinen muutos, Translatey (7px) , käytetään linjan yläreunan siirtämiseen kankaalle pystysuoraan keskustaan. Matematiikka tässä on yksinkertainen: 14 on kuvakkeen korkeus, jakamalla se kahdella saamme keskikohdan: 7.

Toinen muutos, Translatey (-50%) , käytetään siirtämään linjaa niin, että linjan pystysuora keskus, ei sen yläreuna, asuu kankaalle pystysuora keskipisteessä.

Yleensä käytettäessä % Kirjaudu sisään CSS: ssä viittaavat elementin vanhempaan (asetus Leveys: 100% vastaa elementin leveyttä vanhemmansa suhteen), mutta jos käytät prosentteita muunnosominaisuuden kanssa, viittaavat itse elementtiin, ei vanhemman. Joten meille löytää linjan korkeus ja siirrä se ylöspäin puolet siitä, mitä tarvitsemme Translatey (-50%) .

06. Morph välillä kuvakkeet

Sen sijaan, että vaihdat vain valikkokuvakkeen läheisen kuvakkeen kanssa, katsotaanmme molempien valtioiden välillä.

Aloita lisäämällä siirtyminen .MENU-LINE sisään Style.css :

 Siirtyminen: kaikki 0,25-luvun helppous; 

TA-DA! Morphing-valikkokuvake. Animaatio on kuitenkin hieman tylsää. Korjaa se. Jotta rivit näyttävät elävämmäksi, voimme kiertää niitä molempiin 90 asteen. Kuvake näyttää samalta lopulta, mutta linjat matkustavat edelleen samanaikaisesti. Muuta kierrosta Kierrä (-135deg) ja Kierrä (135deg) .

Nyrkkisääntönä voit aina parantaa animaatiota käyttämällä mukautettua bézier-käyrää, joka sopii paremmin animaatioihisi. Käytämme parhaillaan helppokäyttöinen - Tämä tarkoittaa, että animaatiolla on hidas alku ja päättyminen, nopeampi tahti keskellä.

Mielestäni enemmän kevätlaista vaikutusta on sopiva kuvakkeellemme. Tehkäämme se spin nopeasti, pieni pomppiva vaikutus, kun se päättyy. Varten .MENU-LINE , korvaa " Ease-in-Out " Mukautettu bézier-käyrä:

 Siirtyminen: kaikki 0,25-luvun kuutio-bezier (0,175, 0,885, 0,32, 1,275); 

Mitkä ovat kaikki nämä numerot? Älä huoli: Bézier-käyrät on harvoin kirjoitettu käsin. Sinä käytät cubic-bezier () Määritä animaation tahti ajan mittaan ja sen sijaan, että kirjoitat heidät yksin, suosittelen käyttämään viitetietoa. Tämä tulee helpotuksista.net. Se ylittää animaation lopussa ja luo hienovaraisen pomppuluokan vaikutuksen.

Kun olemme siinä, mene helpot.net ja tartu koodiin EaseOutExPO . Käytämme tätä luomaan tarkemman vaikutuksen valikon tausta-animaatioon. Päivitä siirtyminen .Menu-ympyrä Käytä tätä mukautettua Bézier-käyrää ja tehdä animaatiota hieman pidempään (0,5s):

 Siirtyminen: kaikki 0,5-luvun kuutio-bezier (0,19, 1, 0,22, 1); 

Onnittelut, olet luonut joukon animaatioita, jotka ovat merkityksellisiä: ne auttavat sinua ymmärtämään, mitä paikan päällä tapahtuu navigoimalla sitä, mikä luo alueen tietoisuutta. Tämän lisäksi animaatiot toimivat sujuvasti.

Animoimalla muutos- ja opasiteettiominaisuudet voimme varmistaa, että selaimen laitteiston kiihdytystuki voi potkia ja välttää tarpeetonta viivettä. Kun pelaat animaatioita, varmista, että rasti nämä kaksi laatikkoa: tehdä niistä mielekkäitä ja kauniita.

Tämä artikkeli oli alun perin ilmestynyt Net-aikakauslehti Julkaisu 281. Tilaa verkko tähän .

Aiheeseen liittyvät artikkelit:

• 10 Vaikuttava esimerkki CSS3-animaatiosta
• 28 Erinomainen esimerkki CSS: stä
• Aloita Web Accessibility