Share
Data viitoare când creați câteva animații bazate pe CSS3, s-ar putea să fiți de ajutor să sariți în Instrumentele de dezvoltare pentru Chrome și să profitați de funcțiile de inspecție și optimizare a animației. În acest sfat rapid vă vom oferi o listă de instrumente de animație care sunt disponibile în Chrome, cum să le accesați și ce pot face pentru dvs..
Pe măsură ce mergeți, dacă doriți ca unele animații CSS3 să testeze fiecare dintre instrumentele pe care le puteți folosi acest stilou din cursul nostru 10 Proiecte CSS3: Interfața și layout-ul:
Iată versiunea completă a paginii.
Pe o pagină în care rulează o animație CSS3, deschideți mai întâi Instrumentele pentru dezvoltatorii Chrome, mergând Vizualizați> Dezvoltator> Instrumente pentru dezvoltatori. Alternativ, puteți utiliza și o comandă rapidă de la tastatură F12 sau CTRL + SHIFT + I.
Odată ce instrumentele dev sunt deschise, accesați meniul simbolizat de trei puncte verticale în colțul din dreapta sus, apoi alegeți Mai multe instrumente> Animații așa cum se arată mai jos:
Când deschideți pentru prima dată fila de animație, nu veți vedea niciun conținut legat de animațiile dvs., veți vedea doar un mesaj care spune Ascultarea animațiilor ... . Motivul pentru aceasta este că, pentru a funcționa, fila trebuie să fie deja deschisă când prima pagină este încărcată.
Pentru a permite panoului să capteze informații despre animațiile dvs., reîmprospătați pagina și veți vedea:
Pictograma graficului puțin colorat din partea stângă sus reprezintă animațiile paginii dvs. Faceți clic pe acea pictogramă pentru a deschide instrumentele de inspecție animație:
Pe măsură ce joci animațiile, vei vedea capul roșu care se deplasează pe linia temporală. Acest cap de joacă poate fi apucat cu mouse-ul și spălat manual, sau plasat la un anumit punct.
Fiecare linie de pe interfață reprezintă o animație individuală în pagină. Veți observa că fiecare linie are o porțiune cu o culoare mai închisă și mai saturată. Aceasta indică lungimea animației, iar segmentele mai ușoare care vin după aceea reprezintă animația care se repetă.
De asemenea, veți vedea mai multe cercuri mici de-a lungul fiecărei linii de animație. Acestea corespund cu cadrele cheie ale animației. Cercurile colorate închise reprezintă începutul și sfârșitul animației, iar cercurile goale reprezintă interstițial cadre cheie oriunde între.
Cadrele cheie intermediare (cadre cheie între începutul și sfârșitul fiecărui ciclu de animație) pe fiecare linie pot fi trase în poziții diferite și în timp ce le mutați, veți vedea că animația din fereastra browserului își schimbă calendarul. Acest lucru poate fi excelent pentru a experimenta exact ce punct procentual ar trebui să cadă o cheie cheie interstițială.
Partea dificilă, totuși, nu veți vedea nici o actualizare a codului în stiluri în timp ce desfășurați aceste experimente. În schimb, când faceți cadrele cheie interstițiale plasate exact la punct, puteți stabili manual ce valoare procentuală trebuie utilizată pentru a utiliza un cadru cheie.
Plasați butonul de redare direct deasupra cadrului cheie în cauză și veți vedea o ștampilă de timp în partea din stânga sus a panoului, care vă va spune cât de departe de-a lungul animației sunteți în câteva secunde. Puteți apoi să dați seama ce procent din acest moment este durata de animație globală. În exemplul de mai jos, playhead-ul este la aproximativ 1s dintr-o animație de 2s, deci știm că acest keyframe este la 50%.
Există și alte modificări pe care le puteți face în Animații filă asta voi actualizați codul în stiluri astfel încât să puteți vedea exact ce valori trebuie transplantate în CSS. Prima dintre acestea este întârzierea înainte ca o animație să înceapă să joace, iar a doua este durata acesteia.
Pentru a ajusta întârzierea înainte ca o animație să fie redată, treceți cu mouse-ul peste linia sa până când vedeți un cursor în formă de mână, apoi trageți orizontal. Veți vedea actualizarea valorii de întârziere în stiluri fila:
Pentru a modifica durata animației, treceți peste ultima sa cheie cheie până când vedeți un cursor de săgeată cu două capete, apoi trageți orizontal. Din nou, valoarea va fi văzută actualizată în stiluri fila.
De asemenea, puteți utiliza instrumentele Google Chrome pentru a modifica curba de viteză care controlează calendarul unei animații. Începeți prin inspectarea unui element care are o animație aplicată. În partea stângă a funcției de sincronizare specificate în prezent, veți vedea o cutie mică cu un "chirpiciu" în ea. Faceți clic pe acesta pentru a deschide editorul bezier cubic:
Se va deschide o casetă care vă arată curba bezier care ilustrează funcția curentă de sincronizare. De aici puteți alege o presetare existentă făcând clic pe una din miniaturile din stânga sau puteți trage mânerele imaginii principale a curbei în jur pentru a crea o valoare cubic-bezier personalizată pe care o puteți copia ulterior în CSS:
Pe măsură ce mergeți veți vedea o minge purpuriu animată de la stânga la dreapta în partea de sus a editorului, oferindu-vă o previzualizare a funcției de sincronizare în acțiune.
Aflați mai multe despre curbele bezier și funcțiile de sincronizare în acest curs de pauză de cafea:
O altă caracteristică suplimentară este capacitatea de a vizualiza straturile folosite în animația dvs., inclusiv opțiunea de a roti imaginea respectivă și de a privi din diferite unghiuri pentru a înțelege mai bine cum funcționează lucrurile.
Pentru a deschide straturi , accesați meniul Chrome Dev Tools și alegeți Mai multe instrumente> Straturi.
Odata ce straturi fila este deschisă, alegeți Mod rotativ în partea stângă sus:
Acum puteți folosi acest instrument pentru a roti vizualizarea straturilor pe orice unghi de care aveți nevoie pentru a vedea cel mai bine cum funcționează părțile animației:
Să vedem un rezumat rapid al instrumentelor de animație Chrome:
Câteodată, făcând un aspect animat doar corect, poate fi un proces foarte precis și fin. Aceste instrumente pot oferi o viziune atât de necesară asupra animațiilor dvs., cât și feedback-ul în timp real, pentru a vă ajuta să obțineți totul perfect.
Accentsconagua