CSS3 Animation - Crearea unui fan-out cu efect bounce folosind curba Bezier

Stiai asta transformări geometrice adăugat la elementele HTML cu transformaProprietatea CSS, cum ar fi scala, oblica și rotirea, poate fi animată? Ele pot fi animate folosind tranziție proprietate și @keyframes animații, dar ceea ce este chiar mai rece este faptul că transformările animate pot fi preluate de o crestătură cu adăugarea unui pic efectul de respingere, folosind cub-bezier () funcția de temporizare.

Pe scurt, cub-bezier () (în CSS) este a funcția de temporizare pentru tranziții. Specifică viteza tranziției și, printre altele, poate fi obișnuită creați un efect de bouncing în animații.

În acest post, mai întâi vom merge creați o animație de transformare simplă la care noi mai târziu adauga o cub-bezier () funcția de temporizare. La sfârșitul acestui tutorial, veți înțelege cum să creați o animație care utilizează atât un fan-out și un efect de bounce. Iată rezultatul final (faceți clic pentru a vedea efectul).

Demo-ul este inspirat de acest frumos Dribbble împușcat de Christopher Jones despre un marker de locație animat.

1. Crearea frunzelor

Forma markerului de locație este alcătuită din cinci frunze (să le numim). Pentru a crea forma ovala a unei frunze, să folosim border-radius Proprietatea CSS. border-radius de un singur colț este alcătuită din două raze, orizontal și vertical, după cum se arată mai jos.

border-radius proprietatea are multe sintaxe diferite. Vom folosi unul mai complicat pentru forma markerului:

 raza de frontieră: htl htr hbr hbl / vtl vtr vbr vbl; 

În această sintaxă, razele orizontale și verticale sunt grupate împreună; h & v reprezintă razele orizontale și verticale; T, L, b & r reprezintă colțurile de sus, de stânga, de jos și de dreapta. De exemplu, VBL reprezintă raza verticală a colțului din stânga jos.

Dacă da doar o singură valoare pentru partea orizontală sau verticală, acea valoare va fi copiată la toate celelalte raze orizontale sau verticale de către browser.

La crea o formă ovală verticală, păstrați raza orizontală la 50% pentru toate colțurile și reglați cele verticale, până când se observă forma dorită. orizontală va utiliza o singură valoare: 50%.

razele verticale din colțurile sus-stânga și din dreapta-sus vor fi 30%, în timp ce colțurile din stânga și din dreapta-jos vor folosi 70% valoare.

HTML

CSS

.pinStarLeaf lățime: 60px; înălțime: 120px; raza de graniță: 50% / 30% 30% 70% 70%; fundal-culoare: # B8F0F5; 

2. Înmulțirea frunzelor

Din moment ce marcatorul se va arunca cu cinci frunze, vom crea încă patru copii ale frunzei în culori diferite și cu poziționare absolută pentru a le strânge una pe cealaltă.

HTML

CSS

#pinStarWrapper width: 300px; înălțime: 300px; poziția: relativă;  .pinStarLeaf width: 60px; înălțime: 120px; poziția: absolută; raza de graniță: 50% / 30% 30% 70% 70%; stânga: 0; dreapta: 0; top: 0; fund: 0; marja: auto; opacitate: .5;  .pinStarLeaf: nth-of-type (1) culoare-fundal: # B8F0F5;  .pinStarLeaf: nth-of-type (2) culoare-fundal: # 9CF3DC;  .pinStarLeaf: nth-of-type (3) culoare-fundal: # 94F3B0;  .pinStarLeaf: nth-of-type (4) culoare-fundal: # D2F8A1;  .pinStarLeaf: nth-of-type (5) culoare-fundal: # F3EDA2;  

3. Capturarea evenimentului Click & Îmbunătățirea esteticii

hai adăugați o casetă de selectare cu #pinStarCenterChkBox identificator pentru capturarea evenimentului de clic. Când este bifată caseta de selectare, frunzele se vor desprinde (rotiți). Trebuie, de asemenea, să adăugăm o cerc alb cu #pinStarCenter identificator pentru estetică. Acesta va fi poziționat deasupra marcatorului și va fi elementul central al markerului de locație.

HTML

Puneți caseta de selectare înainte și cercul alb după frunze:

CSS

Mai întâi, setăm stilurile de bază pentru caseta de selectare și cercul de acoperire:

 #pinStarCenter, #pinStarCenterChkBox lățime: 45px; înălțime: 50px; poziția: absolută; stânga: 0; dreapta: 0; top: -60px; fund: 0; marja: auto; fundal-culoare: #fff; raza de graniță: 50%; cursor: pointer;  #pinStarCenter, .pinStarLeaf pointer-events: niciunul;  #pinStarCenter> introduceți [type = "checkbox"] width: 100%; înălțime: 100%; cursor: pointer;  

Pe măsură ce fiecare frunză se va roti de-a lungul axei z în unghiuri diferite, trebuie să setăm transform: rotatez (); proprietate în mod corespunzător, la creați o formă de stea. Aplicăm de asemenea tranziție proprietate pentru efectul de rotație (mai precis folosim tranziție: se transformă 1s liniar regulă pentru frunze).

 #pinStarCenterChkBox: verificat ~ .pinStarLeaf tranziție: transformare 1s liniară;  #pinStarCenterChkBox: verificat ~ .pinStarLeaf: nth-of-type (5) transform: rotatez (35deg);  #pinStarCenterChkBox: verificat ~ .pinStarLeaf: nth-of-type (4) transform: rotatez (105deg);  #pinStarCenterChkBox: verificat ~ .pinStarLeaf: nth-of-type (3) transform: rotatez (180deg);  #pinStarCenterChkBox: verificat ~ .pinStarLeaf: nth-of-type (2) transform: rotatez (255deg);  #pinStarCenterChkBox: verificat ~ .pinStarLeaf: nth-of-type (1) transform: rotatez (325deg);  

Dacă aveți o privire la CSS de mai sus, puteți vedea din prezența #pinStarCenterChkBox: verificat ~ selector general de soră pe care le adăugăm doar tranziție și transforma proprietăţi când este bifată caseta de selectare (când utilizatorul a dat clic pe marcator).

4. Modificarea centrului rotației

Implicit, centrul rotației este poziționat în centrul elementului rotit, în cazul nostru, în centrul frunzelor. Trebuie să mutăm centrul transformării spre capătul interior al frunzelor. Putem face acest lucru folosind transformare origine Proprietatea CSS asta schimbă poziția elementelor transformate.

Pentru ca efectul de rotație să funcționeze corect, să adăugăm următoarele două reguli la .pinStarLeaf selector în fișierul nostru CSS:

 .pinStarLeaf transform-origine: 30px 30px; tranziție: transformare 1s liniară;  

Să vedem fanii noștri animație în acțiune - în acest moment, fără efectul bounce încă. Faceți clic pe cercul alb, deasupra marcatorului.

Înțelegerea modului în care funcționează ubic-Bezier ()

Acum, pentru a adăuga efectul de declanșare, trebuie să înlocuim liniar funcția de temporizare cu cub-bezier () în tranziție declarații în fișierul nostru CSS.

Dar mai întâi, să înțelegem logica în spatele cub-bezier () funcția de temporizare astfel încât să puteți înțelege cu ușurință efectul bounce.

Sintaxa pentru cub-bezier () este următoarea, d și T sunteți distanţă și timp, iar valorile lor variază de obicei între 0 și 1:

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

Chiar dacă explică CSS cub-bezier () în ceea ce privește distanța și timpul nu este exactă, este mult mai ușor de înțeles în acest fel.

Să presupunem că există o cutie care se deplasează de la punctul A la B în 6 secunde. Să folosim următoarele cub-bezier () funcția de temporizare pentru tranziția cu t1 = 0 și d1 = 1 valorile.

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

În aproape niciodată, caseta se mută de la A la jumătatea punctului, iar restul de timp ajunge la B.

Să încercăm aceeași tranziție cu valori t1 = 1 și d1 = 0.

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

În primele trei secunde, cutia nu se mișcă prea mult, iar mai târziu se apropie aproape la jumătatea punctului și începe să se deplaseze constant spre B.

După cum puteți vedea, d1 controlează distanța dintre A & punctul central, și T1 timpul necesar pentru a ajunge la punctul de mijloc de la A.

Să folosim d2 și t2 acum. Ambii T1 și d1 va fi 1, și t2 = 1 și d2 = 0.

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

Cutia se mută aproape la jumătate în 3 secunde (datorită t1 = 1, d1 = 1), iar în cel mai scurt timp sare la punctul B.

Ultimul exemplu înlocuiește valorile anterioare ale lui t2 și d2:

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

Cutia se mută aproape la jumătate în 3 secunde (datorită t1 = 1, d1 = 1), apoi timp de încă 3 secunde nu se mișcă prea mult înainte de a sări la punctul B..

Aceste exemple arată că d2 și t2 controlați distanța și timpul de la care se face caseta mergeți de la mijlocul la punctul B.

Deși probabil nu aveați nevoie de această explicație lungă (dar rar) cub-bezier () în acest moment, cred că vă va ajuta să înțelegeți mai bine această funcție. Acum, unde se ascunde toate astea?

5. Adăugarea efectului Bounce cu Cubic-Bezier ()

parametrii cheie pentru efectul bounce sunt distanțele, d1 și d2. A d1 valoarea mai puțin de 1 ia cutia în spatele punctului A înainte de a trece la B la începutul animației.

A d2 valoarea mai mult de 1 ia cutia dincolo de punctul B înainte de a reveni la odihnă la B la sfârșitul animației. Prin urmare, efectul de mișcare înainte și înapoi.

Acum voi adăuga cub-bezier () valorează direct demo-ul nostru în locul celui dintâi liniar valoarea tranziție proprietate, și vă permite să vedeți rezultatele.

 #pinStarCenterChkBox: verificat ~ .pinStarLeaf tranziție: transformare 1s cubic-bezier (.8, - .5, .2,1,4);  

Iată rezultatul final, o animație cu fan-out CSS, cu efect de bounce:

Pentru a compara și pentru a înțelege mai bine efectul bounce, iată cum cub-bezier () valoarea animației se comportă atunci când este aplicată în caseta noastră de exemplu: