Оптимізуємо елементи анімації

Почнемо з місця в кар’єр. Існує чотири основних елемента, за допомогою яких в сучасних браузерах можна задавати ефекти анімації: місце розташування, масштабування, обертання і компонування (накладення, прозорість).

Якщо ви хочете використовувати щось п’яте, то робите це на свій страх і ризик. І в такому випадку завжди є ймовірність, що не все буде працювати коректно.

У запропонованому відеоролику ви можете побачити в уповільненому режимі, як працює елемент анімації зміна місця положення:

У першому випадку ефекти задаються за допомогою перетворень, у другому – без. Ви можете бачити, як відрізняються один від одного обидва методу. Давайте розглянемо чому.

Від DOM до пікселям DevTools

При використанні Chrome DevTools зміна об’єкта в часі буде виглядати приблизно наступним чином:

Режим кадру Chrome DevTools. Чим більше перепад рівнів ви ставите, тим більше роботи у браузера.

Послідовність процесів, які виконує браузер при відображенні ефектів анімації, досить проста: визначення стилів, які застосовуються для елементів (розрахунок стилів), генерація координат місця розташування кожного об’єкта (структура), розрахунок кольору кожного пікселя кожного об’єкта різних шарів (визначення параметрів кольорів і заливка об’єктів) і виведення шарів на екран (компонування шарів).

Щоб забезпечити коректне відображення ефектів анімації – без різких стрибків і перепадів – і в принципі, щоб забезпечити оптимальну роботу елемента, слід правильно задавати властивості, які відповідають за взаємодію різних верств — переходи і компонування.

Чим більше різних переходів за одиницю часу ви ставите, тим більшу кількість інформації браузер повинен обробити виводу пікселів на екран.

Це порада для веб-розробників в принципі. Chrome, Firefox, Safari і Opera — всі вони використовують апаратне прискорення при обчисленні переходів і компонування. На жаль, не ясно, які критерії використовуються для визначення апаратного прискорення в Internet Explorer 10 і вище. Сподіваюся, ситуація проясниться, коли в IE11 буде реалізований набір інструментів для F12.

Анімація структурних елементів

При зміні об’єкта браузеру, можливо, буде потрібно сформувати нову структуру, що, зокрема, буде включати в себе розрахунок геометрії (місце розташування та розмір) всіх елементів, які змінюються. При зміні одного елемента, можливо, доведеться перераховувати геометрію інших елементів.

Наприклад, якщо Ви змінюєте ширину будь-якого елемента html, це може вплинути на розміри всіх його дочірніх елементів. У зв’язку з великою кількістю взаємозв’язків між елементами перерахунок всього дерева дочірніх об’єктів може вилитися в глобальну зміну, яке торкнеться всю сторінку.

Чим разветвленнее ієрархія візуальних елементів, тим більше часу потрібно на виконання всіх розрахунків. Тому ви повинні намагатися уникнути зміни властивостей параметрів, пов’язаних зі структурою.

Ви застосовуєте для визначення різних елементів, які використовуються додатками, класи стилів? Коли ці елементи змінюються, браузеру, можливо, доведеться зробити перерахунок всіх стилів і структури. Зверніть увагу на взаємозв’язку елементів, що є частинами додатків. Самі вони можуть і не бути анімованими, але пов’язані з ними. У цьому випадку можливі досить великі складності!

Нижче наводиться список найбільш поширених властивостей CSS, зміна яких зачіпає і структуру:

Стилі, які впливають на структуру

Анімація елементів кольору

Зміна елемента може також бути пов’язане зі зміною кольору. В більшості сучасних браузерів розрахунок квітів здійснюється програмним растерайзером. В залежності від того, як елементи пов’язані між собою в структурі вашої сторінки, зміна кольору одного елемента може викликати необхідність змінити кольори пов’язаних елементів.

Якщо ви новачок в питаннях, що стосуються концепції шарів, радимо вам ознайомитися з введенням до цієї теми Тома Вильциуса.

Є велика кількість параметрів, пов’язаних з зміною кольору, але нижче наводяться найпоширеніші з них:

Стилі, які впливають на кольори

Джерело: http://goo.gl/lPVJY6

При завданні ефектів анімації для будь-якого з вказаних вище параметрів елемента(ів), автоматично повинні оновлюватися та параметри всіх елементів шару, до якого вони належать. Для мобільних пристроїв це особливо актуально.

Процесори мобільних девайсів мають меншу потужність, ніж у їхніх стаціонарних аналогів, а значить, процес обробки кольорів займає більше часу. А так як пропускна здатність каналу між процесором і GPU відеокарти обмежена, завантаження текстур також може сильно затягнути весь процес.

Анімація елементів компонування

На відміну від параметрів кольору, в CSS існує тільки один параметр для задання елемента компонування. Зміна накладення одного об’єкта на інший (через прозорість їх текстури) може оброблятися графічним процесором комп’ютера під час компонування елементів.

Просто через завдання більшої щільності заливки об’єкта. Однак щоб це працювало, об’єкт повинен бути єдиним в шарі. Якщо ж зробити його прозорим, в той час як він пов’язаний з іншими об’єктами шару (що є некоректним), тоді при завантаженні в GPU разом з заданим об’єктом з екрану зникнуть і всі пов’язані елементи.

У браузерах, заснованих на Blink і WebKit, новий шар автоматично створюється для будь-якого елемента, який має перехід стилів або анімаційні ефекти прозорості. Але багато розробники, щоб примусово створювати шари, використовують translateZ (0) або translate3d (0,0,0).

Хоча примусово створені шари не гарантують, що структури будуть забарвлюватися правильно або працювати коректно, після того, як запрацюють на виконання ефекти анімації (створення і заливка верств це складна операція, яка може сповільнити запуск анімації), цим же досягається відсутність різких стрибків при виведенні анімації за рахунок згладжування змін. До підбору шарів слід підходити виважено, інакше ви ризикуєте перестаратися, і надто велику кількість шарів призведе до какофонії.

У Chrome для позакореневих шарів використовуються відтінки сірого, а не субпіксельне згладжування. Вони можуть відображатися некоректно при різкій зміні методів згладжування. Тому, якщо ви збираєтеся використовувати на сторінці елементи анімації, не чекайте, поки недоліки проявляться під час виконання, а проінспектуйте всі елементи заздалегідь.

Ефект може полягати в зміні місця розташування об’єкта, його обертанні або зміні розмірів. Часто переміщення об’єкта задається зміною значень відступи праворуч і зверху.

Проблема полягає в тому, що зміна цих значень може вплинути на розташування інших об’єктів шару. Тому правильніше буде використовувати перетворення, які не тягнуть за собою зміну параметрів інших елементів цього шару.

У Chrome Canary і Safari можна також задавати ефекти анімації для фільтрів. Вони обробляються в основному потоці розрахунку сторінки, що в цілому прискорює весь процес. Однак фільтри поки не підтримуються Internet Explorer і Firefox, тому застосовуйте цей метод досить обачно.

Імператив проти декларативного методу

Веб-розробники часто стають перед вибором, який метод використовувати при виведенні анімації: з JavaScript (імперативний) або CSS (декларативний). У кожного з них є свої плюси і мінуси. Давайте розглянемо їх детальніше:

Імператив

Основна перевага імперативного методу відбувається з його природи: він працює на базі JavaScript і обробляється в основному потоці браузера. Проте буває так, що основний потік вже зайнятий обробкою іншого JavaScript: наприклад, визначення стилю, структури або заливки. Нерідко трапляється так, що потоки конкурують між собою. В результаті істотно збільшується ймовірність того, що якийсь кадр анімації буде пропущений. Чого ви, природно, менше всього хотіли б.

Звичайно, застосування JavaScript дає вам більше інструментів управління анімацією: старт, пауза, зворотна прокрутка, перескакування з елемента на елемент, скасування анімації. А також деякі специфічні ефекти. Наприклад, паралакса прокрутки може бути реалізований тільки через JavaScript.

Декларативний метод

Альтернативним підходом є опис переходів і ефектів анімації через CSS. Основною перевагою даного методу є те, що браузер сам може оптимізувати анімацію. Він може примусово створювати власні шари і, якщо це необхідно, запустити деякі операції в головному потоці.

Що, як ви переконалися, оптимізує висновок сторінки. Основними мінусом CSS для багатьох є те, що йому не вистачає того різноманіття виразних інструментів, які можна реалізувати через JavaScript. При спробах описати ефекти, подібні до тих, що існують в JavaScript, засобами CSS трапляється так, що код стає занадто складним і громіздким. А значить, істотно збільшується ймовірність помилок.

Погляд у майбутнє

Стандарти веб-програмування еволюціонують, і деякі з обмежень, які існують на сьогоднішній день, незабаром будуть усунені. Наприклад, вже зараз існує цікаві пропозиції від Яна Воллика з Google, який впритул займається концепцією дозволу JavaScript-анімації. Вона забезпечує обробку різних об’єктів, яка не зачіпає інші елементи структури сторінки.

Тим, кому цікаво отримати більше інформації про декларативному підході до анімації, ми б рекомендували ознайомитися зі Специфікаціями веб-анімації, в яких Джейк Арчибальд досліджував дану тему дуже глибоко.

Висновок

Анімація є ключем до того, щоб справити сильне враження на користувача. Однак ви завжди повинні стежити, щоб застосування ефектів анімації не зачіпало параметрів, які спричинять за собою глобальні зміни структури або колірної гами сторінки.

І те і інше може мати непередбачувані наслідки і призвести до випадання кадрів. Застосування декларативного методу анімації краще імперативу, так як браузери в цьому випадку можуть самостійно оптимізувати виводиться картинку.

Також на сьогоднішній день при завданні ефектів переміщення об’єктів рекомендується використовувати перетворення елементів, а не зміна відступів праворуч і зверху. GPU комп’ютерів отже гранично завантажені великими обсягами даних з «важких» сайтів, і буде добре, якщо ви обмежите навантаження на ресурси машини хоча б в цьому плані.

• Прозорість (накладення);
• Зміна місця положення (переміщення);
• Обертання;
• Масштаб (зміну розмірів).

У майбутньому, можливо, з’являться нові методи анімації, які дозволять вам створювати настільки ж виразні ефекти, що і через JavaScript, але при цьому не завантажувати основний потік. Або ж настільки ж щадні до обчислювальних ресурсів, як CSS, але позбавлені обмежень даного методу.

Але до того часу для коректної і гладкою роботи ваших анімаційних шоу ми б рекомендували обмежитися тільки перерахованими вище чотирма елементами.

Переклад статті «High Performance Animations» був підготовлений дружною командою проекту Сайтостроение від А до Я.