Accentsconagua
Donovan Hutchinson
Donovan este un dezvoltator de front-end din Dublin, cu o pasiune pentru CSS, animație și distracție.
Share
Ce veți creaCând discutăm despre utilizarea animației, discutăm adesea despre modurile practice în care putem crea tranziții, animații și așa mai departe. Animația este o modalitate puternică de a face demersurile noastre să iasă în evidență, dar mai degrabă decât să se concentreze asupra modului în care funcționează animațiile individuale, modul în care se combină mai multe animații poate crea ceva chiar mai puternic.
Cele 12 principii de animație ale Disney definesc "Apelul" ca fiind "carisma într-un actor". Este modul în care realismul, stilul și substanța animației se adaugă pentru a crea un sentiment de caracter pe care spectatorii îl găsesc real și interesant.
Iluzia vieții: animație Disney în care sunt stabilite cele 12 principii de bază ale animațieiEste o tehnică utilizată cu mare efect de Stripe. Stripe este un procesor de plăți și oferă instrumente pentru încorporarea formelor de plată în site-uri. Aceste forme sunt renumite pentru a fi proiectate frumos, în special utilizarea lor de animație.
În acest articol voi discuta cum pot fi utilizate mai multe animații pentru a crea un efect mai mult decât suma părților sale și arăta cum puteți folosi aceste cunoștințe într-un mod practic.
În acest exemplu, vom folosi animația pentru a prezenta un card cu detalii și linkuri către web și alte conturi sociale.
Când se apasă un buton, se va solicita să apară o carte cu unele urma Opțiuni. Mai degrabă decât să folosim o fereastră modală veche modală, vom folosi animația pentru ao face mai interesantă.
Pentru a face acest lucru atrăgător, au loc mai multe animații. Diferitele piese animate și introduc fiecare element în ordine. Acest lucru ajută privitorul să înțeleagă legătura dintre ceea ce au apăsat și conținutul și ordinea animațiilor ajută la atragerea atenției asupra următoarelor pictograme.
Pentru a începe, avem nevoie de un buton pe care să îl apăsăm și de o carte pe care să o afișăm. Cardul va fi ascuns atunci când conținutul este afișat pentru prima dată.
Donovan Hutchinson
Donovan este un dezvoltator de front-end din Dublin, cu o pasiune pentru CSS, animație și distracție.
Butonul este o imagine și un text. Când este apăsat, va apărea cardul. Cardul este alcătuit din patru secțiuni; un buton de închidere, o secțiune de detalii, un heads-up și o pictogramă care conține icoane sociale. Pentru acest exemplu, folosim icoane inline SVG luate din colecția Entypo.
Înainte de a ajunge în animații, să adăugăm ceva stil la buton și la carte. În primul rând, butonul:
.carte de vizită background: #fff; raza de raza: 4m; frontieră: 0.25 de solide # 1fa756; culoare: # 1fa756; font-size: 18px; stânga: 50%; înălțimea liniei: 1,5; umplutura: 1em 1em 1em 4em; poziția: absolută; top: 50%; transformare: traduce (-50%, -50%); contur: nici unul; . carte de vizită img border-radius: 50%; stânga: 0,3; poziția: absolută; top: 0.25em; lățime: 3m;
Notă: am adăugat un contur: nici unul; la .spectacol-card deoarece unele browsere adaugă o strălucire deosebită stărilor de focalizare a butoanelor (pe care nu le dorim):
Apoi vom modela cardul și fiecare secțiune din acesta.
.carte jos: calc (50% - 8e); afișare: niciunul; înălțime: 16em; stânga: calculează (50% - 10e); poziția: absolută; tranziție: toate 0.4s 0.4s cubic-bezier (.5, .2, .43,1.33); lățime: 20cm; . închide culoare: #aaa; cursor: pointer; înălțime: 1em; opacitate: 0; poziția: absolută; dreapta: 0.5em; top: 0,5 um; lățime: 1m; z-index: 10; .details position: absolute; fund: 2,5; fundal: #fff; raza de raza: 0.25cm; înălțime: 0; overflow: ascuns; text-align: centru; lățime: 20cm; .name culoare: # 333; font-weight: bold; marja: 3em 0 0; opacitate: 0; .description culoare: # 666; dimensiune font: 1em; greutatea fontului: 200; înălțimea liniei: 1,5; marja: 0.75e 2e 2e; opacitate: 0; .headshot img limita-rază: 50%; frontieră: 0.5m solid #fff; afișare: bloc; înălțime: 6em; marja: -3em auto 0.5em; opacitate: 0; lățime: 6e; .icon-bar fundal: # 1fa756; raza de raza: 0.25cm; stânga: -1em; poziția: absolută; dreapta: -1em; top: 13em; .icon-bar ul display: flex; flex-display: coloană; flex-wrap: acum; umplutura: 0; .icon-bar li afișare: inline-block; font-size: 2m; opacitate: 0; umplutura: 0 1em; lățime: 33%; .icon-bar a culoare: #fff; text-decoration: nici unul;
Rețineți că am setat această carte afișare: niciuna inițial. Vom controla apoi acest lucru folosind JavaScript.
Mai degrabă decât să ne aruncăm în CSS, vom stabili mai întâi acțiunea de bază de a afișa și ascunde informațiile de contact. Acest lucru va face uz de un mic JavaScript (și în acest caz jQuery) pentru a adăuga și a elimina clase în funcție de ceea ce a făcut clic pe:
// Afiseaza cardul dand click pe butonul $ ('' show-card '') click (functie (e) $ (' ); $ ('' carte de vizită '') addClass ('ascunde');); / / Ascundeți cardul făcând clic pe "x" $ ('.card.close') faceți clic pe (funcția (e) $ ('. Acum ar trebui să putem arăta și ascunde cardul folosind jQuery și afişa Proprietatea CSS.
Consultați exemplul de bază și ascundeți exemplul aici:
Cu aspectul în loc trebuie să adăugăm câteva stiluri suplimentare pentru a ascunde diferitele elemente astfel încât să le putem anima în vederea.
.închideți, .name, .description, .headshot img, .icon-bar li opacitate: 0; .details height: 0;
Aceste elemente vor avea o întârziere înainte ca animația lor să intre în vigoare, așa că trebuie să ieșiți din vedere inițial.
Cu ajutorul mecanismului de afișare și ascundere a cardului, putem începe să atașăm animații. JavaScript de mai sus adaugă a spectacol se afișează cardul pe afișaj și putem atașa animații acestei clase, care va introduce părțile individuale ale cardului.
Pentru a face acest lucru vom folosi CSS-ul animaţie proprietate și seturi de keyframes.
Este util să creați animații în scop general în CSS și să le reutilizați. Animațiile simple, cum ar fi atenuarea și decolorarea, pot fi definite o dată și utilizate în mai multe locuri.
Pentru a arăta cum keyframes sunt definite, hai să creăm decolorarea și să estompeze animațiile.
@ decuplarea cheilor de chei 0% opacity: 0; 100% opacitate: 1; @ decuplarea cheilor de chei 0% opacity: 1; 100% opacitate: 0;
Cadrele cheie reprezintă o serie de pași, definite ca procente. Acestea pot fi orice număr de pași, dar în exemplul nostru definim doar cadrele cheie de pornire (0%) și final (100%). În fade-in începem fără opacitate (0) și se termină în opacitate totală (1). fade-out animația face contrariul.
Putem folosi animaţie proprietate pentru a aplica aceste animații decolorare la buton atunci când este afișat și ascuns.
.carte de vizită animație: fade-in 0.4s 1s avansat ușurință-out; .show-card.hide animație: fade-out 0.4 s înainte de ușurință-out;
Scurta descriere a animației indică cardului să folosească fade-in animație, cu durata de 0,4 secunde, cu o întârziere de 1 secundă. Animația va juca odată și se va opri la sfârșit (înainte) și va folosi ușura-out funcția de temporizare.
Cand ascunde clasa este aplicată butonului, fade-out animația are efect.
Prima parte pe care o vom introduce este bara de pictograme. Din moment ce aici vor fi legăturile, vrem să se evidențieze și să fie primul lucru pe care oamenii îl observă.
Când animăm, putem crea efecte interesante utilizând proprietatea funcției de sincronizare. În acest caz, vom folosi a cub-bezier temporizare pentru a adăuga unele "bounce" când apare bara de pictograme.
Mai intai vom crea cateva cadre cheie simple pentru ca barul sa inceapa sa fie mic si sa creasca in inaltime.
@frame-cheie-show-icon-bar 0% height: 0; 100% height: 4.5em;
Acum putem aplica acest set de cadre cheie în bara de pictograme atunci când spectacol clasa este adăugată la card.
.card.show .icon-bar animație: show-icon-bar .5s înainte cubic-bezier (.64,1.87, .64, .64);
Efectul de bouncy este creat prin utilizarea cub-bezier funcția de temporizare. Funcțiile temporizării descriu modificările de viteză printr-o animație și pot fi proiectate pentru a surprinde începutul sau sfârșitul unei animații. Această animație merge mai departe, apoi se corectează, creând un salt.
Cu bara de pictograme introdusă, trebuie să animăm secțiunea care conține detaliile și capul. Am dori ca această secțiune să apară după introducerea bara de pictograme. Pentru a realiza acest lucru vom folosi animație întârziere proprietate.
.card.show .details animație: show-detail-container 0.7s 0.5s în față cubic-bezier (.54, -0.38, .34,1.42);
Animația aplicată la Detalii secțiunea este setată să aibă a durată de 0,7 secunde și a întârziere de 0,5 secunde. Aceasta înseamnă că animația nu va începe decât după ce bara de pictograme a fost introdusă.
De asemenea, folosim aici o funcțiune de sincronizare cubică de bezier pentru a da o anumită saritură.
Apoi definim cadrele cheie pentru animația acestui container.
@frame-cheie show-detail-container 0% height: 0; 100% height: 13.5em;
arată-detaliu-container frazele de animație încep cu containerul invizibil cu o înălțime de zero și animă la înălțimea completă. Funcția cubică de temporizare a bezierului face apoi animația să depășească puțin pentru a da o anumită saritură.
Multiple animații pot fi aplicate într-o singură proprietate. Atâta timp cât animațiile nu sunt în conflict între ele (prin încercarea de a anima aceeași proprietate), ele pot fi folosite pentru a adăuga nuanță unei animații. Multiple animații sunt definite ca animații unice, dar separate prin virgule.
În acest caz, vom dispărea în căști, în numele și descrierea conținutului, în timp ce folosim a a aparea de nicaieri pentru a le face să apară pentru a mări dintr-o distanță.
Dacă am fi folosit o singură animație, cu o funcție de cronometrare bezier cubică, efectul de estompare ar părea să sară și să pară ciudat. În schimb, vom avea decolorarea folosind o funcție de sincronizare liniară și zoom-ul va avea efectul de respingere.
Mai întâi definim a aparea de nicaieri keyframes.
@frame-cheie de tip pop-in 0% transform: scale (0.7); 100% transform: scale (1);
Aceasta utilizează scară transformați fiecare element să înceapă să se micșoreze și să crească până la dimensiunea normală.
Să aducem conținutul. Fiecare element are două animații, iar fiecare dintre ele are o întârziere de animație puțin mai lungă pentru a-și schimba aspectul.
.card.show .headshot img animație: fade-in 0.4s 1.2s înainte, pop-in 0.6s 1.2s înainte cubic-bezier (.64,1.87, .64, .64); .card.show .name animație: fade-in 0.3s 1.3s înainte, pop-in 0.3s 1.3s înainte cubic-bezier (.64,1.87, .64, .64); .card.show .description animație: fade-in 0.3s 1.4s înainte, pop-in 0.3s 1.4s înainte cubic-bezier (.64,1.87, .64, .64);
Animația apropiată de iconițe face uz de fade-in cadrele cheie pe care le-am definit mai devreme.
.card.show .close animație: fade-in 0.3s 1.3s înainte;
Trebuie doar să arătăm icoanele acum. La prezentarea animațiilor, ultimul lucru animat este acela în care atenția spectatorului se va sfârși. Acest lucru înseamnă că ochii spectatorilor vor urmări animația și vor termina să privească pictogramele pe care le-am dori să le selecteze.
Vom folosi din nou proprietatea de întârziere a animației pentru ca acestea să fie introduse ultima dată. Mai întâi definim cadrele cheie ale unei animații pentru pictograme:
@frame-cheie de afișare-pictogramă 0% opacity: 0; transform: rotateZ (-40deg); 100% opacitate: 1; transform: rotateZ (0);
Fiecare pictogramă se va roti puțin pe măsură ce se estompează. Acum putem atașa această animație la fiecare dintre pictograme, folosind o întârziere pe fiecare pentru a le șterge.
.card.show .icon-bar li animație: show-icon 0.5s înainte cubic-bezier (.64,1.87, .64, .64); .card.show.icon-bar li: n-copil (1) animație-întârziere: 1,8s; .card.show .icon-bar li: n-copil (2) animație-întârziere: 1.9s; .card.show .icon-bar li: n-copil (3) animație-întârziere: 2s;
Puneți-le pe toate împreună și acum avem un card care apare frumos atunci când butonul este selectat.
Înainte de a putea termina, trebuie să adăugăm a ascunde activați butonul de închidere și animați cartela departe. Mai întâi vom actualiza JavaScript. La apăsarea butonului închide icon, JavaScript așteaptă o secundă înainte de a scoate cartela afișare: niciuna.
$ ('. carte de vizita') click (functie (e) $ ('. ') .addClass (' ascunde ');); $ ('card.close'), faceți clic pe (funcția (e) $ ('.card') addClass ('hide' 'RemoveClass (' ascunde ');), removeClass (' ascunde ');), removeClass (' ascunde '); Acest lucru ne dă o secundă pentru a anima cardul - o vom lăsa să cadă din partea de jos a ecranului. Cadrele cheie care realizează acest lucru sunt următoarele:
@ drop-card 100% bottom: -100%; transform: rotateZ (20deg); opacitate: 0;
Apoi aplicăm acest lucru ca o animație a cărții.
.card.hide animație: drop-card 1s în față cubic-bezier (.54, -0.38, .34,1.42);
Punând totul împreună, puteți vedea rezultatul aici.
Animațiile sunt bine acceptate în toate browserele. În funcție de publicul dvs., aceștia ar trebui să lucreze în majoritatea situațiilor. Merită să vă asigurați că funcțiile principale de afișare și ascundere funcționează și orice animație este adăugată ca o îmbunătățire progresivă.
Prin folosirea mai multor animații, în special a animație întârziere proprietate, am luat ceea ce ar fi putut fi un widget foarte simplu și a făcut-o mai atrăgătoare. Animația îndrumă privitorul prin fiecare element și îi direcționează spre apelurile la acțiune.
Animația poate fi o modalitate excelentă de a comunica în cadrul desenelor. Această comunicare îi ajută pe vizitatori să înțeleagă intenția dvs., precum și să sporească credibilitatea și încrederea în calitatea muncii dvs..
