Come creare un'animazione SVG usando i CSS
L'animazione di SVG può essere eseguita tramite elementi nativi come
L'animazione CSS potrebbe anche essere un modo alternativo di utilizzare la libreria JavaScript come SnapSVG. In questo post vedremo cosa possiamo offrire con CSS Animation in SVG.
1. Creazione delle forme
Prima di tutto, dovremo disegnare le forme e gli oggetti che vogliamo animare. Puoi usare applicazioni come Schizzo, Adobe Illustrator, o Inkscape per crearne uno.
Per questo esempio, ho disegnato un cielo nuvoloso come sfondo e una nave spaziale che spara verso l'alto, incluse le fiamme:
Una volta fatto con il disegno, abbiamo bisogno di esportare ogni oggetto che abbiamo creato in SVG.
Userò Sketch come esempio per questo passaggio. Seleziona l'oggetto che vuoi trasformare in formato SVG. In basso a destra nella finestra, fai clic su Esportabile. Scegli il formato SVG, quindi fai clic su Esporta nome-oggetto. Devi fare questo un oggetto alla volta.
2. Inserisci lo SVG in HTML
Quando apri il file SVG in un editor di codice, scoprirai che i codici SVG sono piuttosto disordinati. Quindi, prima di distribuire il file SVG, riordiniamo il codice e lo ottimizziamo con questo strumento a riga di comando chiamato SVGO.
Lanciare terminale o Prompt dei comandi, e installare SVGO con questa riga di comando:
[sudo] npm install -g svgo
Tun il comando, SVGO, sul file SVG usando --bella per produrre codice SVG leggibile:
svgo rocket.svg --pretty
Se sono presenti più file SVG in una directory, è possibile ottimizzarli tutti insieme, contemporaneamente. Supponendo che la directory sia nominata /immagini, quindi dalla directory principale utilizzare questo comando:
svgo -f immagini --pretty
Vediamo la differenza prima e dopo l'uso di SVGO.
Copia il codice all'interno del file SVG e incollalo in un file HTML. Lavoreremo su un'area di lavoro di 800 px per 600 px di larghezza, quindi non dimentichiamo di definire il file larghezza sull'elemento SVG.
L'SVG è impostato nel file HTML. Dovremo definire un ID per ogni oggetto, quindi possiamo selezionarli in CSS più tardi.
Per questo tutorial, abbiamo bisogno di definire l'ID per il razzo e le fiamme, e alcune delle nuvole. Affinché gli oggetti possano gestire la fase di animazione in un secondo momento, dobbiamo aggiungere id - puoi anche usare classe - a ciascun oggetto. A questo punto, il codice sarà simile a questo:
3. Animare usando i CSS
Ora divertiamoci. Il piano è di aumentare il razzo nello spazio. Il razzo è diviso in due gruppi; il razzo stesso e la fiamma.
Prima di tutto, posizioniamo il razzo nel mezzo dello spazio di lavoro, come segue:
#rocket transform: translate (260px, 200px);
Quello che vedi è questo:
Ora per far sembrare che il razzo stia andando verso l'alto, dobbiamo creare l'illusione che le nuvole cadano. Il CSS che usiamo per questo è:
# cloud1 animation: fall 1s linear infinite; @keyframes fall from transform: translateY (-100px); a transform: translateY (1000px)
Per renderlo ancora più realistico, animiamo quattro nuvole e realizzale “autunno” a diverse velocità. Li posizioneremo anche in modo diverso rispetto all'asse X..
Il secondo cloud avrà un codice come questo:
# cloud2 animation: fall-2 2s linear infinite; @keyframes fall-2 from transform: translate (200px, -100px); a transform: translate (200px, 1000px)
Notare che abbiamo spostato il cloud # 2 un po 'a destra, vicino 200px con tradurre. In questa fase, il risultato dovrebbe essere simile a questo.
Quindi, facciamo prendere vita al razzo. Assegneremo un fotogramma chiave di animazione, come segue:
#rocket animation: popup 1s facilità infinita; @keyframes popup 0% transform: translate (260px, 200px); 50% transform: translate (260px, 240px); 100% transform: translate (260px, 200px);
E aggiungi anche l'animazione alla fiamma del razzo:
#flame animation: shake .2s linear infinite; @keyframes shake 0% transform: translate (55px, 135px) ruota (7deg); 20% transform: translate (55px, 135px) ruota (0deg); 40% transform: translate (55px, 135px) ruota (-7deg); 60% transform: translate (55px, 135px) ruota (0deg); 100% transform: translate (55px, 135px) ruota (0deg);
Destra! Ora che i nostri codici sono tutti impostati, l'animazione dovrebbe funzionare sul nostro SVG.
Dai un'occhiata al nostro razzo che esplode nello spazio.
Pensiero finale
L'animazione non è la caratteristica più semplice da cogliere in CSS. Ma si spera che questo tutorial sia un buon punto di partenza per esplorare ulteriormente CSS Animation su SVG; Saresti sorpreso di sapere cosa si può ottenere con l'animazione CSS a portata di mano.
Se vuoi iniziare con le basi, puoi iniziare qui con questo post: A Look Into: Animazione SVG (Scalable Vector Graphics) o seguire il resto della serie SVG.
- Visualizza la demo
- Scarica fonte
