Šajā pamācībā aplūkosim Chrome izstrādātāja rīku cilni Animācija. Šī funkcija ir īpaši noderīga, ja strādājat ar CSS animācijām un pārejām vai vēlaties analizēt esošās animācijas. Uzzināsiet, kā detalizēti analizēt un optimizēt animācijas, lai uzlabotu to veiktspēju, pielāgojot laika funkcijas un īpašības. Kopā izstaigāsim dažādus soļus.
Galvenās atziņas
- Cilne Animācijas nodrošina CSS animāciju vizuālu attēlojumu.
- Jūs varat detalizēti izpētīt un pielāgot animācijas gaitu.
- Izmaiņas animāciju laika noteikšanas funkcijās un īpašībās var ievērojami uzlabot veiktspēju.
Soli pa solim
Vispirms atveriet Chrome izstrādātāja rīkus. Lai to izdarītu, nospiediet taustiņu F12 vai ar peles labo pogu noklikšķiniet uz tīmekļa lapas un izvēlieties "Izpētīt".
Pēc izstrādātāja rīku atvēršanas pārejiet uz cilni "Animācijas", kas atrodas izvēlnē "Rīki". Noklikšķiniet uz tās, lai aktivizētu cilni Animācijas.
Tagad jūs atrodaties lapā ar darbojošos animāciju. Mūsu piemērā mēs izmantojam lapu "animatestyle". Pārlādējiet lapu, lai vērotu animāciju, kas kļūst redzama brīdī, kad tā parādās ekrānā.
Tiklīdz lapa tiks pārlādēta no jauna, jūs redzēsiet animāciju, kas lec no augšas uz leju. Tagad animācijas cilnē ir redzama animācija, kas pašlaik darbojas cilpā.
Ja pārvietosiet peli virs animācijas, tā tiks atskaņota cilpā. Noklikšķiniet uz animācijas cilnes displeja, lai apskatītu animāciju sīkāk.
Svarīga animācijas cilnes daļa ir marķieris, ko varat izmantot, lai analizētu animācijas statusu. Pārvietojiet šo marķieri, lai redzētu, kur sākas un beidzas dažādas animācijas un pārejas, un novērotu saistītās līknes.
Ja apskatāt konkrētu animāciju - šajā piemērā "tālummaiņa uz leju" -, varat redzēt detalizētu animācijas aprakstu. Ir iespējams identificēt dažādus animācijas punktus un atpazīt, kā tie attīstās.
Jums ir arī iespēja tieši pielāgot animāciju. Piemēram, varat pavirzīt marķieri uz priekšu, lai redzētu, kā animācija izskatās pēc izmaiņu veikšanas.
Šie pielāgojumi palīdz jums izjust, kādu ietekmi var atstāt izmaiņas animācijas gaitā un īpašībās.
Lai mainītu atskaņošanas ātrumu, varat izmantot animācijas cilnē piedāvātos procentus. Atskaņošanas poga ļauj pielāgoto animāciju pārbaudīt no sākuma.
Kad esat apmierināts ar veiktajām izmaiņām, pārlādējiet lapu atkārtoti, lai redzētu, vai ielādējas sākotnējā animācija vai rediģētā animācija.
Animācijas cilne ir īpaši vērtīga, ja vēlaties detalizēti pārbaudīt animācijas, lai, iespējams, veiktu pielāgojumus, kas uzlabotu galarezultātu.
Piemēram, apskatot cilni "Animācijas ilgums", varat ātri iegūt pārskatu par animācijas ilgumu. Noklikšķinot uz ilguma, varat noteikt konkrēto sadaļu, kurā animācija ir iestatīta.
Veicot šādus pielāgojumus, animācijas cilne ļauj precizēt animāciju. Jūs varat kopēt animāciju CSS kodu, lai vēlāk to izmantotu savās stilu lapās.
Tas bija izsmeļošs ievads par Chrome izstrādātāja rīku cilni Animācija.
Kopsavilkums
Šajā pamācībā uzzinājāt, kā analizēt un pielāgot CSS animācijas Chrome Izstrādātāja rīku cilnē Animācijas. Mēs esam veikuši nepieciešamās darbības, lai apskatītu animācijas, mainītu to parametrus un optimizētu to veiktspēju.
Biežāk uzdotie jautājumi
Kāda ir Chrome Developer Tools cilnes Animācijas funkcija?Cilne Animācijas ļauj detalizēti analizēt un pielāgot CSS animācijas.
Kā var atskaņot animācijas cilnē Animācijas? Animācijas var atskaņot, izmantojot atskaņošanas pogu, un izmantot marķieri, lai pārvietotos pa laika līniju.
Vai es varu veikt izmaiņas animācijās? Jā, jūs varat pielāgot animācijas īpašības, lai mainītu animācijas izskatu un laiku.
Kā es varu kopēt pielāgotās animācijas? Jūs varat kopēt CSS kodu tieši no animācijas cilnes un ielīmēt to savās stilu lapās.
