Оптимизируем элементы анимации

Начнем с места в карьер. Существует четыре основных элемента, с помощью которых в современных браузерах можно задавать эффекты анимации: местоположение, масштаб, вращение и компоновка (наложение, прозрачность).

Если вы хотите использовать что-то пятое, то делаете это на свой страх и риск. И в таком случае всегда есть вероятность, что не все будет работать корректно.

В предлагаемом видеоролике вы можете увидеть в замедленном режиме, как работает элемент анимации изменение места положения:

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

От DOM к пикселям DevTools

При использовании Chrome DevTools изменение объекта во времени будет выглядеть приблизительно следующим образом:

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

Последовательность процессов, которые выполняет браузер при отображении эффектов анимации, довольно проста: определение стилей, которые применяются для элементов (расчет стилей), генерация координат местоположения каждого объекта (структура), расчет цвета каждого пикселя каждого объекта разных слоев (определение настроек цветов и заливка объектов) и выведение слоев на экран (компоновка слоев).

Чтобы обеспечить корректное отображение эффектов анимации – без резких скачков и перепадов – и в принципе, чтобы обеспечить оптимальную работу элемента, следует правильно задавать свойства, которые отвечают за взаимодействие разных слоев - переходы и компоновка.

Чем больше различных переходов за единицу времени вы задаете, тем большее количество информации браузер должен обработать при выводе пикселей на экран.

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

При изменении объекта браузеру, возможно, потребуется сформировать новую структуру, что в том числе будет включать в себя расчет геометрии (местоположение и размер) всех элементов, которые изменяются. При изменении одного элемента, возможно, придется пересчитывать геометрию других элементов.

Например, если Вы изменяете ширину любого элемента html, это может повлиять на размеры всех его дочерних элементов. В связи с большим количеством взаимосвязей между элементами пересчет всего дерева дочерних объектов может вылиться в глобальное изменение, которое затронет всю страницу.

Чем разветвленнее иерархия визуальных элементов, тем больше времени потребуется на выполнение всех расчетов. Поэтому вы должны стараться избежать изменения свойств параметров, связанных со структурой.

Ниже приводится список самых распространенных свойств CSS, изменение которых задевает и структуру:

Стили, которые влияют на структуру

Анимация элементов цвета

Изменение элемента может также быть связано с изменением цвета. В большинстве современных браузеров расчет цветов производится программным растерайзером. В зависимости от того, как элементы связаны между собой в структуре вашей страницы, изменение цвета одного элемента может вызвать необходимость изменить цвета связанных элементов.

Есть большое количество параметров, связанных с изменением цвета, но ниже приводятся самые распространенные из них:

Стили, которые влияют на цвета

Источник: http://goo.gl/lPVJY6

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

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

Анимация элементов компоновки

В отличие от параметров цвета, в CSS существует только один параметр для задания элемента компоновки. Изменение наложения одного объекта на другой (через прозрачность их текстуры) может обрабатываться графическим процессором компьютера во время компоновки элементов.

Просто через задание большей плотности заливки объекта. Однако чтобы это работало, объект должен быть единственным в слое. Если же сделать его прозрачным в то время как он связан с другими объектами слоя (что является некорректным), тогда при загрузке в GPU вместе с заданным объектом с экрана исчезнут и все связанные элементы.

В браузерах, основанных на Blink и WebKit, новый слой автоматически создается для любого элемента, который имеет переход стилей или анимационные эффекты прозрачности. Но многие разработчики, чтобы принудительно создавать слои, используют translateZ (0) или translate3d (0,0,0).

Хотя принудительно созданные слои не гарантируют, что структуры будут окрашиваться правильно или работать корректно, после того, как запустятся на исполнение эффекты анимации (создание и заливка слоев это сложная операция, которая может замедлить запуск анимации), этим же достигается отсутствие резких скачков при выводе анимации за счет сглаживания изменений. К подбору слоев следует подходить взвешенно, иначе вы рискуете перестараться, и слишком большое количество слоев приведет к какофонии.

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

Проблема заключается в том, что изменение этих значений может повлиять на местоположение других объектов слоя. Поэтому правильнее будет использовать преобразования, которые не влекут за собой изменение параметров других элементов данного слоя.

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

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

Императив

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

Конечно, применение JavaScript дает вам больше инструментов управления анимацией: старт, пауза, обратная прокрутка, перескакивание с элемента на элемент, отмена анимации. А также некоторые специфические эффекты. Например, параллакс прокрутки может быть реализован только через JavaScript.

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

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

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

Взгляд в будущее

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

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

Заключение

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

И то и другое может иметь непредсказуемые последствия и привести к выпадению кадров. Применение декларативного метода анимации предпочтительнее императива, так как браузеры в этом случае могут самостоятельно оптимизировать выводимую картинку.

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

• Прозрачность (наложение);
• Изменение места положения (перемещение);
• Вращение;
• Масштаб (изменение размеров).

В будущем, возможно, появятся новые методы анимации, которые позволят вам создавать столь же выразительные эффекты, что и через JavaScript, но при этом не загружать основной поток. Или же столь же щадящие к вычислительным ресурсам, как CSS, но лишенные ограничений данного метода.

Но до того времени для корректной и гладкой работы ваших анимационных шоу мы бы рекомендовали ограничиться только перечисленными выше четырьмя элементами.