Jak vytvořit SVG animaci pomocí CSS
Animaci SVG lze provést pomocí nativních prvků, jako je například
CSS animace by také mohla být alternativním způsobem použití JavaScript knihovny jako SnapSVG. V tomto příspěvku uvidíme, co můžeme dodat s CSS Animation v SVG.
1. Vytvoření obrazců
Nejprve budeme muset nakreslit tvary a objekty, které chceme animovat. Můžete použít aplikace jako Skica, Adobe Illustrator, nebo Inkscape vytvořit.
Pro tento příklad jsem nakreslil jako pozadí zataženou oblohu a raketová loď, která střílela nahoru, zahrnovala plameny:
Po dokončení s výkresem musíme exportovat každý objekt, který jsme vytvořili, do SVG.
Jako příklad pro tento krok budu používat Sketch. Vyberte objekt, který chcete změnit do formátu SVG. V pravém dolním rohu okna klikněte Proveďte exportovatelné. Zvolte formát SVG a klepněte na příkaz Exportovat object-name. Musíte to udělat jeden objekt najednou.
2. Vložte SVG do HTML
Když otevřete soubor SVG v editoru kódů, zjistíte, že kódy SVG jsou poměrně chaotické. Před nasazením souboru SVG tedy kód upravíme a optimalizujeme pomocí tohoto nástroje příkazového řádku nazvaného SVGO.
Zahájení Terminál nebo Příkazový řádek, a nainstalovat SVGO pomocí tohoto příkazového řádku:
[sudo] npm install -g svgo
Přejděte na příkaz, svgo, pomocí SVG souboru --pěkný vytvořit čitelný SVG kód:
svgo rocket.svg --pretty
Pokud máte v adresáři více SVG, můžete je všechny optimalizovat najednou. Za předpokladu, že adresář je pojmenován /snímky, pak z rodičovského adresáře použijte tento příkaz:
svgo -f images --pretty
Podívejme se na rozdíl před a po použití SVGO.
Zkopírujte kód do souboru SVG a vložte jej do souboru HTML. Budeme pracovat na pracovním prostoru o šířce 800px 600px, takže nezapomeňte definovat šířka na element SVG.
SVG je nastaven v HTML souboru. Pro každý objekt budeme muset definovat ID, abychom je mohli později vybrat v CSS.
Pro tento tutoriál potřebujeme definovat ID rakety a plameny a některé mraky. Aby objekty mohly zpracovat fázi animace později, musíme přidat id - můžete také použít třída - ke každému objektu. V této fázi bude kód vypadat takto:
3. Animujte pomocí CSS
Pojďme se pobavit. Plán je posílit raketu do vesmíru. Raketa je rozdělena do dvou skupin; samotnou raketu a plamen.
Nejprve umístíme raketu doprostřed pracovního prostoru takto:
#rocket transform: translate (260px, 200px);
To, co vidíte, je toto:
Aby raketa vypadala tak, že jde nahoru, musíme vytvořit iluzi padajících mraků. CSS, který používáme, je následující:
# cloud1 animace: pád 1s lineární nekonečno; @keyframes spadají z transform: translateY (-100px); to transform: translateY (1000px)
Aby to vypadalo ještě realističtěji, pojďme oživit čtyři mraky a udělat je “podzim” při různých rychlostech. Rovněž je umístíme odlišně od osy X..
Druhý mrak bude mít takový kód:
# cloud2 animace: pád-2 2s lineární nekonečno; @keyframes podzim-2 z transform: překládat (200px, -100px); to transform: překládat (200px, 1000px)
Všimněte si, že jsme přesunuli cloud # 2 trochu doprava, o 200px s přeložit. V této fázi by výsledek měl vypadat takto.
Dále nechme raketu ožít. Přidělíme klíčový snímek animace následujícím způsobem:
#rocket animace: vyskakovací okno 1 usnadňuje nekonečno; @keyframes popup 0% transform: přeložit (260px, 200px); 50% transformace: překlad (260px, 240px); 100% transform: translate (260px, 200px);
A přidejte animaci také do plamene rakety:
#flame animation: shake .2s lineární nekonečno; @keyframes shake 0% transformace: přeložit (55px, 135px) otočit (7deg); 20% transformace: překlad (55px, 135px) rotace (0deg); 40% transformace: překlad (55px, 135px) rotace (-7deg); 60% transformace: překlad (55px, 135px) rotace (0deg); 100% transformace: překlad (55px, 135px) rotace (0deg);
Že jo! Nyní, když jsou všechny naše kódy nastaveny, by animace měla fungovat na našem SVG.
Podívejte se na raketové tryskání do vesmíru.
Závěrečná myšlenka
Animace není nejjednodušší funkcí v CSS k pochopení. Doufejme však, že tento návod najdete jako dobrý výchozí bod k dalšímu prozkoumání CSS animace na SVG; budete překvapeni, co se dá s CSS animací dosáhnout.
Pokud chcete začít se základy, můžete začít zde s tímto příspěvkem: Pohled do: Škálovatelná vektorová grafika (SVG) Animace nebo sledovat zbytek série SVG.
- Zobrazit ukázku
- Stáhněte si zdroj
