Гладко като масло: Постигане на 60 FPS анимации с CSS3

Анимационните елементи във вашите мобилни приложения са лесни.

Анимирането на елементи във вашите мобилни приложения правилно може също да е лесно ... ако следвате нашите съвети тук.

Въпреки че всички използват CSS3 анимации в мобилни в наши дни, много от тях не го правят правилно. Има най-добри практики, които трябва да се вземат предвид, които постоянно и значително се пренебрегват. Това се случва главно, защото все още има хора, които всъщност не разбират истинските причини, поради които тези практики съществуват и са толкова силно подкрепени.

В днешно време съществува толкова голям спектър от спецификации на устройството, че ако не оптимизирате кода си, за да го разгледате, вместо анимации, които са гладки като масло, в крайна сметка ще осигурите изпитване на subpar с най-висок дял.

Запомнете: въпреки че има някои от най-високите класове, водещи устройства, които продължават да бутат плика, все още по-голямата част от света използвате типа на устройството, което в сравнение с тези специални чудовища не е нищо друго освен абак с LCD.

Искаме да ви помогнем да използвате правилно силата на CSS3. За да направим точно това, първо трябва да разберем няколко неща.

Разберете времевата линия

Какво прави браузърът, докато изобразява и играе с елементите? Тази много проста времева линия се нарича Път за критично изобразяване.

Източник на изображението: www.csstriggers.com

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

1. Стилове

Браузърът започва да изчислява стиловете, които да се прилагат в елементи - Преизчислете стила.

2. Оформление

В следващия слой браузърът ще започне да генерира формата и позицията за всеки от тези елементи - Оформление. Тук браузърът задава свойствата на страницата като ширина и височина, както и нейните полета, или ляво / отгоре / дясно / отдолу например.

3. Боя

Браузърът вече ще започне да попълва пикселите за всеки елемент в слоеве. Свойствата, които използва, са например: сянка на кутията, радиус на рамката, цвят, цвят на фона и други.

4. Композитен

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

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

  • Позиция - преобразуване: translateX (n) преводY (n) преводZ (n);
  • Мащаб - трансформация: мащаб (n);
  • Въртене - преобразуване: завъртане (ndeg);
  • Непрозрачност - непрозрачност: n;

Как да постигнем 60 кадъра в секунда

Имайки това предвид, е време да запретнем ръкави и да започнем работа.

Да започнем с HTML. Ще създадем много проста структура и ще поставим менюто на приложението си в клас на оформление.

Да вървим за нея погрешен път

Вижте тези свойства, които сме променили? Трябва да избягвате да използвате преходи със свойствата ляво / отгоре / дясно / долу. Тези не създават течна анимация, защото браузърът създава оформления всеки път, което ще засегне всичките им деца.

Резултатът е нещо подобно:

Тази анимация изобщо не е гладка. Проверихме с DevTools Timeline, за да видим какво се случва под капака и това беше резултатът:

Зелените площи представляват времето, прекарано за изобразяване на анимация.

Това ясно показва, че FPS са нередовни и че работата е доста бавна.

„Зелената лента показва FPS. Високата лента показва, че анимацията се изобразява с 60 FPS. Ниска лента показва под-60 FPS. Така че в идеалния случай искате зелената лента да бъде постоянно висока през времевата линия. Тези червени ленти също показват боклук, така че, алтернативно, друг начин да прецените напредъка си е чрез премахване на тези червени ленти.
Благодаря ти, Кайс Баски!

Използване на Transform

Свойствата на преобразуване влияят на Композит. Тук казваме на браузъра, че слоевете ще бъдат боядисани и готови за стартиране веднага щом стартира анимацията, така че има по-малко икони при изобразяването на анимацията.

Точно това показва Timeline:

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

Работещи анимации в GPU

Тогава нека го вземем на едно ниво За да работи наистина гладко и мазно, ще използваме графичния процесор, за да изобразим анимацията.

Въпреки че translateZ () или translate3d () все още ще са необходими на някои браузъри като резервен, свойството за промяна на волята е бъдещето. Това прави, че промотира елементите в друг слой, така че браузърът не трябва да обмисля изобразяването на изображението или картината.

Вижте колко е гладка? Времевата линия потвърждава, че:

FPS на анимацията е много по-постоянна и анимацията става много по-бърза тук. Но там все още има дълъг кадър. Има още малко място в началото.

Спомняте ли си HTML структурата, създадена още в началото? Нека контролираме разделителното меню на приложението в тази структура с помощта на JavaScript:

Проблемът тук е, че като добавихме този клас в дивизията за оформление, направихме браузъра да преизчисли стиловете още веднъж - и това се отразява на ефективността на изобразяване.

60 FPS Smooth като масло решение

Какво става, ако вместо това менюто е създадено извън зоната за преглед? Разполагането с това в изолирана зона ще гарантира, че ще засегнете само елемента, който наистина искате да оживите.

Затова предлагаме следната HTML структура:

И сега можем да контролираме състоянието на менюто по малко по-различен начин. Ще манипулираме анимациите в клас, който се премахва, когато времето на прехода приключи, като използваме функцията transitionend в JavaScript.

Нека тогава да съберем всичко и да проверим резултатите.

Ето пълен напълно активиран пример CSS3 с всичко на правилното си място:

И какво ни показва Timeline?

Гладка като масло, разбирате ли?

Редактиране (17 август): Поради популярното търсене, ето един работен пример за вас, момчета:

Редактиране (23 февруари 2017 г.): Част II на тази статия е на живо! FLIP Вашите 60 FPS анимации, FLIP е добър

Жозе Росарио | Мобилен и преден експерт в OutSystems

Можете да изпечете торта с цялото това масло! Кажете на приятелите си: LinkedIn | Twitter | Facebook | електронна поща