LottieFiles vytvořil rychlý, škálovatelný, po vykreslení upravitelný typ souboru a je pro vás snadné se zapojit a vytvořit animace v tomto formátu. Pomocí efektů Adobe After a některých zásuvných modulů se můžete stát součástí nejnovějšího humbuku typu souborů: Lottie.
co je lottie?
Lottie nebo dotLottie je typ souboru, který bere webové vývojáře útokem. Možná jste vytvořili animace, které chcete zahrnout do svých návrhů, ať už se jedná o sociální média, webový design nebo design UX a uživatelského rozhraní. A své animace pravděpodobně ukládáte jako soubory GIF, SVG nebo PNG. Soubor Lottie je všechny dobré části těchto typů souborů, ale po vykreslení je menší, rychlejší a snáze se upravuje.
LottieFiles je obrovská databáze předpřipravených animací uložených ve formátech Lottie nebo JSON. Tyto animace se vykreslují v reálném čase, což umožňuje rychlejší dodání do vašich návrhů. Na stažení těchto souborů nemusíte čekat; zobrazí se, jakmile se stránka otevře.
Chcete-li se dozvědět více o LottieFiles, podívejte se na naše úvod do Lottie.
Začínáme
Vytvoříme Lottie pomocí Adobe After Effects, ale existuje i jiný software, který můžete použít k vytvoření animace Lottie. K vytvoření Lottie můžete použít Adobe Animate s pluginem LottieFiles. Můžete také převést animaci formátu SVG na Lottie, pokud jste již animaci v tomto formátu vytvořili.
After Effects je naše nejlepší volba, nicméně vzhledem k tomu, že LottieFiles byl původně vytvořen pro použití v After Effects. Začněme.
1. Vytvořte si animaci
Animační aspekt vaší Lottie je stejný jako u jakéhokoli jiného formátu. Ilustraci naší animace jsme vytvořili pomocí Adobe Illustratoru. Tím zůstanou vrstvy oddělené a připravené k importu do After Effects. Jakmile je vaše ilustrace importována, můžete upravit vrstvy kompozice pro konečnou animaci.
Animace lotie běží v nepřetržité smyčce, takže to zvažte jako koncový a počáteční bod vašeho návrhu. Animace by měla být jednoduchá a dlouhá asi tři sekundy.
2. Stáhněte si pluginy
Existují dva zásuvné moduly, které můžete použít k vytvoření souboru Lottie: zásuvný modul LottieFiles nebo zásuvný modul Bodymovin. Oba jsou k dispozici pro After Effects, ale plugin LottieFiles lze nalézt také v jiném softwaru. Každý z nich dělá trochu jiné věci, ale my se právě teď zaměříme na plugin LottieFiles.
Chcete-li si stáhnout plugin LottieFiles, přejděte na stránku Stránka pluginu LottieFiles After Effects. Najdete dvě možnosti stahování.
Možnost vpravo vyžaduje Správce rozšíření od Anastasiy který funguje s Mac i Windows. Jakmile si stáhnete Správce rozšíření, stáhněte si plugin ZXP ze stránky LottieFiles.
Po stažení pluginu ZXP otevřete Správce rozšíření Anastasiy a klikněte After Effects, vyberte plugin LottieFiles ze seznamu a stiskněte Nainstalujte.
Zpět na stránku zásuvného modulu LottieFiles si stáhněte také zásuvný modul Adobe Exchange; otevřete počítačovou aplikaci Creative Cloud a nainstalujte plugin. Vraťte se ke svému hotovému animace v After Effects.
Někteří lidé mají při používání těchto pluginů chybu oprávnění. Chcete-li se tomuto problému vyhnout, přejděte na After Effects > Předvolby > Skriptování a výrazy > Skriptování aplikací a zaškrtněte políčko pro Povolit skriptům zapisovat soubory a přistupovat k síti.
Jakmile to uděláte, vyskakovací okno pro LottieFiles vás požádá o přihlášení. Pokud ještě nemáte účet LottieFiles, nyní je čas si jej vytvořit.
3. Exportujte svou lotii
S nainstalovanými zásuvnými moduly LottieFiles můžete vykreslit animaci Lottie. Když máte hotovou kompozici animace, klikněte Okno > Rozšíření > LottieFiles. Tím se zobrazí vyskakovací okno s názvy vašich skladeb. Klikněte na zelený šíp vedle názvu vaší kompozice se zobrazí okno vykreslování Lottie.
Po několika sekundách se vaše animace objeví ve vyskakovacím okně. Animace se bude přehrávat ve smyčce v reálném čase. Zde si můžete vybrat, zda chcete svou animaci uložit nebo nahrát animaci do knihovny LottieFiles.
kliknutím Uložit jako vám nabídne dvě možnosti exportu: Lottie JSON (*.json) nebo dotLottie (*.lottie). Soubor dotLottie je komprimovaný soubor, který obsahuje metadata, která k exportu ve skutečnosti nepotřebujeme. Šli jsme s Lottie JSON.
Váš exportovaný soubor bude textový soubor, nikoli soubor vizuální animace; takto fungují soubory JSON. Ale co když chcete, aby byla animace připravena? Podívejme se, jak k němu můžete přistupovat.
Jak můžete použít svou animaci Lottie
Chcete-li nahrát svou Lottie do knihovny LottieFiles, klikněte nahrát. To se na několik sekund vykreslí. Poté klikněte na tlačítko se zeměkoulí. Tím se otevře web LottieFiles, kde můžete odeslat svou animaci Lottie do knihovny LottieFiles. Pojmenujte svůj soubor a stiskněte Ruce pryč.
Jakmile bude vaše animace schválena v knihovně LottieFiles, můžete použít zásuvný modul LottieFiles v softwaru jako Adobe XD, Figma nebo Sketch k odeslání animace do vašeho návrhu.
Kromě přímo v knihovně zásuvných modulů existují i jiné způsoby, jak použít animaci LottieFiles. Animaci Lottie můžete dále upravovat z okna v prohlížeči. Nabízí panel základních vrstev; můžete změnit barvu pozadí, rychlost přehrávání, snímkovou frekvenci a několik dalších věcí.
Z okna Handoff si můžete stáhnout animaci jako soubor Soubor JSON pro implementaci při vývoji webu a design, nebo jej můžete převést na GIF pro konvenčnější použití. Svou animaci můžete také vložit pomocí kódu pro vložení HTML a k dispozici jsou také možnosti pro iOS a Android, takže animaci můžete poslat do svého webového designu.
Vložení Lottie HTML vám umožní upravit kód pro úpravu vaší animace. Barvy a velikosti můžete změnit přímo v kódu, když jej přidáte na svůj web.
Stažení aplikace LottieFiles do telefonu vám umožní naskenovat QR kód animace a zobrazit náhled animace v aplikaci. Můžete také použít klávesnici LottieFiles a vložit dotLottie jako komentář k určitým příspěvkům.
Vytvořte lotii v After Effects
I když to stále může vypadat jako nekonvenční typ souboru, protože svou animaci nemůžete jednoduše nahrát přímo na sociální média, jako je můžete s GIF nebo PNG, Lottie přichází s mnoha výhodami pro webové vývojáře a designéry, kteří používají pluginy nebo vkládají kódy do svých návrhy.
Soubory Lottie a JSON šetří místo a čas načítání a zachovávají kvalitu ve srovnání s tradičními typy souborů. LottieFiles neustále vytvářejí nové způsoby implementace návrhů, možnosti jsou nekonečné.
Vytvoření animace pohybu v Procreate je snadné a tento článek vám ukáže, jak na to.
Přečtěte si další
- Tvořivý
- Počítačová animace
- Adobe
- Konverze souborů
Ruby je spisovatelkou v kategorii Creative MUO se zaměřením na psaní o návrhovém softwaru. Ruby, která pracovala jako designérka, ilustrátorka a fotografka, má také bakalářský titul v oboru grafické komunikace a magisterský titul v angličtině s kreativním psaním.
Přihlaste se k odběru našeho newsletteru
Připojte se k našemu zpravodaji a získejte technické tipy, recenze, bezplatné e-knihy a exkluzivní nabídky!
Chcete-li se přihlásit k odběru, klikněte sem
