Советы, библиотеки и дополнительные материалы по CSS-анимации29.03.2016 14:18

Введение

Была глубокая ночь. В темную комнату через деревянные окна проникал лунный свет. Он недостаточно освещал мой деревянный стол с ноутбуком, блокнотом и синей ручкой. Поэтому я протянул свою руку к настольной лампе и включил её.

На компьютере был открыт текстовой файл со списком статей и библиотек про веб-разработку. Он постоянно пополнялся новыми данными.

Свернув его, я пошел на улицу в поисках кинотеатра с Deadpool’ом запустил браузер и стал блуждать по окрестностям интернета. Во время прогулки я наткнулся на интересную js-библиотеку по созданию css-анимации, которую добавил в открытый до этого текстовой документ… Как оказалось, по этой теме у меня уже набралось больше 40 ссылок на материалы и библиотеки.
… С того дня в моей голове засела мысль: «Я так и не посмотрел Deadpool пора уже структурировать эту информацию и рассказать о ней людям». Поэтому во время работы над облачной IDE «mr. Gefest», я выделил несколько вечеров (оказалось далеко не несколько) для написания статьи, которую теперь Вы читаете.

В ней Вы узнаете, что такое css-анимация, какие существуют библиотеки (css/js), получите список готовых решений с других сайтов и узнаете о новой технологии web-анимации.

Итак, приступим.

СSS-анимация

CSS-анимация — это изумруд веб-технологий для оживления Ваших сайтов. При помощи неё можно создать красивые и плавные переходы (смена цвета, изменение размеров и так далее) у объектов без применения JavaScript.

Он состоит из CSS-Transitions и CSS-Animations.

Transitions позволяет управлять скоростью анимации при изменении css-свойств.
Animations предоставляет возможность создавать более сложные анимации с несколькими промежуточными переходами.

При создании эффектов часто используют CSS-Transforms и content pseudo-elements (псевдоэлементы).

Transforms дает возможность масштабировать, вращать, сдвигать и наклонять DOM-элемент.
Content pseudo-elements after и before позволяют добавлять содержимое (через css) до и после элемента без изменения html.

Я не буду подробно расписывать каждый элемент CSS-Transitions, CSS-Animations, CSS-Transforms и content pseudo-elements, потому что в интернете существуют статьи, отлично раскрывающие их:

Поддержка браузерами:
Обертки для создания кроссбраузерных CSS-Animations (key-frames):

Советы по СSS-анимации

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

Бывает откроешь блок с поиском, а там поле, заголовок и кнопка по-разному анимируется с разной скоростью. Будто мультик в интерфейсе. Это создает дискомфорт и неудобство.

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

! По возможности применяйте производительные css-свойства для анимации
При изменении css-свойств браузер проходит через 4 этапа отображения DOM: recalculate style, layout, paint, composite.

Вычисление стилей (recalculate style) — анализируется все CSS-правила и вычисления итогового style для каждого DOM-элемента.

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

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

Компоновка (composite) — собираются все прорисованные элементы в единую композицию.

Вычисление стилей, перерасчет макета (layout) и прорисовка (paint) потребляют гораздо больше ресурсов, чем composite (компоновка).

Например, для css-свойства »transform: translate» создается дополнительный, невидимый слой, в котором происходят все изменения. Он обрабатывается на этапе компоновки (в невидимом дополнительном слое без сдвига соседних элементов) и выполняется в GPU, а не в CPU. За счет использования GPU, изменения происходят плавно без задержек. Вы можете увидеть это на видео.

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

Одни css-свойства проходят через 4 этапа отображения, другие через один или два. Необходимо их знать и грамотно применять в анимации. Например, при изменении «Height» какого-то DOM-объекта браузеру придется пройти через recalculate style, layout, paint и composite, потому что из-за него могут сдвинуться другие элементы страницы, а значит для каждого из них тоже необходимо сделать перерасчет позиции, размеров и других параметров.

Старайтесь использовать только те css-свойства, которые будут проходить через компоновщик или Paint + Composite:

• transform: rotate;
• transform: scale;
• transform: translate;
• opacity;
• color.

Материалы по теме:
! Применяйте will-change для оптимизации анимации с умом
Относительно недавно появилось css-свойство — will-change. С его помощью можно сообщить браузеру, что конкретное свойство будет изменяться и его вычисления необходимо оптимизировать до начала анимации.

Will-change принимает следующие значения:

• auto — действия браузера по умолчанию/сбрасывает принудительную оптимизацию;
• scroll-position — ожидает анимацию/изменение полосы прокрутки конкретного элемента;
• contents — ожидает анимацию/изменение в контенте конкретного элемента;
• custom-ident — перечисление css-свойств через запятую.

Если написать:

.text {
        will-change: opacity;
        -webkit-transition: opactiy 0.5s ease;
        -moz-transition: opactiy 0.5s ease;
        -o-transition: opactiy 0.5s ease;
        transition: opactiy 0.5s ease;
}
.text:hover {
        opacity:0.6;
}

То браузер заранее постарается оптимизировать анимацию для ».text».

Некоторые веб-разработчики экспериментальным путем выяснили, что will-change лучше вставлять не сразу, а за мгновение до начала анимации, а после завершения — удалять, так как оптимизация забирает часть оперативной памяти. Если так не поступить, то сайт будет занимать дополнительную память, даже если 99% времени эта анимация не используется. Такое добавление и удаление will-change делается при помощи javascript.

Стоить учесть, что если на сайте присутствуют элементы, в которых часто вызывается анимация, то для них логично указать will-change сразу в стилях.

Поддержка браузеров:

• Chrome 36+;
• Firefox 36+;
• Opera 26+;
• Android 36+;
• Safari, IE, iOS — нет (на 22 марта).

Статьи для ознакомления:
! Грамотно подбирайте скорость анимации
При реализации разного рода эффектов в интерфейсе пользователя необходимо правильно подбирать скорость выполнения. Например, диалоговые окна во время открытия должны будто наплывать, медленно и плавно, а при закрытии быстро уходить (после выполнения задачи пользователи хотят побыстрее закрыть всплывающее окно). В среднем анимация не должна быть дольше 500 секунд.! Собирайте операции чтения и обновления в пакеты
Так делать нельзя:

var b1=document.getElementById('box1');
var b2=document.getElementById('box2');
var b3=document.getElementById('box3');

var b2W=b2.offsetWidth;
b2.style.left=b2W+'px';

var b3W=b3.offsetWidth;
b3.style.left=b3W+'px';

b1.style.left='0';

А так нужно:

var b1=document.getElementById('box1');
var b2=document.getElementById('box2');
var b3=document.getElementById('box3');

var b2W=b2.offsetWidth;
var b3W=b3.offsetWidth;

b2.style.left=b2W+'px';
b3.style.left=b3W+'px';
b1.style.left='0';

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

В плохом примере два раза происходит принудительный перерасчет макета в строчках »var b3W=b3.offsetWidth; » и »var b3W=b3.offsetWidth; », потому что до этого было изменено css-свойство (left). Без пересчёта браузер просто не сможет точно определить «offsetWidth», потому что есть вероятность, что новое значение css-свойства повлияло на него.

Пожалуйста, группируйте операции чтения и обновления!

Дополнительный материал:

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

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

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

Google Chrome

Через Chrome удобнее всего отлаживать анимацию. Во вкладке инструментов разработчика «Timeline» присутствует:

• Временная шкала с операциями отображения;
• Графические слепки сайта (скриншоты) для каждого шага;
• Подробный список этапов отображения;
• Общее время работы на каждом шаге;
• Подробное описание каждого этапа;
• Профилирование процесса отрисовки;
• И другие мелкие возможности.

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

В Safari анимация оценивается через вкладку «Шкала времени» раздела «Макет и рендеринг».

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

В Safari откладка анимации мне показалась мало информативна. Нет советов по его улучшению в отличие от Google Chrome.

Mozilla Firefox

Для тестирования анимации он подходит меньше всего. Есть временная шкала со всеми шагами по анимации и блоком их очередности. Подробная информация о этапах отсутствует.

Firefox больше подходит для тестирования процесса разбора html и работы сайта (выполненные операции сборщика мусора, разбор html/xml, редукция CC Graph и так далее).

! Применяйте функцию requestAnimationFrame
Раньше при создании анимации на js использовали setInterval/setTimeout. В них задавали интервал повторений (1000ms / 60(fps) = 16.7ms в идеале) и запускали эффекты. Это решение имело много недостатков:

• Если страница находится в неактивной вкладке, то она все равно будет работать и тратить ресурсы компьютера;
• Функция требует перерисовку экрана не в то же время, когда это требует компьютер. Поэтому устройству/ПК приходится использовать дополнительные ресурсы для синхронизации анимации с частотой обновлений экрана;
• Анимация может поддёргиваться, так как js — однопоточный и в тот момент, когда должна произойти анимация, может выполняться другая операция,

К счастью, технологии не стоят на месте. Для решения этих проблем была придумана функция requestAnimationFrame. Её преимущества:

• В неактивных вкладках анимация останавливается для экономии ресурсов компьютера (памяти, CPU, GPU и расход батареи);
• Скорость прорисовки (repaint) подстраивается под частоту обновления экрана и выполняется только тогда, когда компьютер к этому готов;
• Уменьшает FPS при сильных нагрузках для экономии батареи и ресурсов компьютера;
• Все анимации объединяются в одну браузерную перерисовку (а не выполняет по отдельности) — это уменьшает потребление ресурсов и ускоряет отображение.

Отрицательные стороны нового решения:

• В разных браузерах используется разный API (решается через polyfill);
• Сложно контролировать FPS анимации (только при помощи «костылей»);
• Не все браузеры поддерживают новую технологию, из-за чего в старых версиях используется все тот же setInterval (IE10+);
• Все вычисления надо делать за 16.7 mc (этого может не хватить).

Дополнительный материал:
! Выбирайте тип (css или js) библиотеки исходя из задачи
У каждого типа библиотеки есть недостатки и преимущества. Их стоит учитывать при выборе.

Преимущества css-библиотек:

• Удобно разрабатывать простые анимации;
• Некоторые свойства сразу выполняются в GPU;
• Не нужно утяжелять сайт js-кодом.

Недостатки css-библиотек:

• Трудно создавать и поддерживать сложные анимации;
• Недостаточный контроль над процессом анимации и его появлением (например, включить при клике или остановить на конкретной секунде выполнения).

Преимущества js-библиотек:

• Можно создать анимацию любой сложности;
• Присутствуют механизмы контроля анимации (включать/выключать, останавливать на конкретной секунде и так далее);
• В некоторых случаях применимы не только к css, но и к SVG и canvas;
• Иногда быстрее css-библиотек;
• Разнообразные easing function (с 2-мя и более точками кривых).

Недостатки js-библиотек:

• Увеличивает размер сайта;
• Избыточен для простых анимаций;
• Сложен для изучения.

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

Теперь перейдем к изучению css- и js-библиотек.

CSS-библиотеки

При помощи специальных css-библиотек можно быстро создать простую анимацию:

• Отскок;
• Тряска;
• Качели;
• Желе;
• Медленное исчезновение/появление;
• Кувырок;
• Поворот;
• Скольжение;
• и другие.

Анимация подключается через классы при помощи javascript или вручную. Рассмотрим существующие библиотеки.

JS-библиотеки

Как Вы понимаете, css — это декларативный язык. Вся его анимация линейна и не меняется в зависимости от ситуации. Поэтому на чистом css нельзя сделать нормальную анимационную логику.

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

Благодаря js-решениям можно точно сказать, куда будет перемещен объект на 3-ей секунде. В css достичь такого нельзя, так как все шаги определяются процентами, а не секундами. Можно только примерно узнать, куда объект будет перемещен. Если клиент захочет изменить анимацию, то придется снова все пересчитывать (при создании соответствий между процентом и возможной секундой), а это дополнительная трата времени.

Css-анимация не всегда работает быстрее js-решений (даже когда вычисления проходят в GPU). Об этом рассказано в статье от Css-trick (потерял ссылку, ищю).

Существующие библиотеки можно разделить по типу применения (стандартная анимация и узкоспециализированная) и их сложности (простые и сложные).

Простые:

Сложные: