Accentsconagua
Donovan Hutchinson
Donovan è uno sviluppatore front-end di Dublino con la passione per i CSS, l'animazione e il divertimento sul web.
Share
Cosa starai creandoQuando parliamo di usare l'animazione, discutiamo spesso dei modi pratici in cui possiamo creare transizioni, animazioni e così via. L'animazione è un modo potente per far risaltare i nostri progetti, ma piuttosto che concentrarsi su come funzionano le singole animazioni, il modo in cui più animazioni si combinano può creare qualcosa di ancora più potente.
I 12 principi base di animazione della Disney definiscono "Appeal" come corrispondente a "carisma in un attore". È così che il realismo, lo stile e la sostanza dell'animazione contribuiscono a creare un senso di carattere che gli spettatori trovano reale e interessante.
The Illusion of Life: Disney Animation in cui sono esposti i 12 principi base dell'animazioneÈ una tecnica usata con grande effetto da Stripe. Stripe è un processore di pagamenti e fornisce strumenti per l'incorporamento di moduli di pagamento nei siti. Queste forme sono famose per essere ben progettate, in particolare per il loro uso dell'animazione.
In questo articolo parlerò di come è possibile utilizzare più animazioni per creare un effetto più della somma delle sue parti e mostrare come è possibile utilizzare questa conoscenza in modo pratico.
In questo esempio useremo l'animazione per presentare una carta con dettagli e link a web e altri account social.
Quando viene premuto un pulsante, verrà visualizzata una scheda con alcuni Seguire opzioni. Piuttosto che usare una semplice finestra modale, useremo l'animazione per renderla più interessante.
Per renderlo attraente, ci sono diverse animazioni che si svolgono. I vari pezzi si animano e introducono ogni elemento in ordine. Questo aiuta lo spettatore a capire la connessione tra ciò che hanno premuto e il contenuto e l'ordine delle animazioni aiuta a disegnare l'occhio sulle icone di follow.
Per iniziare abbiamo bisogno di un pulsante per premere e una carta da mostrare. La carta verrà nascosta quando viene mostrato per la prima volta il contenuto.
Donovan Hutchinson
Donovan è uno sviluppatore front-end di Dublino con la passione per i CSS, l'animazione e il divertimento sul web.
Il pulsante è un'immagine e del testo. Se premuto, mostrerà la carta. La carta è composta da quattro sezioni; un pulsante di chiusura, una sezione di dettagli, un headshot e una barra delle icone contenente icone sociali. Per questo esempio utilizziamo icone SVG inline prese dalla raccolta Entypo.
Prima di entrare nelle animazioni, aggiungiamo uno stile al pulsante e alla carta. Innanzitutto, il pulsante:
.show-card background: #fff; border-radius: 4em; border: 0.25em solid # 1fa756; colore: # 1fa756; font-size: 18px; a sinistra: 50%; altezza della linea: 1,5; imbottitura: 1em 1em 1em 4em; posizione: assoluta; superiore: 50%; transform: translate (-50%, -50%); contorni: nessuno; .show-card img border-radius: 50%; a sinistra: 0.3em; posizione: assoluta; sopra: 0,25em; larghezza: 3em;
Nota: abbiamo aggiunto un contorni: nessuno; al .show-carta elemento perché alcuni browser aggiungono un bagliore particolare agli stati di messa a fuoco dei pulsanti (che non vogliamo):
Quindi modificheremo la scheda e ognuna delle sezioni in essa contenute.
.carta fondo: calc (50% - 8em); display: nessuno; altezza: 16em; a sinistra: calc (50% - 10em); posizione: assoluta; transizione: tutti 0.4s 0.4s cubico-bezier (.5, .2, .43,1.33); larghezza: 20em; .close color: #aaa; cursore: puntatore; altezza: 1em; opacità: 0; posizione: assoluta; a destra: 0,5em; inizio: 0.5em; larghezza: 1em; z-index: 10; .dettagli posizione: assoluta; fondo: 2.5em; sfondo: #fff; border-radius: 0.25em; altezza: 0; overflow: nascosto; allineamento del testo: centro; larghezza: 20em; .name color: # 333; font-weight: bold; margine: 3em 0 0; opacità: 0; .description color: # 666; dimensione carattere: 1em; font-weight: 200; altezza della linea: 1,5; margine: 0,75em 2em 2em; opacità: 0; .headshot img border-radius: 50%; border: 0.5em solid #fff; blocco di visualizzazione; altezza: 6em; margine: -3em auto 0.5em; opacità: 0; larghezza: 6em; .icon-bar background: # 1fa756; border-radius: 0.25em; a sinistra: -1em; posizione: assoluta; a destra: -1em; inizio: 13em; .icon-bar ul display: flex; flex-display: colonna; flex-wrap: nowrap; padding: 0; .icon-bar li display: inline-block; font-size: 2em; opacità: 0; riempimento: 0 1em; larghezza: 33%; .icon-bar a color: #fff; decorazione del testo: nessuna;
Si noti che abbiamo impostato questa carta su display: nessuno inizialmente. Quindi controlleremo ciò usando JavaScript.
Piuttosto che immergerti nel CSS, per prima cosa imposteremo l'azione di base per mostrare e nascondere le informazioni di contatto. Questo farà uso di un piccolo JavaScript (e in questo caso jQuery) per aggiungere e rimuovere classi a seconda di cosa viene cliccato:
// Mostra la carta facendo clic sul pulsante $ ('. Show-card'). Click (function (e) $ ('. Card'). AddClass ('show'). Css ('display', 'block') ; $ ('. show-card'). addClass ('nascondi');); // Nascondere la carta cliccando sulla "x" $ ('. Carta .close'). Click (function (e) $ ('. Card'). Css ('display', 'none');); Ora dovremmo essere in grado di mostrare e nascondere la carta usando jQuery e il display Proprietà CSS.
Vedi l'esempio base mostra e nascondi qui:
Con il layout in atto, dobbiamo aggiungere alcuni stili aggiuntivi per nascondere i vari elementi in modo che possiamo animarli in vista.
.chiudi, .name, .description, .headshot img, .icon-bar li opacità: 0; .dettagli altezza: 0;
Questi elementi avranno un ritardo prima che la loro animazione abbia effetto, quindi devono essere inizialmente fuori dalla vista.
Con il meccanismo in atto per mostrare e nascondere la carta, possiamo iniziare ad allegare animazioni. Il JavaScript sopra aggiunge a mostrare indica la carta in mostra e possiamo allegare animazioni a questa classe che introdurrà le singole parti della carta.
Per fare questo useremo il CSS animazione proprietà e insiemi di i fotogrammi chiave.
È utile creare animazioni generiche nei CSS e riutilizzarle. Animazioni semplici come la dissolvenza in entrata e in uscita possono essere definite una sola volta e utilizzate in più posizioni.
Per mostrare come i fotogrammi chiave sono definiti, creiamo le animazioni di dissolvenza in entrata e in uscita.
@keyframes fade-in 0% opacità: 0; 100% opacità: 1; @keyframes fade-out 0% opacity: 1; 100% opacità: 0;
I fotogrammi chiave sono una serie di passaggi, definiti come percentuali. Possono essere un numero qualsiasi di passi, ma nel nostro esempio definiamo solo i fotogrammi chiave iniziale (0%) e fine (100%). Nel fade-in iniziamo senza opacità (0) e terminiamo in piena opacità (1). Il dissolvenza l'animazione fa il contrario.
Possiamo usare il animazione proprietà per applicare queste animazioni di dissolvenza al pulsante quando viene mostrato e nascosto.
.show-card animation: dissolvenza in avanti di 0.4s 1s in uscita; .show-card.hide animation: svincolo in avanti di fade-out 0.4s;
La stenografia dell'animazione qui dice alla carta di usare il fade-in animazione, della durata di 0,4 secondi con un ritardo di 1 secondo. L'animazione verrà riprodotta una volta e interrotta alla fine (in avanti) e utilizzerà il pulsante facilità-out funzione di temporizzazione.
Quando il nascondere la classe viene applicata al pulsante, il dissolvenza l'animazione ha effetto.
La prima parte che presenteremo è la barra delle icone. Dal momento che questo è dove i collegamenti saranno, vogliamo che si distingua e sia la prima cosa che la gente nota.
Durante l'animazione possiamo creare effetti interessanti usando la proprietà della funzione di temporizzazione. In questo caso useremo a cubico-Bezier funzione di temporizzazione per aggiungere alcuni "rimbalzi" quando appare la barra delle icone.
Per prima cosa creeremo alcuni semplici fotogrammi chiave per far sì che la barra inizi piccola e cresca in altezza.
@keyframes show-icon-bar 0% height: 0; 100% height: 4.5em;
Ora possiamo applicare questo set di fotogrammi chiave alla barra delle icone quando mostrare la classe viene aggiunta alla carta.
.card.show .icon-bar animazione: mostra-icona-barra .5s inoltra cubic-bezier (.64,1.87, .64, .64);
L'effetto rimbalzante è creato dall'uso del cubico-Bezier funzione di temporizzazione. Le funzioni di cronometraggio descrivono i cambiamenti di velocità attraverso un'animazione e possono essere progettati per sovrascrivere l'inizio o la fine di un'animazione. Questa animazione va un po 'oltre, quindi corregge, creando un rimbalzo.
Con la barra delle icone introdotta, è necessario animare la sezione che contiene i dettagli e il colpo alla testa. Vorremmo che questa sezione appaia dopo che è stata introdotta la barra delle icone. Per raggiungere questo obiettivo useremo il animazione ritardo proprietà.
.card.show .details animation: show-detail-container 0.7s 0.5s inoltra cubic-bezier (.54, -0.38, .34,1.42);
L'animazione applicata a dettagli la sezione è impostata per avere a durata di 0,7 secondi e a ritardo di 0,5 secondi. Ciò significa che l'animazione non inizierà fino a quando non sarà stata introdotta la barra delle icone.
Usiamo anche una funzione di temporizzazione di Bezier cubica qui per dargli un rimbalzo.
Successivamente definiamo i fotogrammi chiave per l'animazione di questo contenitore.
@keyframes show-detail-container 0% height: 0; 100% height: 13.5em;
Il show-dettaglio-contenitore i fotogrammi chiave di animazione inizia con il contenitore invisibile con un'altezza pari a zero e si anima fino alla massima altezza. La funzione di temporizzazione di Bezier cubico rende poi l'animazione eccessiva un po 'per dargli un rimbalzo.
Le animazioni multiple possono essere applicate in una singola proprietà. Finché le animazioni non sono in conflitto tra loro (provando ad animare la stessa proprietà), possono essere utilizzate per aggiungere sfumature a un'animazione. Le animazioni multiple sono definite come singole animazioni, ma separate da virgole.
In questo caso stiamo per sbiadire il headshot, il nome e il contenuto della descrizione e allo stesso tempo usare a pop-in funzione per far sembrare che appaiano da lontano.
Se avessimo usato una sola animazione, con una funzione di temporizzazione di Bezier cubica, l'effetto di dissolvenza sembrerebbe rimbalzare e apparire strano. Invece, avremo la dissolvenza utilizzare una funzione di temporizzazione lineare e lo zoom avrà l'effetto di rimbalzo.
Per prima cosa definiamo il pop-in i fotogrammi chiave.
@keyframes pop-in 0% transform: scale (0.7); 100% transform: scale (1);
Questo usa il scala Trasforma in modo che ogni elemento cominci più piccolo e scala alle dimensioni normali.
Portiamo il contenuto. Ogni elemento ha due animazioni e ciascuno degli elementi ha un ritardo di animazione leggermente più lungo per scaglionare il loro aspetto.
.card.show .headshot img animation: in avanti di 0.4s 1.2s in avanti, in entrata di 0.6s 1.2s in entrata cubic-bezier (.64,1.87, .64, .64); .card.show .name animation: in avanti di 0.3s 1.3s in avanti, in entrata 0.3s di 1.3s in avanti cubic-bezier (.64,1.87, .64, .64); .card.show .description animation: in avanti di 0.3s in 0.3 secondi, in avanti in 0.3s di 0.4s in entrata cubico-bezier (.64,1.87, .64, .64);
L'animazione icona chiusa fa uso di fade-in fotogrammi chiave che abbiamo definito in precedenza.
.card.show .close animation: fades-in 0.3s 1.3s forward;
Abbiamo solo bisogno di mostrare le icone ora. Quando si presentano animazioni, l'ultima cosa animata è dove l'attenzione dello spettatore finirà. Ciò significa che l'occhio dello spettatore seguirà l'animazione e finirà di guardare le icone che vorremmo che selezionassero.
Utilizzeremo nuovamente la proprietà del ritardo dell'animazione per garantire che vengano introdotte per ultime. Per prima cosa definiamo i fotogrammi chiave di un'animazione per le icone:
@keyframes show-icon 0% opacity: 0; transform: rotateZ (-40deg); 100% opacità: 1; transform: ruotareZ (0);
Ogni icona gira un po 'mentre si dissolvono. Possiamo ora associare questa animazione a ciascuna delle icone, utilizzando un ritardo su ciascuna per scaglionarle.
.card.show .icon-bar li animazione: mostra-icona 0.5s in avanti cubic-bezier (.64,1.87, .64, .64); .card.show .icon-bar li: nth-child (1) ritardo di animazione: 1.8s; .card.show .icon-bar li: nth-child (2) animation-delay: 1.9s; .card.show .icon-bar li: nth-child (3) animation-delay: 2s;
Metti tutto insieme e ora abbiamo una carta che appare bene quando il pulsante è selezionato.
Prima che possiamo finire, dobbiamo aggiungere un nascondere agire sul pulsante Chiudi e animare la carta. Per prima cosa aggiorneremo il codice JavaScript. Premendo il tasto vicino icona, il codice JavaScript attende un secondo prima di rimuovere la scheda con display: nessuno.
$ ('. show-card'). click (function (e) $ ('. card'). addClass ('show'). css ('display', 'block'); $ ('. show-card ') .addClass (' nascondi ');); $ ('. card .close'). click (function (e) $ ('. card'). addClass ('nascondi'); setTimeout (function () $ ('. card'). css ('display ',' none '). removeClass (' show '). removeClass (' nascondi ');, 1000); $ ('. show-card '). removeClass (' nascondi ');); Questo ci dà un secondo per animare la carta: ce la faremo cadere dalla parte inferiore dello schermo. I keyframe che raggiungono questo sono i seguenti:
@keyframes drop-card 100% bottom: -100%; transform: rotateZ (20deg); opacità: 0;
Applichiamo quindi questa come animazione alla carta.
.card.hide animation: drop-card 1s in avanti cubico-bezier (.54, -0.38, .34,1.42);
Mettendo tutto insieme, puoi vedere il risultato qui.
Le animazioni sono ben supportate tra i browser. A seconda del pubblico, dovrebbero funzionare nella maggior parte delle situazioni. Vale la pena assicurarsi che le funzioni di visualizzazione e Nascondi di base funzionino e qualsiasi animazione sia aggiunta come miglioramento progressivo.
Attraverso l'uso di più animazioni, e in particolare il animazione ritardo proprietà, abbiamo preso quello che avrebbe potuto essere un widget molto semplice e reso più accattivante. L'animazione guida lo spettatore attraverso ciascuno degli elementi e li indirizza verso gli inviti all'azione.
L'animazione può essere un ottimo modo per comunicare all'interno dei tuoi progetti. Questa comunicazione aiuta i visitatori a comprendere le tue intenzioni e a migliorare la credibilità e la fiducia nella qualità del tuo lavoro.
