A LottieFiles egy gyors, méretezhető, utólag renderelhető szerkeszthető fájltípust hozott létre, és Ön könnyen bekapcsolódhat és animációkat készíthet ebben a formátumban. Az Adobe After Effects és néhány beépülő modul használatával részese lehet a legújabb fájltípus-felhajtásnak: a Lottie-nak.
Mi az a Lottie?
A Lottie vagy a dotLottie egy olyan fájltípus, amely lázba hozza a webfejlesztőket. Előfordulhat, hogy animációkat készített, amelyeket belefoglalhat a terveibe, legyen szó közösségi médiáról, webdesignról vagy UX és UI tervezésről. Az animációkat pedig valószínűleg GIF, SVG vagy PNG fájlként menti. A Lottie-fájl ezeknek a fájltípusoknak az összes jó része, de kisebbek, gyorsabbak és könnyebben szerkeszthetők a megjelenítés után.
A LottieFiles egy hatalmas adatbázis, amely előre elkészített animációkat tartalmaz Lottie vagy JSON formátumban. Ezek az animációk valós időben jelennek meg, lehetővé téve a gyorsabb szállítást a tervekbe. Nem kell várni a fájlok letöltésére; azonnal megjelennek, amint megnyílik az oldal.
Ha többet szeretne megtudni a LottieFiles-ről, nézze meg a mi oldalunkat bevezetés a Lottie-ba.
Elkezdeni
Egy Lottie-t fogunk létrehozni a felhasználásával Adobe After Effects, de vannak más szoftverek is, amelyek segítségével elkészítheti Lottie-animációját. Lottie létrehozásához használhatja az Adobe Animate-et a LottieFiles beépülő modullal. Egy SVG formátumú animációt Lottie-vé is konvertálhat, ha már készített animációt ebben a formátumban.
Az After Effects a legjobb választásunk, azonban mivel a LottieFiles-t eredetileg az After Effectsben való használatra hozták létre. Kezdjük el.
1. Készítse el animációját
A Lottie animációs aspektusa ugyanaz, mint bármely más formátumé. Animációnk illusztrációját Adobe Illustrator segítségével készítettük el. Ez elkülönítve tartja a rétegeket, és készen áll az After Effectsbe való importálásra. Az illusztráció importálása után hozzáigazíthatja a kompozíció rétegeit a végső animációhoz.
A Lottie-animációk folyamatos ciklusban futnak, ezért ezt vegyük figyelembe a tervezés vég- és kezdőpontjaként. Az animációnak egyszerűnek és körülbelül három másodpercesnek kell lennie.
2. Töltse le a bővítményeket
Két beépülő modul használható Lottie-fájl létrehozására: a LottieFiles bővítmény vagy a Bodymovin bővítmény. Mindkettő elérhető az After Effectshez, de a LottieFiles beépülő modul más szoftverekben is megtalálható. Mindegyikük kissé eltérő dolgokat csinál, de most a LottieFiles bővítményre fogunk összpontosítani.
A LottieFiles beépülő modul letöltéséhez lépjen a LottieFiles After Effects beépülő modul oldala. Két letöltési lehetőséget talál.
A jobb oldali opcióhoz egy Extension Manager Anastasiytól amely Mac és Windows rendszerrel is működik. Miután letöltötte az Extension Managert, töltse le a ZXP beépülő modult a LottieFiles oldalról.
A ZXP beépülő modul letöltése után nyissa meg az Anastasiy Extension Manager alkalmazást, és kattintson a gombra Utóhatás, válassza ki a LottieFiles beépülő modult a listából, és nyomja meg a gombot Telepítés.
Visszatérve a LottieFiles beépülő modul oldalára, töltse le az Adobe Exchange beépülő modult is; nyissa meg Creative Cloud asztali alkalmazását, és telepítse a beépülő modult. Térjen vissza a készhez animáció az After Effectsben.
Vannak, akiknél engedélyhiba lép fel e beépülő modulok használatakor. A probléma elkerülése érdekében látogasson el ide Utóhatás > preferenciák > Szkriptek és kifejezések > Alkalmazás szkriptelés és jelölje be a négyzetet Engedélyezze a szkriptek számára a fájlok írását és a hálózat elérését.
Ha ez megtörtént, a LottieFiles felugró ablaka felkéri, hogy jelentkezzen be. Ha még nem rendelkezik LottieFiles-fiókkal, itt az ideje, hogy létrehozzon egyet.
3. Exportálja Lottie-ját
A telepített LottieFiles beépülő modulokkal renderelheti Lottie-animációját. A kész animációs kompozíción kattintson a gombra Ablak > Kiterjesztések > LottieFiles. Ekkor megjelenik egy előugró ablak a kompozíciók nevével. Kattints a zöld Nyíl a kompozíció neve mellett megjelenik a Lottie render ablak.
Néhány másodperc múlva az animáció megjelenik a felugró ablakban. Az animáció valós időben, hurokban fog lejátszani. Itt kiválaszthatja, hogy elmenti-e az animációt, vagy feltöltheti az animációt a LottieFiles könyvtárba.
Kattintás Mentés másként két exportálási lehetőséget kínál: Lottie JSON (*.json) vagy dotLottie (*.lottie). A dotLottie fájl egy tömörített fájl, amely metaadatokat tartalmaz, amelyekre nincs igazán szükségünk az exportáláshoz. Lottie JSON-nal mentünk.
Az exportált fájl szövegfájl lesz, nem vizuális animációs fájl; így működnek a JSON-fájlok. De mi van, ha azt szeretné, hogy az animáció készen álljon? Lássuk, hogyan lehet hozzáférni.
Hogyan használhatod a Lottie-animációt
A Lottie feltöltéséhez a LottieFiles könyvtárba kattintson a gombra Feltöltés. Ez néhány másodpercig megjelenik. Ezután kattintson a földgömböt tartalmazó gombra. Ezzel megnyílik a LottieFiles webhely, ahol elküldheti Lottie-animációját a LottieFiles könyvtárba. Nevezze el a fájlt, és nyomja meg a gombot Átadás.
Miután az animációt jóváhagyták a LottieFiles könyvtárban, használhatja a LottieFiles beépülő modult olyan szoftverekben, mint az Adobe XD, Figma vagy Sketch, hogy elküldje az animációt a tervbe.
Vannak más módok is a LottieFiles animáció használatára, kivéve a közvetlenül a bővítménykönyvtárban. Tovább szerkesztheti Lottie-animációját a böngésző ablakából. Egy alapvető rétegpanelt kínál; módosíthatja a háttér színét, a lejátszási sebességet, a képkocka sebességet és még néhány dolgot.
Az Átadás ablakból letöltheti az animációt a JSON-fájl a webfejlesztésben való megvalósításhoz és a tervezést, vagy átalakíthatja GIF formátumba a hagyományosabb felhasználás érdekében. Az animációt HTML beágyazási kóddal is beágyazhatja, és iOS és Android opciók is rendelkezésre állnak, így az animációt elküldheti a webdesignba.
A Lottie HTML beágyazása lehetővé teszi a kód szerkesztését az animáció szerkesztéséhez. Közvetlenül a kódban módosíthatja a színeket és a méreteket, amikor hozzáadja azt webhelyéhez.
Ha letölti a LottieFiles alkalmazást telefonjára, beolvassa az animáció QR-kódját, hogy megtekinthesse az animációt az alkalmazásban. Használhatja a LottieFiles billentyűzetet is, és bizonyos bejegyzésekben megjegyzésként eldobhatja a dotLottie-t.
Hozzon létre egy lottót az After Effectsben
Bár még mindig szokatlan fájltípusnak tűnhet, mivel nem töltheti fel egyszerűen az animációt közvetlenül a közösségi médiára, mint pl. GIF vagy PNG segítségével a Lottie számos előnnyel jár azoknak a webfejlesztőknek és tervezőknek, akik beépülő modulokat használnak vagy kódokat ágyaznak be. tervez.
A Lottie- és JSON-fájlok helyet és betöltési időt takarítanak meg, és megőrzik a minőséget a hagyományos fájltípusokhoz képest. A LottieFiles folyamatosan új módszereket hoz létre a tervek megvalósításához, a lehetőségek végtelenek.
A Procreate alkalmazásban könnyű mozgóanimációt létrehozni, és ez a cikk megmutatja, hogyan kell ezt csinálni.
Olvassa el a következőt
- Kreatív
- Számítógépes animáció
- Vályogtégla
- Fájlkonverzió
Ruby a MUO Kreatív kategóriájának írója, aki a tervezőszoftverekről ír. Mivel tervezőként, illusztrátorként és fotósként dolgozott, Ruby Grafikai kommunikációból BA-fokozatot, valamint Kreatív írásból angol MA diplomát is szerzett.
Iratkozzon fel hírlevelünkre
Csatlakozzon hírlevelünkhöz műszaki tippekért, ismertetőkért, ingyenes e-könyvekért és exkluzív ajánlatokért!
Kattintson ide az előfizetéshez