Kas niin pullerot ja pallerot, palatkaamme takaisin viimeviikkoisten animointipöhinöidemme pariin!
Jäimme kutkuttavaan kohtaan, sillä saimme juuri ensimmäisen animaatiomme valmiiksi. Se tosin käyttää vielä oletusarvoja transition puolesta ja kokenutta tunkkaria tietenkin ärsyttää, kun tuotettu Javascript ei ole puhdasta artesaanikoodia. Katsotaan, mitä voimme tehdä.
Transitiot, siirtymät
Transitiolla pääsemme vaikuttamaan animaation pituuteen ja rytmitykseen sekä näiden kautta animaation “fiilikseen”, tuntumaan. Kulkeeko animaatio samaa vauhtia koko pituutensa ajan, vai kiihtyykö se esimerkiksi alussa ja jarruttaa loppua kohden?
Transitioiden suhteen react-pose tarjoaa meille vaihtoehtoja. Tarjolla on valmiita easing-funktioita, spring- eli vieteritransitioita sekä jonkinkaltainen pohja transitioille, jotka hyödyntävät popmotionin pseudofysiikkapalikan lakeja. Näistä jälkimmäistä en ole niinkään työssäni tarvinnut, vaikka kourallisen testianimaatioita olen silläkin tehnyt.
Tässä hommassa puoli hupia on testailla animaatiosi tuntumaa vaihtelemalla käytettävää easing-funktiota tai transition tyyppiä – ja voit toki artesaanihurmoksessasi myös nakutella omia easing-käyriä, jos vanhat tutut eivät riitä tai jos mielessäsi on jokin erityinen siirtymätapa. Laiska, tehokas ja fiksu koodari käyttää tietenkin lunttilappua oikean easing-käyrän metsästämiseen.
React-posen kanssa määrittelemme transitiot posekohtaisesti. Transitio on objekti, jolle voimme määrittää esimerkiksi tyypin ja keston – edistyneet posettelijat myös rakastavat mahdollisuutta määritellä jokaiselle CSS-arvolle oman transition. Jos animoimme siis vaikka taustaväriä JA x-transformaatiota, voimme määritellä omat transitiot molemmille arvoille erikseen. Tätä mahdollisuutta hyödynnämme tulevissa blogisarjan osissa.
Käydään läpi muutama esimerkki react-posen transitiomäärityksistä – joita toki voi käydä lunttimassa myös react-posen omasta dokumentaatiosta, kun näistä saa tarpeekseen.
Lineaarinen
Jatkakaamme edellisen osan koodia ja määritelkäämme uusi transitio-objekti tuttuun PosedElementtiin, seuraavaan tapaan:
const PosedElement = posed(PosedElementStyle)({
default: {
x: 0,
transition: { ease: "linear", duration: 500 }
},
right: {
x: 225,
transition: {
ease: "linear",
duration: 500
}
}
})
Tässä määrittelemme transition, joka toteutuu, kun right-poseen siirrytään. Transitiolle annamme ease-avaimeen esimääritetyn easing-funktion linear, joka noudattaa lineaarista käyrää. Lineaarinen easing-funktio tekee animaatiosta nimensä mukaisesti lineaarisen, animaatio etenee sen kaikissa vaiheissa samaa vauhtia.
Huomaa, että transitio määritetään jokaiselle poselle erikseen, ja posen oma transitio toteutuu kun poseen siirrytään toisesta posesta.
Duration-arvo on transition kesto millisekunteina, ylläolevassa esimerkissä siirtymä right-posen päätepisteeseen kestää siis puoli sekuntia.
Ease-in
const PosedElement = posed(PosedElementStyle)({
default: {
x: 0
},
right: {
x: 225,
transition: {
ease: "easeIn",
duration: 500
}
}
})
Ease-in nimensä mukaisesti aloittaa animaation hitaasti, “kiihdyttäen” vauhtiinsa. Tästä on myös käytettävissä variaatio easeInOut, joka aloittaa hitaasti ja jarruttaa loppuun. EaseInOut on kätevä valinta tilanteeseen, jossa haluat visuaalisesti yksinkertaisen ja miellyttävän transition.
Spring-transitio
const PosedElement = posed(PosedElementStyle)({
default: {
x: 0
},
right: {
x: 225,
transition: {
type: "spring",
stiffness: 300,
damping: 15
}
}
})
Tässä esimerkissä käytämme transitiossamme vekkulimaista vieteriä. React-pose tarjoaa meille tähän arvoja, joita voimme nakutella ja täten saamme erituntuisia spring-transitioita. Spring on omiaan, kun haluamme animaatiosta leikkisän tai ilmavan. Spring-transitiossa animaatio ei pysähdy päätepisteeseensä vaan vieterimäisesti jatkaa hieman yli ja ponnahtaa takaisin. “Vieterin” voimaa voimme säätää stiffness- ja damping-arvoja muuttamalla. Stiffness vaikuttaa vieterin voimakkuuteen ja damping siihen, kuinka voimakkaasti vieteri “jarruttaa” ylimennyttä animaatiota.
Google askeleen edellä
Googlen Material Designissä transitiot ja easingit on tietenkin viety jo lähes tieteeksi asti, niinpä sieltä kannattaakin käydä vakoilemassa jos kiinnostaa opiskella aiheesta lisää ja haluat esimerkiksi tietää, mikä on just prikulleen oikea transition pituus millekin asialle, tai mitä easingia kannattaa käyttää kussakin tilanteessa.
Ding, level-up! Kehitystä horisontissa
Olemme nyt luoneet onnistuneesti muutamia siirtymiä eri poseerausten välillä. Uskokaa tai älkää, mutta näillä hyvin yksinkertaisilla esimerkeillä olemme jo kasvattaneet kykyjämme siihen pisteeseen, että voisimme luoda vaikka mitä kivaa liikkumista käyttöliittymiimme. Voisimme jo luoda esimerkiksi togglestateja nappuloillemme tai komponentin tilaa hyödyntämällä erinäköisiä korostuksia vaikkapa rekisteröitymislomakkeelle.
Himokas kehittäjä tietenkin kaipaa lisää, enkä minä sitä hupia teiltä ole kieltämässä! Siirrytään siis ensi viikolla tutkimaan laajemmin minkälaisia mahdollisuuksia jo nämä esimerkit mahdollistavat ja laajennetaan osaamistamme entistä suurempiin svääreihin. Nähdään!
ps. Jos blogisarjan mikä tahansa osa on teitä innostanut tekemään luomuksia, kuulen niistä mielelläni ja ihailen tuotoksianne 🙂 Kirjoitelkaa vaikka alle jos olette inspiraatiopäissänne saaneet jotain aikaan!
