Kuten lupasin viime viikon kirjoituksessa, tällä viikolla käymme läpi miten lottie animaatioita voi ladata ja muokata omien tarpeidesi mukaisiksi.

Muokkaus ja lataus

Mene osoitteeseen lottiefiles.com.

Kirjaudu sitten sisään tai rekisteröidy.

LottieFilesin lottie animaatio kirjasto on laaja, joten useimmista aiheista löytyy useita laadukkaita animaatioita.

Etsitään seuraavaksi jotain lottie animaatiota LottieFilesin kirjastosta.

Hae lottie animaatiota haluamastasi aiheesta. Itse hain aiheella ”soccer ball”.

Esiin tulee lottie animaatioita aiheesta.

Paina lottie animaatiota, josta haluat lisätietoja tai jota haluat muokata itsellesi mieluisammaksi.

Esiin aukeaa ikkuna, jossa on lisätiedot kyseisestä lottie animaatiosta.

Voit tässä näkymässä esimerkiksi tykätä lottie animaatiosta, tallentaa sen haluamaasi ”collectioniin” tai ladata lottie animaatio itsellesi haluamassasi muodossa.

Kun skrollaat sivua hieman alaspäin, näet ”Edit Animation” painikkeen.

Jos haluat esimerkiksi muokata animaation värimaailmoja, paina tätä painiketta.

LottieFiles avaa automaattisesti uuden välilehden, jossa voit aloittaa muokkauksen.

Ennen LottieFiles antoi käyttäjän muokata niin montaa lottie animaatiota, kuin he halusivat.

Nykyään raja on asetettu 10 muokkaukseen per käyttäjä. Sen jälkeen muokkaaminen on maksullista.

Vasemmassa kulmassa näkyy lottie animaation eri tasot. Tasoilta löytyy eri kohteita, joita voi muokata.

Tässä lottie animaatiossa on kolme tasoa. Alimmassa tasossa on jalkapallon valkoinen väri. Keskimmäisessä tasossa on jalkapallon musta väri. Ylimmässä tasossa on jalkapallon ”varjo”.

Haluan muokata valkoista väriä joksikin muuksi väriksi, joten valitsen alimman tason.

Oikeassa reunassa näkyvästä ”Edit” välilehdeltä näet tasosta löytyvät värit. Painamalla niitä voit muokata tason värejä.

”Settings” välilehdeltä voit muokata lottie animaation kokoa, sitä kuinka pitkä animaatio on ja animaation frame ratea.

Info välilehdeltä löydät lisätietoja lottie animaatiosta.

Keskemmältä löytyy myös erilaisia muokkausvaihtoehtoja. Nämä asetukset vaikuttavat muokkausnäkymään.

Voit esimerkiksi zoomata sisään tai ulos tai vaihtaa muokkausnäkymän taustaväriä.

Haluan nyt vaihtaa lottie animaation valkoisen värin mustaksi ja mustan värin valkoiseksi.

Palaan ensin tässä tasossa ”Edit” välilehdelle ja painan valkoista väriä. Avautuu värinvalitsija, josta voit valita haluamasi värin käsin tai hexkoodina. Valitsen hexkoodin #000000 eli mustan.

Jalkapallo on nyt kokonaan musta. En tietenkään halua sitä. Menen keskimmäiseen tasoon ja vaihdan mustan värin valkoiseen väriin. Syötän hexkoodiksi #ffffff eli valkoisen.

Jalkapallo näyttää mielestäni nyt hyvältä. Tallennan sen oikean yläkulman ”Save” painikkeesta.

LottieFiles ohjaa sinut nyt sivulle, jossa voit nimetä tallentamasi tiedoston ja valita haluamasi paikan, mihin tallennat muokatun lottie animaatiosi.

Kun olet valinnut mieluisat asetukset lottie animaatiolle, paina ”Save” painiketta.

LottieFiles ohjaa sinut taas uudelle sivulle.

Tällä sivulla voit ladata lottie tiedoston itsellesi ja tehdä muita viimeisiä asioita lottie animaatiosi kanssa.

Ladataan tiedosto JSON tiedostona tietokoneelle.

Nyt voit lisätä muokatun lottie animaatiosi haluamaasi paikkaan, oli se sitten verkkosivu, applikaatio tai muu vastaava.