Animazione CSS3 - Creazione di un fan-out con effetto bounce utilizzando la curva di Bezier

Lo sapevi trasformazioni geometriche aggiunto agli elementi HTML con il trasformareLe proprietà CSS come scala, inclinazione e rotazione possono essere animate? Possono essere animati usando il transizione proprietà e @keyframes le animazioni, ma ciò che è ancora più interessante è che le trasformazioni animate possono essere prese di pari passo con l'aggiunta di un po ' effetto rimbalzo, usando il cubi-Bezier () funzione di temporizzazione.

In poche parole, cubi-Bezier () (in CSS) è un funzione di temporizzazione per le transizioni. Specifica la velocità della transizione e, tra le altre cose, può anche essere utilizzata crea effetti di rimbalzo nelle animazioni.

In questo post, per prima cosa andiamo a crea una semplice animazione di trasformazione a cui più tardi aggiungere un cubi-Bezier () funzione di temporizzazione. Alla fine di questo tutorial, capirai come creare un'animazione che usi sia un effetto fan-out che un rimbalzo. Ecco il risultato finale (clicca per vedere l'effetto).

La demo è ispirata da questo bellissimo Dribbble girato da Christopher Jones su un indicatore di posizione animato.

1. Creare le foglie

La forma dell'indicatore di posizione è composta da cinque foglie (chiamiamole). Per creare il forma ovale di una foglia, usiamo il border-radius Proprietà CSS. Il border-radius di un singolo angolo composto da due raggi, orizzontale e verticale, come mostrato di seguito.

Il border-radius la proprietà ha molte sintassi diverse. Useremo uno più complicato per la forma del marcatore:

 border-radius: htl htr hbr hbl / vtl vtr vbr vbl; 

In questa sintassi, i raggi orizzontale e verticale sono raggruppati insieme; h & v rappresentano i raggi orizzontale e verticale, e t, l, B & r rappresentano gli angoli superiore, sinistro, inferiore e destro. Per esempio, VBL sta per il raggio verticale dell'angolo in basso a sinistra.

Se lo dai solo un valore per il lato orizzontale o verticale, tale valore verrà copiato su tutti gli altri raggi orizzontali o verticali dal browser.

A creare una forma ovale verticale, mantenere i raggi orizzontali a 50% per tutti gli angoli, e regolare quelli verticali, fino a vedere la forma desiderata. Il lato orizzontale userà solo un valore: 50%.

Il raggi verticali degli angoli in alto a sinistra e in alto a destra 30%, mentre gli angoli in basso a sinistra e in basso a destra useranno il 70% valore.

HTML

CSS

.pinStarLeaf width: 60px; altezza: 120 px; border-radius: 50% / 30% 30% 70% 70%; background-color: # B8F0F5; 

2. Moltiplicare le foglie

Dal momento che il marcatore si aprirà a ventaglio mostrando cinque foglie, creiamo altre quattro copie della foglia in diversi colori e con posizionamento assoluto per impilarli l'uno sull'altro.

HTML

CSS

#pinStarWrapper width: 300px; altezza: 300 px; posizione: relativa;  .pinStarLeaf width: 60px; altezza: 120 px; posizione: assoluta; border-radius: 50% / 30% 30% 70% 70%; a sinistra: 0; a destra: 0; inizio: 0; fondo: 0; margine: auto; opacità: 0,5;  .pinStarLeaf: nth-of-type (1) background-color: # B8F0F5;  .pinStarLeaf: nth-of-type (2) background-color: # 9CF3DC;  .pinStarLeaf: nth-of-type (3) background-color: # 94F3B0;  .pinStarLeaf: nth-of-type (4) background-color: # D2F8A1;  .pinStarLeaf: nth-of-type (5) background-color: # F3EDA2;  

3. Catturare Click Event e migliorare l'estetica

Diamo aggiungi una casella di controllo con il #pinStarCenterChkBox identificatore per catturare l'evento click. Quando la casella di controllo è selezionata, le foglie si sposteranno (ruotano). Abbiamo anche bisogno di aggiungere un cerchio bianco con il #pinStarCenter identificatore per l'estetica. Sarà posizionato in cima all'indicatore e sarà il pezzo centrale dell'indicatore di posizione.

HTML

Mettiamo la casella di controllo prima, e il cerchio bianco dopo, le foglie:

CSS

Per prima cosa, impostiamo gli stili di base per la casella di controllo e il cerchio di copertura:

 #pinStarCenter, #pinStarCenterChkBox width: 45px; altezza: 50 px; posizione: assoluta; a sinistra: 0; a destra: 0; inizio: -60px; fondo: 0; margine: auto; background-color: #fff; raggio di confine: 50%; cursore: puntatore;  #pinStarCenter, .pinStarLeaf pointer-events: none;  #pinStarCenter> input [type = "checkbox"] width: 100%; altezza: 100%; cursore: puntatore;  

Come ogni foglia ruoterà lungo l'asse z in diversi angoli, abbiamo bisogno di impostare il transform: rotatez (); proprietà di conseguenza, a crea una forma a stella. Applichiamo anche il transizione proprietà per l'effetto di rotazione (più precisamente usiamo il transizione: trasforma 1s lineare regola per le foglie).

 #pinStarCenterChkBox: checked ~ .pinStarLeaf transition: transform 1s linear;  #pinStarCenterChkBox: checked ~ .pinStarLeaf: nth-of-type (5) transform: rotatez (35deg);  #pinStarCenterChkBox: checked ~ .pinStarLeaf: nth-of-type (4) transform: rotatez (105deg);  #pinStarCenterChkBox: checked ~ .pinStarLeaf: nth-of-type (3) transform: rotatez (180deg);  #pinStarCenterChkBox: checked ~ .pinStarLeaf: nth-of-type (2) transform: rotatez (255deg);  #pinStarCenterChkBox: checked ~ .pinStarLeaf: nth-of-type (1) transform: rotatez (325deg);  

Se dai un'occhiata al CSS sopra, puoi vedere dalla presenza di #pinStarCenterChkBox: controllato ~ selettore generale del fratello che aggiungiamo solo il transizione e trasformare proprietà quando la casella è selezionata (quando l'utente ha fatto clic sul marker).

4. Modifica del centro della rotazione

Per impostazione predefinita, il centro della rotazione è posizionato al centro dell'elemento ruotato, nel nostro caso, al centro delle foglie. Abbiamo bisogno di spostare il centro della trasformazione verso l'estremità interna delle foglie. Possiamo farlo usando il trasformare origine Proprietà CSS che cambia la posizione degli elementi trasformati.

Per fare in modo che l'effetto di rotazione funzioni correttamente, aggiungiamo le due seguenti regole a .pinStarLeaf selettore nel nostro file CSS:

 .pinStarLeaf transform-origin: 30px 30px; transizione: trasformare 1s lineare;  

Vediamo i nostri fan di animazione in azione - a questo punto, senza l'effetto di rimbalzo. Fai clic sul cerchio bianco, in cima all'indicatore.

Comprendere come funziona ubic-Bezier ()

Ora, per aggiungere l'effetto di rimbalzo, dobbiamo sostituire il lineare funzione di temporizzazione con cubi-Bezier () nel transizione dichiarazioni nel nostro file CSS.

Ma prima, capiamo il logica dietro il cubi-Bezier () funzione di temporizzazione in modo che tu possa facilmente dare un senso all'effetto di rimbalzo.

La sintassi per il cubi-Bezier () la funzione è la seguente, d e t siamo distanza e tempo, e i loro valori in genere vanno da 0 a 1:

cubico-bezier (t1, d1, t2, d2)

Anche se spiegando CSS cubi-Bezier () in termini di distanza e tempo non è preciso, è molto più facile capirlo in questo modo.

Supponiamo che ci sia una scatola che si sposta dal punto A al punto B in 6 secondi. Usiamo il seguente cubi-Bezier () funzione di temporizzazione per la transizione con il t1 = 0 e d1 = 1 valori.

 / * t1 = 0, d1 = 1, t2 = 0, d2 = 0 * / cubico-bezier (0,1,0,0) 

In pochissimo tempo, la casella si sposta da A a punto centrale e impiega il resto del tempo a raggiungere B.

Proviamo la stessa transizione con i valori t1 = 1 e d1 = 0.

 / * t1 = 1, d1 = 0, t2 = 0, d2 = 0 * / cubico-bezier (1,0,0,0) 

Per i primi tre secondi, la scatola non si muove molto e in seguito salta quasi a metà punto e inizia a spostarsi costantemente verso B.

Come potete vedere, d1 controlla il distanza tra A & il punto medio, e t1 il tempo necessario per raggiungere il punto medio da A.

Usiamo d2 e t2 adesso. Tutti e due t1 e d1 sarà 1 e t2 = 1 e d2 = 0.

 / * t1 = 1, d1 = 1, t2 = 0, d2 = 1 * / cubico-bezier (1,1,0,1) 

La scatola si sposta quasi a metà strada in 3 secondi (a causa di t1 = 1, d1 = 1), e in pochissimo tempo salta al punto B.

L'ultimo esempio scambia i precedenti valori di t2 e d2:

 / * t1 = 1, d1 = 1, t2 = 1, d2 = 0 * / cubico-bezier (1,1,1,0) 

La scatola si sposta quasi a metà strada in 3 secondi (a causa di t1 = 1, d1 = 1), quindi per altri 3 secondi non si muove molto prima di saltare al punto B.

Questi esempi mostrano questo d2 e t2 controlla la distanza e il tempo necessario per la casella andare da metà a punto a B.

Anche se probabilmente non hai avuto bisogno di questa lunga (ma scarsa) spiegazione di cubi-Bezier () a questo punto, penso che ti aiuterà a capire meglio questa funzione. Ora, da dove viene il rimbalzo in tutto questo?

5. Aggiunta dell'effetto bounce con Cubic-Bezier ()

Il parametri chiave perché l'effetto di rimbalzo sono le distanze, d1 e d2. UN d1 valore di meno di 1 prende la scatola dietro il punto A prima di procedere verso B all'inizio dell'animazione.

UN d2 valore di più di 1 prende la scatola oltre il punto B prima di tornare a riposare a B alla fine dell'animazione. Da qui l'effetto di rimbalzo avanti e indietro.

Ora aggiungerò il cubi-Bezier () valori direttamente alla nostra demo al posto di quella precedente lineare valore del transizione proprietà, e ti permette di vedere i risultati.

 #pinStarCenterChkBox: checked ~ .pinStarLeaf transition: transform 1s cubic-bezier (.8, -. 5, .2,1.4);  

Ecco il risultato finale, un'animazione fan-out solo CSS con un effetto bounce:

Per il confronto e per capire meglio l'effetto di rimbalzo, ecco come cubi-Bezier () il valore dell'animazione si comporta quando è applicato alla nostra casella di esempio: