Переход от After Effects к CSS-переходам и ключевым кадрам

Веб-сайты все больше и больше напоминают мобильные приложения. Пользователи также все чаще ожидают более похожего на приложение опыта. От push-уведомлений до автономного режима — нативные веб-приложения становятся доступными.

Как только веб-приложения будут функционировать как нативные приложения, взаимодействие при проектировании также изменится в зависимости от варианта использования, а именно повсеместного распространения анимации. Анимации стимулируют взаимодействие во всех наших любимых приложениях, от Uber до Lyft и от Snapchat до Instagram.

Как веб-разработчикам, нам нужна хорошая основа для создания анимаций, которые будут одновременно производительными и удобными в сопровождении, что имеет первостепенное значение для нативного ландшафта веб-приложений. Нам нужно иметь возможность перейти от After Effects к CSS-переходам, анимации и ключевым кадрам.

Что такое After Effects?

After Effects — это стандартный продукт Adobe, используемый графическими и моушн-дизайнерами для наложения, компоновки и отслеживания анимации. Это де-факто инструмент, используемый многими дизайнерами для передачи идей команде путем экспорта анимационных слоев в легко визуализируемый пример видео, сопровождаемый справочной таблицей времени начала и окончания анимации.

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

Что мы можем делать с After Effects

То, что мы можем создать с помощью After Effects, ограничено только нашим воображением. Он может обеспечить бесконечное количество эффектов постобработки для изображения или видео. В рамках Интернета он предоставляет платформу для обмена идеями.

Рассмотрим красный шар выше. Мяч анимируется с помощью After Effects, чтобы медленно катиться к середине, делать паузу на секунду, а затем медленно ускоряться, чтобы выйти из области просмотра. Классические веб-анимации движения, масштабирования, поворота и даже изменения цвета легко выполняются в After Effects и служат мгновенно генерируемым документом требований (или видео или GIF) для реализации анимации.

Инструменты, необходимые для начала

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

CSS-переходы

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

 transition-property: background-color; transition-duration: 3s;

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

Переходы CSS хороши для простых взаимодействий , таких как изменение цвета фона или перемещение элемента в новое место.

Использование CSS-анимации

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

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

 @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-25px); } 60% { transform: translateY(-15px); } } .element { animation-name: bounce; animation-duration: 3s; }

Как и в случае с переходами CSS, разработчики могут настроить множество параметров. Мы можем сделать так, чтобы анимация повторялась бесконечно, используя animation-iteration-count со значением infinite , или даже управлять направлением, в котором течет анимация, используя свойство animation-direction . Множество свойств CSS-анимации дают нам возможность точного управления, чтобы анимация соответствовала дизайну.

Анимации CSS полезны для коротких повторяющихся анимаций , таких как расширение, вращение и отскоки.

Использование JavaScript

JavaScript имеет множество применений, от серверов Raspberry Pi до кода на стороне клиента, но одним из его основных применений остается изменение имен классов в элементах. Изменение имени класса — тривиальный, но эффективный способ управления состоянием элемента.

Примером может служить простое добавление active класса, который сигнализирует изначально скрытому компоненту о начале анимации. Рассмотрим мяч ниже. Мы используем JavaScript, чтобы добавить класс, который запускает анимацию, используя свойства перехода CSS.

Первую часть этой анимации можно воспроизвести, используя простую комбинацию HTML, CSS и JavaScript.

HTML:

 <div class="ball"></div>

CSS:

 .ball { width: 100px; height: 100px; color: red; transform: scale(0.25); transition: all 1s ease-in; } .ball.active { transform: scale(1.25); }

JavaScript:

 setTimeout(function() { document.querySelector('.ball').addClass('active'); }, 500);

Когда время ожидания ( 500ms ) истекает, к шару div добавляется класс active , который изменяет свойство transform , которое затем запускает свойство transition , которое отслеживает свойство transform элемента мяча. Изменение классов CSS с помощью JavaScript не только помогает нам управлять состоянием компонента, но также дает нам дополнительный контроль над анимацией помимо анимации и переходов CSS.

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

От идеи к After Effects, к CSS и JavaScript

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

After Effects позволяет нам создавать макеты того, как будет выглядеть взаимодействие при запуске анимации. Мяч в движении ниже является примером этого. Обратите внимание, как красный шар сначала слегка увеличивается, затем начинает ускоряться по круговой петле и замедляется, возвращаясь в исходное положение. Только после этого мяч уменьшается до исходного размера.

Рассмотрим сдвиг в масштабе выше, где мяч увеличивается или уменьшается перед движением или остановкой. Это крошечная функция, созданная дизайнером в After Effects, и ее необходимо четко сообщить разработчику, чтобы не упустить мельчайшие детали.

Вот почему перед переходом от After Effects к разработчику необходимо провести некоторую подготовку. Мы не могли просто создать видеофайл с анимацией в действии, поделиться им с разработчиком и закончить.

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

Еще один способ передать информацию об анимации — встроить ее в само видео . Вы можете сделать это прямо в After Effects, добавляя важную информацию, такую ​​как степень масштабирования, количество шагов и другую информацию по мере того, как это происходит, чтобы дать контекст разработчику. Это позволяет нам использовать демо-видео как универсальный источник правды .

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

1. Разделите анимацию

Ищите закономерности и отмечайте тайминги.

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

Из приведенной выше информации мы разбиваем ее на следующие шаги:

1. Инициализируйте компонент и дождитесь триггера.
2. После срабатывания увеличьте размер и разверните тень.
3. После этого двигайтесь по кругу с ease-in-out .
4. Затем уменьшите размер и уменьшите тень.

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

2. Ведите переговоры с заинтересованными сторонами

Можем ли мы упростить некоторые области? Какие части анимации обязательны? Можем ли мы синхронизировать тайминги?

Как только мы исследовали работу, необходимую для выполнения задачи, мы торгуемся. Торговаться с дизайнером и владельцем продукта — обязанность каждого разработчика. У исполнителя есть полное понимание ключевых низко висящих плодов, что можно сделать, а что делать нецелесообразно.

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

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

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

3. Спланируйте атаку

Знайте, каким должно быть начальное и конечное состояние каждого элемента. Посмотрите, где должно происходить время каждого перехода. Используйте БЭМ в классах CSS, чтобы четко применять анимацию. Поймите причины, по которым JavaScript следует ограничить в пользу CSS.

Давайте рассмотрим анимацию, описанную ранее. На нас бросаются пять штатов:

1. исходное состояние с красным шаром и тенью;
2. увеличенная версия шара с более длинной тенью;
3. движение мяча по кругу;
4. уменьшение шара вместе с его тенью;
5. возврат в исходное состояние, ожидание срабатывания.

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

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

Не усложняйте задачу , внося очень мало изменений в стили между состояниями. Как только мы определили начальное и конечное состояния, нам нужно пометить их как классы CSS, чтобы их можно было легко применить к элементу. Это дает нам возможность использовать JavaScript для обработки приложений классов на основе данных, полученных от вызовов AJAX, от которых может зависеть элемент.

BEM CSS идеально подходит для нашей стратегии именования из-за того, как мы будем представлять состояния наших анимаций в процессе с помощью модификаторов. Если анимация достаточно универсальна, BEM также является хорошей методологией для поддержки DRY («не повторяйся») классов CSS, которые работают в разных кодовых базах. Мы начнем только с маркеров блоков и элементов, а затем наложим модификаторы по мере прохождения анимации.

Вот пример пути к классу шаблона:

 // State 1 <div class="ball"></div> // State 2 <div class="ball ball--scale-up"></div> // State 3 <div class="ball ball--scale-up ball--circling"></div> // State 4 <div class="ball ball--scale-up ball--circling ball--scale-down"></div> // State 5 <div class="ball"></div>

Мы начинаем с элемента контейнера с классом ball, который будет представлять анимируемый нами красный шар. По мере того, как анимация повторяется, то же самое происходит и с именами наших классов БЭМ , от масштабирования до движения по кругу. Это метод отслеживания того, как должен выглядеть элемент при применении стилей.

4. Стабильная реализация

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

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

Начальное состояние

Начнем с простого красного шара с небольшой тенью.

 .ball { background-color: #D24D57; width: 25px; height: 25px; margin: 5px; display: inline-block; border-radius: 50%; box-shadow: 0 8px 6px -6px #6C7A89; }

Масштабирование

Увеличение масштаба состоит из двух частей: размера элемента и его тени. Мы используем ключевой кадр с именем scale , который используется как для увеличения, так и для уменьшения масштаба для DRY-ness, чтобы обрабатывать эту анимацию.

 @keyframes ball-scale { from { transform: scale(1); box-shadow: 0 8px 6px -6px #6C7A89; } to { transform: scale(1.25); box-shadow: 0 10px 6px -6px #6C7A89; } } .ball--scale-up { animation: ball-scale 1s ease-out forwards; }

Кружение (после применения анимации увеличения)

Мы используем ключевой кадр с именем circular , а также перемещаем его свойство transform-origin , чтобы перемещать элемент по кругу, начиная с самого начала. Имейте в виду, что кружение происходит только после завершения анимации масштабирования.

 @keyframes ball-circular { from { box-shadow: 0 10px 6px -6px #6C7A89; transform-origin: 50% -450%; transform: scale(1.25) rotate(0deg) translateY(-100%) rotate(0deg); } to { box-shadow: 0 10px 6px -6px #6C7A89; transform-origin: 50% -450%; transform: scale(1.25) rotate(360deg) translateY(-100%) rotate(-360deg); } } .ball--circling { animation: ball-circular 2s ease-in-out forwards; }

Уменьшение масштаба (после применения анимаций кружения и увеличения)

Чтобы уменьшить масштаб, мы повторно используем масштаб ключевого кадра с animation-direction: reverse , чтобы сделать противоположное тому, что делает класс масштабирования. Это возвращает нас в исходное состояние.

 .ball--scale-down { animation: ball-scale 1s ease-in forwards; animation-direction: reverse; }

Рабочая демонстрация

Если мы объединим все эти классы в последовательность, у нас будет CSS-представление рендеринга, выполненного в After Effects.

Нажмите на шар, чтобы начать.

См. Pen Animating Ball Криса Нг (@chrisrng) на CodePen.

Заключение

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

Раньше реализовать анимацию было сложно, потому что это означало использование внешних инструментов, таких как jQuery Animate, для выполнения простых задач, таких как перемещение элементов по странице. Сегодня CSS-переходы и анимацию можно выполнять нативно и эффективно, используя GPU.

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