Odată cu apariția CSS3-animații, HTML-documente au devenit mult mai atractive, și de a le dezvolta, a devenit mai ușor. Utilizând regula @keyframes, puteți defini cu ușurință diferiți parametri, inclusiv locația și dimensiunea elementului HTML. Parametrul de animație, la rândul său, este responsabil pentru pornirea și mutarea cadrelor cheie în funcție de anumiți parametri. Fără a fi nevoie să utilizați j # 097; vascript și pluginuri, putem crea cu ușurință chiar și cele mai complexe animații care vor funcționa foarte ușor în toate browserele moderne.
Problemele apar atunci când trebuie să utilizați j # 097; vascript pentru a dezvolta animații CSS3. Știm cu toții că j # 097; vascript în cele mai multe cazuri - este prima necesitate, care ne permite să se calculeze valorile individuale sau animate întregul proces.
Combinați CSS și j # 097; vascript cu noua metodă animate ()
New j # 097; metoda animate () permite să controlam animațiile printr-un script. Desigur, încă mai trebuie să folosim o grămadă de parametri CSS pentru a determina cadrele noastre cheie.
În exemplul de mai sus, atașăm metoda animate () la element. În interiorul parantezele pătrate este definit ca statele parametru dat, așa cum avem nevoie, și în exemplul nostru, vom lucra la înălțime. Fiecare valoare este scrisă sub forma unei litere obiect, iar valorile sunt utilizate numai pentru un singur parametru separat. Nu sunt permise combinații precum lățimea și înălțimea. Rețineți că valorile în sine trebuie încadrate în citare și sunt formatate cu o sintaxă care îndeplinește cerințele j # 097; vascript, ceea ce înseamnă că trebuie să utilizați "backgroundColor" în loc de "background-color". Într-o altă literă a obiectului, imediat după închiderea parantezelor pătrate, definim animația ulterioară. Vrem să schimbăm lungimea animației prin durată, frecvența de repetare prin iterație și poate determina opțional întârzierea prin parametrul de întârziere - acest parametru specifică momentul când animația ar trebui lansată. Toate valorile de timp sunt specificate în milisecunde.
Gestionați un set de cadre cheie și durata acestora
Trebuie să executăm metoda animate () separat de fiecare parametru pe care trebuie să-l schimbăm. Aceasta înseamnă că dacă doriți să modificați înălțimea și lățimea, va trebui să reluăm animate ().
În exemplul de mai sus, modificăm lățimea elementului. Lățimea trebuie să varieze de la 0 la 10% și apoi să se finalizeze când atinge 100%. Toate acestea vor fi însoțite, bineînțeles, de o animație netedă. Parametrul opțional opțional specifică faptul că modificările de la 0 la 10% vor dura o treime din timp, iar trecerea de la 10 la 100 va dura 2/3 din timpul total de animație. Și cu toții, durata totală a animației este determinată de durata parametrului. În acest caz, prima parte va apărea o secundă, iar cea de-a doua - timp de 2 secunde.
În loc să definiți o valoare sub formă de fracții, puteți utiliza și numere zecimale. Trebuie să utilizați numere de la 0 la 1. De exemplu, în loc de 1/3, puteți utiliza 0.33.
Mai multe opțiuni pentru animație
Dacă sunteți familiarizat cu animația parametrilor CSS3, atunci cu siguranță știți că metoda animate () vă permite să controlați procesul de animație. Puteți schimba direcția, precum și viteza animației și accelerarea acesteia. Dacă doriți să specificați că după final, animația ar trebui să revină la început, o puteți face.
Direcția valorii conține informații despre direcția animației. Dacă setați valoarea pentru a inversa, animația va fi redată. Valoarea alternativului vă va permite să reproduceți animația în direcția standard și apoi în direcția opusă. Valoarea alternativă-inversă combină ultimele două valori.
Valoarea relaxării vă permite să utilizați cele mai comune funcții de modificare, care sunt deja bine cunoscute în CSS3, deoarece puteți întâlni ușurință în ușurință, ușurință și așa mai departe. În mod implicit, fiecare animație este setată la mișcare liniară fără accelerare sau decelerare. Valoarea umplerii determină ce va fi prezentat după terminarea animației. Implicit, animația trebuie să revină la punctul de plecare. Dacă utilizați valoarea înainte, animația se va opri în ultimul cadru cheie.
Aplicarea animate () la o variabilă ne permite să controlam animația cu j # 097; vascript. Putem începe și o oprim la discreția noastră.
În exemplul nostru, atașăm animația la animația variabilă, destul de ciudat. Apoi atașăm 2 ascultători de evenimente elementelor cu id animation_start și animation_pause. Acești ascultători vor avea grijă de anumite funcții atunci când fac clic. Redarea începe animația, pauza este deja clară ce face, iar inversarea vă duce imediat la ultimul cadru cheie și oprește complet animația.
Ce urmează? Ascultătorii evenimentului au grijă de sfârșitul animației
Hei, asta e jurnalul. Desigur, avem un ascultător de evenimente care ne permite să reacționăm la sfârșitul animației. Putem implementa acest lucru cu ajutorul finisajului. În interior, trebuie să determinați funcția corespunzătoare.
În exemplul de mai sus, rulați doar un mesaj care arată că animația este completă.
animate () este acum într-un stadiu incipient de dezvoltare și este acum împovărat cu eticheta "experimental". Suportul pentru această setare va apărea în Chrome începând cu versiunea 36. Dacă doriți să încercați acum, puteți să descărcați și să instalați Chrome Canary.
Trimiteți-le prietenilor: