Išsami instrukcija CSS animacijų pritaikymui naudojant „Chrome“ kūrėjo įrankius

Šiame vadove nagrinėjame Animacijų skirtuką „Chrome plėtinių įrankiuose“. Ši funkcija yra ypač naudinga, kai dirbate su CSS animacijomis ir pereinimo efektais arba norite ištirti jau esamas animacijas. Jūs išmoksite, kaip išsamiai analizuoti ir optimizuoti animacijas siekiant pagerinti jų veikimą, pritaikius laiko funkcijas ir savybes. Kartu peržiūrėkime skirtingus žingsnius.

Svarbiausios išvados

• Animacijų skirtukas suteikia vizualinį CSS animacijų atvaizdavimą.
• Galite išsamiai ištirti ir pritaikyti animacijos eigą.
• Pakeitimai animacijų laiko ir savybių gali ženkliai pagerinti veikimą.

Veiksmų sekimo vadovas

Pirmiausia atidarykite Chrome plėtinių įrankius. Norėdami tai padaryti, paspauskite klavišą F12 arba pelės dešiniuoju pelės mygtuku spustelėkite svetainėje ir pasirinkite „Ištirti“.

Kai atsidaro kūrimo įranga, eikite į skirtuką „Animacijos“, esantį „Įrankiai“ meniu. Paspauskite jį, kad aktyvuotumėte Animacijų skirtuką.

Dabar esate puslapyje su vykstančia animacija. Mūsų pvz. naudojame puslapį „animatestyle“. Iš naujo įkelkite puslapį, kad stebėtumėte animaciją, kuri iš karto tampa matoma, atsiradusi ekrane.

Kai puslapis įsikėlęs iš naujo, pamatysite animaciją, kuri iškyla iš viršaus. Animacijų skirtukas dabar rodo jums šiuo metu vykstančią animaciją pakartotiniu būdu.

Jei pelės pele paslinksite per animaciją, ji bus ilgalaikės peržiūros režime. Paspauskite ant Animacijų skirtuko parodymą, kad išsamiau įvertintumėte animaciją.

Svarbi Animacijų skirtuko dalis yra žymeklis, kurį galite naudoti norėdami analizuoti animacijos būseną. Judindami šį žymeklį galite matyti, kur prasideda ir baigiasi skirtingos animacijos ir perėjimai bei stebėti atitinkamus kreives.

Jei nagrinėjate konkrečią animaciją - šiuo atveju „priartinti žemyn“ - galite pamatyti animacijos detales. Įmanoma identifikuoti skirtingus animacijos taškus ir suprasti, kaip jos vystosi.

Jūs taip pat turite galimybę tiesiogiai keisti animaciją. Pavyzdžiui, perkeldami žymeklį į priekį, galite matyti, kaip atrodo animacija, kai atliekate pakeitimus.

Šie pritaikymai padės jums įgyti pojūtį, kokių poveikių gali turėti pakeitimas animacijos eigai ir savybių.

Norėdami pakeisti paleidimo greitį, galite naudoti procentinę reikšmę, kurią suteikia Animacijų skirtukas. Grožio pridėjimo mygtukas leidžia jums peržiūrėti pritaikytą animaciją iš naujo nuo pradžių.

Kai esate patenkinti atliktiems pakeitimams, iš naujo įkelkite puslapį, kad pamatytumėte, ar įkeltos pradinės animacijos arba jūsų redaguotos animacijos.

Animacijų skirtukas yra ypatingai vertingas, jei norite išsamiai ištirti animacijas ir galbūt atlikti pakeitimus, kurie pagerintų galutinį rezultatą.

Pavyzdžiui, „Animacijos trukmės“ peržiūra suteikia jums greitą peržiūrą apie jūsų animacijos trukmę. Paspaudus ant trukmės, galite identifikuoti konkretų skyrių, kuriame nustatyta animacija.

Šios pataisos leidžia animacijų skirtukui tiksliai sureguliuoti animacijas. Tu gali nukopijuoti CSS kodą iš animacijų, kad vėliau jas naudotum savo turinyje.

Tai buvo išsami įžanga į Chrome Developer Tools animacijų skirtuką.

Santrauka

Šiame vadove išmokai, kaip analizuoti ir koreguoti CSS animacijas naudojant Chrome Developer Tools animacijų skirtuką. Mes peržiūrėjome būtinus žingsnius, kad įvertintume animacijas, pakeistume jų parametrus ir optimizuotume jų veikimą.