Share
Abbiamo creato guide complete per aiutarti a imparare CSS e animare i CSS, se hai appena iniziato con le basi o se desideri esplorare tecniche più avanzate.
Il movimento è diventato una parte molto importante del settore del web design negli ultimi anni. Il movimento e l'animazione aggiungono livelli di dimensioni all'interfaccia, aiutando l'utente, offrendo feedback, delizia e coinvolgenti lungo il percorso.
In questo articolo, descriverò le fasi di apprendimento dell'animazione per il Web, da tutto ciò che riguarda le transizioni semplici, le animazioni più complesse e le risorse utili. Ci saranno alcuni esercizi pratici e interattivi per fare punti a casa. Alla fine, avrai una solida idea dell'attuale panorama dell'animazione web e di come farcela.
Vedremo quanto segue:
La disciplina del web design è in continua evoluzione e un aspetto che è emerso negli ultimi anni è la capacità di animare. I browser sono diventati più capaci, i processori più veloci e i dispositivi portatili hanno aperto la strada ai "gesti"; strisciare, pizzicare e forzare il contatto.
Motion offre alle interfacce una serie di elementi che migliorano l'esperienza dell'utente, tra cui:
Il movimento migliora l'esperienza dell'utente e dà vita al web. Tenendo presente tutto questo, è importante che, come progettista di interfacce, si tenga conto dell'animazione. Andiamo con le basi!
O vai direttamente al corso di animazione pratica di Craig Campbell!
Le transizioni CSS sono spesso la porta di un web designer nel mondo del movimento. Istruiscono il browser a prendere uno stato iniziale di un elemento, quindi uno stato finale e una transizione uniforme tra i due. La sintassi è relativamente diretta, comprendente quattro proprietà e una versione abbreviata:
Accentsconagua
transizione immobilidurata della transizionetransizione-timing-functiontransizione ritardoIniziamo con un pulsante. In questo esempio abbiamo un pulsante con alcuni stili di base per far sembrare che sia sollevato un po 'dalla pagina. Per impostazione predefinita, se si passa il mouse su di esso, cambia colore. Quindi se fai clic su di esso, sembra essere premuto verso il basso. Lo abbiamo fatto usando il sfondo, il posizione-top, e il posizione a sinistra proprietà, ma il cambiamento in ciascun caso è istantaneo:
Ora rendiamo l'effetto più sottile aggiungendo a transizione al .pulsante elemento. Aggiungendo, per esempio, transizione: tutti gli 1; farà in modo che tutti le modifiche alle proprietà verranno gradualmente trasferite nel corso di 1 secondo.
Decommenta la prima regola nel pannello CSS e vedrai che ha effetto:
Ora hai visto che funziona, prova invece a rimuovere la seconda regola. Nel secondo esempio abbiamo elencato singolarmente ciascuna delle proprietà che cambiano, così possiamo definire diverse velocità di transizione per ciascuna di esse.
Infine, prova a decommentare il terzo esempio, dove vedrai che abbiamo aggiunto funzioni di temporizzazione pure. Questi influenzano il tasso di transizione: ne parleremo più a breve.
Con le transizioni CSS sotto la cintura, è il momento di prendere le cose su una tacca. L'animazione dei fotogrammi chiave CSS offre un controllo molto maggiore, consentendo di specificare le modifiche lungo tutta la sequenza temporale. Sono necessari due passaggi per l'animazione dei fotogrammi chiave; definendo i keyframe stessi e assegnando l'animazione al tuo elemento di scelta.
Diciamo che iniziamo con una palla.
Ora possiamo definire alcuni fotogrammi chiave, impostando a a partire dal stato, e a a stato. Qui stiamo dicendo che è sinistra la proprietà position inizierà al 5%, animando fino all'85%, spostando efficacemente la palla sullo schermo.
@keyframes move from left: 5%; a a sinistra: 85%;
Puoi vedere che abbiamo annidato il a partire dal e a all'interno di a @keyframes dichiarazione. E abbiamo chiamato la nostra animazione mossa. Ora dobbiamo assegnare questa animazione alla nostra palla, che facciamo così:
.palla animazione: movimento di 1s;
Questo è implementato nella sua forma più semplice, stenografia. Dobbiamo definire per quanto tempo vogliamo che duri l'animazione e quale animazione stiamo applicando. Ora, quando carichiamo la demo, vedremo che l'animazione ha effetto:
Nota: l'animazione si attiva al caricamento della pagina, quindi dovrai colpire replica pulsante nell'angolo di questa penna incorporata per vedere che succede qualcosa.
Andando oltre semplice a partire dal e a fasi, possiamo definire punti lungo tutta la linea del tempo utilizzando le percentuali. Usare lo 0% e il 100% ci darebbe esattamente lo stesso risultato di prima:
@keyframes move 0% left: 5%; 100% a sinistra: 85%;
Aggiungiamo un ulteriore passaggio nel mezzo e riportiamo la palla nella sua posizione iniziale. Faremo anche il conteggio delle iterazioni dell'animazione infinito, quindi continua a girare. Modifica i valori nella penna qui sotto e vederli hanno effetto:
È possibile aggiungere più animazioni a un singolo elemento, modificare la direzione dell'animazione e modificare completamente i tempi. Dai un'occhiata a queste risorse per saperne di più!
Il movimento porta alla vita oggetti statici e la differenza autentico il movimento può fare a questo è immenso. Il movimento dà un oggetto in massa, lo colloca nello spazio e la fisica del mondo reale si applica improvvisamente ad esso. Se un oggetto si muove in un modo che ci è familiare, siamo molto più propensi a fare quella connessione emotiva importantissima. È la differenza tra un cerchio che si muove su e giù e una palla che rimbalza:
La differenza tra questi due è chiara (anche se il rimbalzo è lontano dall'essere perfetto). Imparare a dare autenticità alla tua animazione è fondamentale.
"La maggior parte dell'azione naturale tende a seguire una traiettoria arcuata, e l'animazione dovrebbe aderire a questo principio seguendo gli" archi "impliciti per un maggiore realismo." - Dodici principi di base dell'animazione
Abbiamo già "attenuato" un paio di volte in questo articolo; è la velocità con cui qualcosa si muove e può essere espressa come una curva lungo due assi. In CSS ci sono alcune funzioni di temporizzazione incorporate che puoi usare con le loro parole chiave (lineare, facilità in, facilità in-out ecc.) ma è possibile descrivere questi tempi in modo più preciso con a funzione di bezier cubico, che assomiglia a questo:
.1, .25, .1,1Quando il tempo si sposta costantemente lungo l'asse x, la velocità di movimento si accelera e rallenta lungo l'asse y. Questo esempio sopra è usato sulla nostra palla che rimbalza da prima; puoi immaginare che la palla si muova rapidamente verso l'alto, poi rallenta quando raggiunge il suo apice. Dai un'occhiata a questa curva su cubic-bezier.com per aiutarti a visualizzarla.
La curva è controllata dalle due maniglie (che ti saranno familiari se hai mai usato lo strumento penna in Adobe Illustrator o Sketch) e la funzione cubica di bezier che possiamo usare in CSS riflette quelle maniglie. Quindi, la nostra funzione assomiglia a:
cubi-Bezier (.1, .25, .1,1)
Ci sono quattro valori, ognuno dei quali va (per argomento) da 0 a 1 Rappresentano:
Capire come funzionano le funzioni di bezier migliorerà drasticamente le tue animazioni, in particolare se stai mirando autentico movimento.
Codificare l'animazione CSS di buona qualità a mano può essere difficile, ma ci sono un certo numero di librerie disponibili che fanno il lavoro più impegnativo per te. Animate.css, di Dan Eden, è un foglio di stile pieno di animazioni basate su fotogrammi chiave, tutte con nomi di classi personalizzate, pronte per l'uso.
SVG (Scalable Vector Graphics) è diventato il migliore amico del web designer negli ultimi anni, offrendoci grafica nitida, pagine più leggere ed elementi animabili. Alcune delle cose che abbiamo discusso possono essere applicate direttamente agli elementi SVG, ma molte proprietà si comportano diversamente.
Ecco un SVG in linea con una transizione applicata al suo colore al passaggio del mouse. Tuttavia, noterai che stiamo usando il riempire proprietà, non il colore di sfondo che ci aspetteremmo con un elemento HTML:
SVG può essere animato con CSS, proprio come abbiamo discusso nel resto di questo articolo. Se puoi trasformarlo o tradurlo con HTML, puoi fare lo stesso con SVG.
Ma SVG può anche essere manipolato tramite SMIL (Synchronized Multimedia Integration Language) che ti permette di usare cose come la
Questo è un cerchio, contenente un cx coordinare in questo caso), da una posizione di 50px a 400px, durata di 2 secondi e ripetizione indefinitamente.
SMIL è un set di strumenti molto potente, inizia a leggere sotto!
Adoro l'idea di animare SVG ma non sono sicuro che cosa animare? Guarda i servizi di illustrazione vettoriale su Envato Studio e guarda cosa c'è in offerta!
Caratteri, elementi e oggetti pronti per l'animazione videoMolti sviluppatori front-end prima giocano con JavaScript (o jQuery) aggiungendo l'animazione alle pagine web. Dove il supporto del browser per le alternative CSS è approssimativo, JS è una buona scommessa.
La libreria dell'interfaccia utente di jQuery viene fornita con una serie di helper UI standard, incluso il effetto() metodo, mostrato di seguito (scegli un effetto dal menu a discesa e osserva come viene applicato al contenuto:
Oltre a ciò, JavaScript (nelle mani giuste, non mie) può offrire grave animazione, e dal momento che Adobe Flash ha ufficialmente consegnato le sue dimissioni, sono emerse alcune librerie JavaScript brillanti. La piattaforma di animazione di GreenSock (GSAP) è probabilmente lo sviluppatore più potente di tutta una serie di strumenti basati su timeline e tween.
Dai un'occhiata al corso per principianti e scopri come gestisci il GSAP!
Sono finiti i tempi in cui i risultati della progettazione statica erano sufficienti: le immagini e i diagrammi di flusso non comunicavano abbastanza informazioni. Al giorno d'oggi i clienti accorti vogliono vedere e sentire ciò che si sta progettando, sperimentare il movimento, motivo per cui i prototipi rispondono a molte più domande.
"Se un'immagine vale 1000 parole, un prototipo vale 1000 incontri." -sando su @ideo
- John Maeda (@johnmaeda), 5 ottobre 2014
I prototipi possono essere piuttosto grezzi o riflettere il prodotto finale in modo abbastanza accurato, ma ovunque essi cadano su questa scala, la loro creazione deve essere efficiente. Per quanto riguarda il movimento e l'animazione, ci sono un certo numero di applicazioni che ti aiutano a comunicare i tuoi progetti.
Adobe Animate è Flash per la prossima generazione e offre strumenti di animazione avanzati. Adobe After Effects è uno strumento di produzione video, ma offre anche un movimento basato sulla timeline avanzato. Ma poi ci sono applicazioni più semplici, come Principle per Mac e persino Keynote:
Keynote Motion Graphic Experiment, di Linda DongUna volta che il motion design è diventato parte di ciò che fai, trovare gli strumenti migliori per mostrare al mondo è un passo importante!
E lì ce l'abbiamo! Questa guida avrebbe dovuto darti una solida conoscenza del panorama dell'animazione web così com'è oggi. Con tutte queste risorse di apprendimento alla portata di tutti, sarai dotato di una nuova serie di abilità per esplorare il mondo del motion design.
Spero che tu l'abbia trovato utile. Si prega di condividere i propri suggerimenti e risorse nei commenti qui sotto, o sul forum della community Envato.
