Подробно ръководство за настройка на CSS анимации с помощта на инструментите за разработчици на Chrome

В този учебник ще разгледаме раздела Анимации на инструментите за разработчици на Chrome. Тази функция е особено полезна, когато работиш с CSS анимации и преходи или искаш да изучиш съществуващи анимации. Ще научиш как да анализираш и оптимизираш анимациите подробно, за да подобриш тяхната производителност чрез настройки на времевата функция и свойствата. Да разгледаме заедно различните стъпки.

Най-важните изводи

• Разделът за анимации предоставя визуално изображение на CSS анимации.
• Можеш детайлно да разгледаш и настроиш хода на анимацията.
• Промените във времената и свойствата на анимациите могат значително да увеличат производителността.

Стъпка по стъпка насоки

Първо трябва да отвориш инструментите за разработчици на Chrome. Натисни клавиш F12 или щракни с десния бутон на мишката върху уебсайта и избери "Изследване".

След като се отворят инструментите за разработчици, навигирай към раздела "Анимации", който се намира в меню "Инструменти". Кликни върху него, за да активираш раздела Анимации.

Сега си на страница със стартираща анимация. В нашия пример използваме страницата "animatestyle". Презареди страницата, за да наблюдаваш анимацията, която ще се появи в момента, когато се появи на екрана.

След като страницата е презаредена, ще видиш анимацията, която скача отгоре надолу. Разделът Анимации сега ти показва текущо изпълняващата се анимация в цикъл.

Когато минаеш с мишката върху анимацията, тя се възпроизвежда в цикъл. Кликни върху дисплея в раздела Анимации, за да видиш анимацията по-подробно.

Важна част от раздела Анимации е маркера, който можеш да използваш, за да анализираш статуса на анимацията. Премести този маркер, за да видиш къде започват и завършват различните анимации и преходи и да наблюдаваш съответните криви.

Когато разглеждаш конкретна анимация - в този пример "увеличаване отгоре надолу" - можеш да видиш детайлите на анимацията. Възможно е да идентифицираш различни точки на анимацията и да разбереш как се развиват.

Имаш възможността да приспособиш анимацията направо. Например можеш да плъзнеш маркера напред, за да видиш как изглежда анимацията, когато правиш промени.

Тези приспособления ще ти помогнат да разбереш какви ефекти може да има промяна в хода на анимацията и свойствата.

За да промениш скоростта на възпроизвеждане, можеш да използваш процентите, предоставени в раздела за анимации. Бутонът „Пуск“ ти позволява да провериш коригираната анимация от началото.

След като си доволен от направените промени, презареди страницата, за да видиш дали се зареждат оригинални анимации или променените от теб анимации.

Разделът за анимации е особено ценен, когато искаш детайлно да изучиш анимации, за да направиш приспособления, които да подобрят крайния резултат.

Погледът върху „Продължителност на анимацията“ дава бърз преглед на продължителността на твоята анимация. Като кликнеш върху продължителността, можеш да идентифицираш конкретната секция, в която е настроена анимацията.

Посредством такива промени таблетката за анимации позволява фино настройване на анимациите. Можете да копирате CSS кода за анимациите, за да ги използвате по-късно в собствените си стилове.

Това беше подробно въведение в таблетката за анимации на Chrome Developer Tools.

Резюме

В този урок научихте как да анализирате и променяте CSS анимации в таблетката за анимации на Chrome Developer Tools. Прегледахме необходимите стъпки за разглеждане на анимации, промяна на техните параметри и оптимизиране на тяхната производителност.