Figma je oblíbený a pohodlný nástroj pro vytváření rozhraní a lze s ním vytvářet jedinečné a poutavé animace. Jednou z nejoblíbenějších animací, které lze nalézt v mobilních aplikacích a webovém designu, je lesk. Lesk dodává prvkům rozhraní živost a efektnost, takže jsou pro uživatele atraktivnější. V tomto článku vám řekneme, jak vytvořit animaci lesku v postavě.
Prvním krokem při vytváření animace lesku ve tvaru je příprava prvku, na který chcete použít lesk. Můžete použít jakýkoli tvar nebo objekt, jako je tlačítko nebo ikona. Je důležité, aby váš prvek měl zřetelnou hranici nebo obrys, aby lesk vypadal jasně a expresivně. Doporučuje se také použít kontrastní barvy k vytvoření co nejefektivnějšího lesku.
Dále byste měli vytvořit animace lesku pomocí Figmových nástrojů. K dosažení požadovaného efektu lesku můžete použít kombinaci efektů a filtrů. Můžete například přidat efekt rozostření a míchání okrajů, abyste vytvořili iluzi lesku na povrchu prvku. Chcete-li dosáhnout dalšího efektu, můžete k prvku přidat vlastnost přechodu nebo změnit jeho sytost.
Poté byste měli upravit animace lesku tak, aby fungovala samostatně nebo se aktivovala při interakci s uživatelem. Můžete nastavit dobu trvání a zpoždění animace, abyste vytvořili určitý efekt oslnění nebo blikání. Můžete také nastavit možnosti automatického přehrávání nebo opakování animace lesku.
Krok 1: Otevřete Figmu a vytvořte nový projekt
Než začnete vytvářet animace lesku ve tvaru, musíte otevřít program a vytvořit nový projekt.
1. Spusťte Figmu na počítači nebo zařízení.
2. V hlavní nabídce vyberte "Vytvořit nový projekt" nebo použijte klávesovou zkratku Ctrl+N (pro Windows) nebo CMD+N (Pro Mac).
3. V okně, které se zobrazí, vyberte požadované rozměry pro váš projekt. Můžete si vybrat standardní velikosti nebo nastavit vlastní nastavení.
4. Kliknutím na tlačítko Vytvořit vytvoříte nový projekt.
Nyní máte nový projekt v Figmě a jste připraveni začít vytvářet animace lesku.
Krok 2: Přidejte objekt, který bude blikat
Nyní, když jste nastavili časovou osu, můžete začít vytvářet lesklý objekt. Můžete si vybrat jakýkoli tvar nebo ilustraci, kterou chcete animovat.
Chcete-li přidat objekt, postupujte podle následujících kroků:
- Vyberte nástroj Obdélník nebo elipsa z panelu nástrojů vlevo.
- Nakreslete tvar na plátno nebo importujte svou ilustraci pomocí panelu Import.
- V případě potřeby upravte velikost a polohu objektu.
Ujistěte se, že je váš objekt viditelný na oblasti plátna. To vám pomůže vidět efekt blikání jasně.
Krok 3: Nastavte počáteční stav objektu
Před zahájením animace lesku je nutné nastavit počáteční stav objektu. To umožní určit jeho polohu, rozměry a další vlastnosti na začátku animace.
K tomu můžete použít nástroje pro tvarování, jako je" obdélník"," kruh "nebo" čára", abyste vytvořili objekt, na kterém bude animace lesku probíhat.
Poté vyberte daný objekt na plátně a v panelu vlastností nastavte jeho počáteční vlastnosti, jako jsou rozměry, pozice, barva atd.
Pokud jste například vytvořili obdélník, můžete nastavit jeho rozměry a barvu tak, aby odpovídal vašim požadavkům a požadovanému počátečnímu stavu.
Je důležité zajistit, aby počáteční stav objektu odpovídal původnímu momentu animace, aby se vytvořil přirozený a hladký efekt lesku.
- Vyberte nástroj pro vytvoření objektu (například"obdélník").
- Nakreslete objekt na plátno a označte jeho počáteční rozměry a pozici.
- Vyberte tento objekt na plátně.
- V panelu vlastností nastavte počáteční vlastnosti objektu (například jeho barvu nebo průhlednost).
Jakmile nastavíte počáteční stav objektu, jste připraveni přejít k dalšímu kroku - vytvoření animace lesku.
Krok 4: vytvořte druhý stav objektu
Chcete-li vytvořit animace lesku, musíte vytvořit druhý stav objektu, který se bude lišit od prvního.
Chcete-li to provést, vyberte objekt, na který chcete použít animaci, a v panelu vrstev klikněte pravým tlačítkem na objekt a vyberte "Duplikovat vrstvu".
Výsledný duplikát objektu bude druhým stavem. Můžete změnit jeho vzhled, například změnit barvu nebo velikost. Tím se vytvoří efekt dynamické změny objektu.
Jakmile provedete změny ve druhém stavu objektu, ujistěte se, že jsou umístěny v panelu vrstev jeden nad druhým. Chcete-li změnit pořadí vrstev, můžete je přetáhnout na správné místo.
Nyní, když máte dva stavy objektu, můžete v dalším kroku přejít k vytvoření animace lesku.