Ինչպես ստուգել ձեր CSS անիմացիաները Chrome DevTools-ով

Շարժապատկերները CSS-ի հզոր հավելումն են, սակայն դրանց տեքստային ձևը կարող է անհարմար դարձնել նրանց հետ աշխատելը: Chrome-ի DevTools-ը օգնության է հասնում:

CSS անիմացիաները, ճիշտ կատարված, կարող են ձեր կայքը բարձրացնել մեկ այլ մակարդակի: Բայց այս անիմացիաների ստեղծումը կարող է բարդ լինել առանց գործիքների, որոնք ապահովում են դրանց վրա լավ վերահսկողություն: Ի՞նչ կլիներ, եթե միջոց լիներ տեսնելու, թե կոնկրետ ինչ է տեղի ունենում ձեր անիմացիայի յուրաքանչյուր քայլին:

Google Chrome-ի և Firefox-ի «DevTools» ֆունկցիան ուղեկցվում է ձեր անիմացիաները ստուգելու ունակությամբ: Իմացեք, թե ինչպես օգտագործել այս հատկությունը՝ բարելավելու ձեր սեփական անիմացիաները և ձեր սիրած անիմացիաները համացանցում հակադարձ նախագծելու համար:

Հիմնական անիմացիայի վրիպազերծում DevTools-ով

Chrome-ի DevTools-ը հիանալի միջոց է ձեր CSS-ի բոլոր ասպեկտները վրիպազերծելու և, բացի այդ, ավելին: Սկսեք այս պարզ օրինակից՝ հասկանալու համար, թե ինչպես կարող եք այն օգտագործել անիմացիաները ստուգելու համար:

Այս օրինակների կոդը հասանելի է GitHub-ի պահոցում:

Սահմանեք անիմացիաներ HTML-ով և CSS-ով

Հետևյալ HTML-ը էջը ներկայացնում է երկու տարրով՝ <div> և <button>: Էջը ներմուծում է նաև style.css անունով CSS ֆայլ.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div id="box"></div>
    <button>Test Button</button>
  </body>
</html>

Երկու տարրերը ոճավորելու համար ստեղծեք style.css ֆայլ նույն թղթապանակում, ինչ HTML-ը և ավելացրեք հետևյալը.

#box {
  background: red;
  height: 400px;
  width: 400px;
  margin-bottom: 1rem;
  animation: rotateAndChangeColor 1000ms ease-in-out;
}
button {
  font-size: larger;
  background-color: white;
  border: 1px solid black;
  padding: 0.5em 1em;
  color: black;
  height: 80px;
  width: 300px;
  border-radius: 0.5em;
  transition: background-color 100ms ease-in-out, color 100ms ease-in-out;
  cursor: pointer;
}
button:hover {
  background-color: black;
  color: white;
}
@keyframes rotateAndChangeColor {
  0% {
    rotate: 0deg;
    background: red;
  }
  10% {
    background: green;
  }
  40% {
    background: blue;
  }
  70% {
    background: yellow;
  }
  100% {
    rotate: 360deg;
    background: red;
  }
}

Այս ոճերը ստեղծում են երկու բաղադրիչ.

  • Պարզ տուփ, որը պտտվում և փոխում է գույնը, երբ էջը բեռնվում է:
  • Կոճակ, որը փոխում է իր ֆոնի գույնը, երբ սավառնում եք դրա վրա:

Նկատի ունեցեք, որ կարմիր տուփը շարժվում է CSS @keyframe հրահանգի միջոցով, մինչդեռ կոճակը օգտագործում է անցում: Սա թույլ է տալիս համեմատել երկու մոտեցումները՝ օգտագործելով բրաուզերի DevTools-ը:

Ստուգեք անիմացիաները՝ օգտագործելով DevTools

Chrome DevTools-ում Անիմացիաներ ներդիր մուտք գործելու համար՝

  1. Աջ սեղմեք ձեր էջի վրա՝ համատեքստի ընտրացանկը բացելու համար:
  2. Սեղմեք Ստուգել:
  3. Կտտացրեք վերևի աջ անկյունում գտնվող եռակի կետերին:
  4. Նավարկեք դեպի Ավելի շատ գործիքներ > Շարժապատկերներ:

Սա կբացի անիմացիայի դարակը ներքևի հատվածում:

Ցանկացած անիմացիա, որը տեղի է ունենում ձեր էջում, կցուցադրվի այստեղ: Եթե թարմացնեք ձեր էջը և սավառնեք կոճակի վրա, անիմացիաները կհայտնվեն անիմացիաների ներդիրի տակ:

Իրական ուժը գալիս է, երբ սեղմում եք այս անիմացիաներից մեկի վրա: Օրինակ, եթե սեղմեք տուփի անիմացիայի վրա, կտեսնեք, որ զննարկիչը առանցքային շրջանակները ներկայացնում է հետևյալ կերպ.

DevTools-ը ցուցադրում է ձեր ընտրած տարրի հետ կապված բոլոր անիմացիաները: Քանի որ կարմիր տուփի համար սահմանված է միայն մեկ անիմացիա՝rotateAndChangeColor, դուք պարզապես կտեսնեք դրա մանրամասները:

Դուք կարող եք գիծը քաշել դեպի ձախ՝ անիմացիան շատ ավելի արագ դարձնելու համար կամ քաշել այն աջ՝ անիմացիան դանդաղեցնելու համար: Կարող եք նաև դադարեցնել անիմացիան որոշակի կետերում՝ միացնելով դադարի և նվագարկման պատկերակները: Վերևում գտնվող տոկոսները թույլ են տալիս անիմացիան խաղալ համապատասխանաբար իր սովորական արագության մեկ քառորդով և արագության մեկ տասներորդով:

Երբ ստուգեք կոճակի անցումը, DevTools-ը ցույց կտա անցման անհատական հատկությունները՝ գույնը և ֆոնի գույնը:

Այս գործիքը թույլ է տալիս շահարկել ձեր անիմացիան՝ տեսնելու, թե ինչպես է այն աշխատում: Դուք կարող եք օգտագործել այն ձեր վեբկայքի անսարքությունները վերացնելու համար, եթե կան խնդիրներ:

Ընդլայնված անիմացիայի օրինակներ

Սկսեք փոխարինելով նշագրումը ձեր HTML <body> թեգում հետևյալ նշագրմամբ.

<div class="move-me move-me-1">steps(4, end)</div>
<br />
<div class="move-me move-me-2">steps(4, start)</div>
<br />
<div class="move-me move-me-3">no steps</div>

Այնուհետև ձեր style.css ֆայլի բոլոր ոճերը փոխարինեք հետևյալով.

.move-me {
  display: inline-block; 
  padding: 20px;
  color: white;
  position: relative;
  margin: 0 0 10px 0;
}
.move-me-1 {
  animation: move-in-steps 8s steps(4, end) infinite;
}
.move-me-2 {
  animation: move-in-steps 8s steps(4, start) infinite;
}
.move-me-3 {
  animation: move-in-steps 8s infinite;
}
body {
  padding: 20px;
}
@keyframes move-in-steps {
  0% {
    left: 0;
    background: blue;
  }
  100% {
    left: 100%;
    background: red;
  }
}

Բոլոր <div> տարրերի վրա կիրառվում է քայլերով անիմացիան, որը փոխում է դիրքը և ֆոնի գույնը: Բացի դրանից, յուրաքանչյուր տուփ ունի տարբեր անիմացիա՝ վերահսկելու իր կատարած քայլերի քանակը:

Մինչ երրորդ տուփը անշեղորեն սահում է դեպի աջ, առաջին երկուսը միանգամից երկու քայլ կշարժվեն, մինչև նրանք բոլորը հասնեն էկրանի ծայրին (երկրորդ տուփը սկսվում է առաջին տուփից առաջ):

Եթե DevTools-ում բացեք Անիմացիաներ ներդիրը և թարմացնեք էջը, դուք կգտնեք այս անիմացիաների հետ կապված բոլոր տեղեկությունները.

Կան մի քանի տարրեր, որոնք բոլորը կենդանացնում են նույն ժամանակահատվածում: Այս սցենարում ֆոնի գույնը և տուփի դիրքը միաժամանակ շարժվում են բոլոր երեք տուփերի համար:

Մեկ այլ բան, որ պետք է նշել, յուրաքանչյուր անիմացիոն տողի հանգույցներն են: Երբ անիմացիան տեղի է ունենում անսահման թվով անգամ, հանգույցները ցույց են տալիս, թե որտեղ է սկսվում և ավարտվում յուրաքանչյուր կրկնություն անիմացիայի մեջ:

Դատարկ հանգույցները, ըստ էության, ձեր անիմացիայի հիմնական կադրերն են, մինչդեռ պինդ, գունավոր հանգույցները ներկայացնում են անիմացիայի սկիզբն ու ավարտը: Դուք կունենաք մուգ գույնի հանգույցներ ամեն անգամ, երբ ձեր անիմացիան նորից սկսվի:

Վերջապես, դուք կարող եք խմբագրել անիմացիաները՝ օգտագործելով DevTools-ը, ճիշտ այնպես, ինչպես կարող եք ցանկացած CSS հատկության դեպքում: Բոլոր փոփոխությունները, որոնք դուք անում եք՝ օգտագործելով անիմացիայի միջերեսը, կցուցադրվեն ներդիր ոճերում Ոճեր ներդիրում և հակառակը: Սա թույլ է տալիս փոփոխություններ կատարել, փորձարկել դրանք և պատճենել դրանք ձեր իրական նախագծում:

Օգտագործեք Chrome DevTools՝ ձեր CSS-ը վրիպազերծելու համար

Google Chrome-ի DevTools-ի գործառույթը հիանալի գործիք է ձեր CSS-ը, ներառյալ անիմացիաները, վրիպազերծելու համար: Այն ապահովում է ձեր էջի յուրաքանչյուր անցման և անիմացիայի մանրամասն դիտում, այնպես որ դուք կարող եք ճշգրիտ տեսնել, թե ինչ է կատարվում ամեն քայլափոխի:

Որպես վեբ ծրագրավորող՝ դուք պետք է ծանոթ լինեք ձեր զննարկչի DevTools ֆունկցիային կամ դրա համարժեքին: