Что такое анимация во фронтенд разработке и как ее использовать? Разбираем движение света от фонаря

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

Что такое креативная разработка и как я к ней пришла

Всю веб-разработку условно делят 2 области:

Продуктовая разработка — работа с крупным проектом, например банковским приложением или онлайн-магазином.

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

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

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

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

Как сделать анимацию света от фонаря: Пошаговый план

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

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

Пример макета

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

Шаг 1. Как перенести свет из макета на html страницу

Есть несколько вариантов:

1. Посмотреть, что там наколдовал дизайнер и повторить это кодом. Было бы здорово, но у света нестандартная форма, повторить ее чистым css + html не получится. Если бы свет был в форме круга или прямоугольника, мы могли бы попробовать просто создать <div> и скопировать стили.

2. Вторым логичным вариантом будет выгрузить свет в svg формате: например, на CodePen можно подробнее изучить код.

Это хороший и простой способ, но есть нюанс.
Дизайнер использовал filter blur, чтобы размыть края:

			<filter id="filterId" width="588" height="994" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
  <feFlood flood-opacity="0" result="..."/>
  <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
  <feGaussianBlur stdDeviation="15" result="..."/>
</filter>
		

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

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

Шаг 2. Проанализируем анимацию

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

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

Свет исходит от фонаря, а значит, они будут двигаться вместе.

Как бы это выглядело с фонарем:

Теперь нужно понять, как реализовать такое движение. Для этого рассмотрим наши технические возможности.

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

• translateX, translateY — перемещение по горизонтали и вертикали;

• rotate — вращение.

При изучении движения света от фонаря, можно заметить, что оно похоже на движение маятника, которое мы когда-то изучали на уроках физики:

Траектория движения маятника

Траектория движения маятника — дуга, как видно по пунктирной линии.

Отсюда делаем предположение, что свойство transform: rotate() скорее всего, подойдет.

Что мы поняли по характеру движения:

• Свет нужно вращать;

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

Шаг 3. Теперь попробуем прописать это кодом.

Как вращать мы поняли, будем использовать свойство transform: rotate()

Теперь про точку привязки:

Если мы используем свойство transform, у нас добавляется бонус — свойство transform-origin. Оно нужно, чтобы указать точку, относительно которой должна происходить трансформация. И мы можем прямо текстом указать center top — по центру наверху.

Добавим свойство tranform-origin:

			.light {
	transform-origin: center top;
}
		

Отлично! А как вообще заставить все это двигаться?

Для любой постоянной (зацикленной) анимации используется свойство animation. В нем мы можем указать название анимации, которую создадим через директиву @keyframes, длительность и продолжительность. Также и зациклить ее.

Кодом это будет выглядеть так:

			.light {
	transform-origin: center top;
	
	// добавляем анимацию
	animation: rotate-animation 1s infinite;
}
		

• rotate-animation — название анимации, которую мы далее создадим через директиву @keyframes;

• 1s — длительность анимации. Или время, за которое должно произойти то, что мы пропишем в директиве @keyframes;

• infinite — ключевое слово, которое сообщает, что нужно бесконечно проигрывать анимацию.

Степень вращения определим на глаз, допустим, от -5 до 5 градусов. Тогда директива @keyframes будет выглядеть так:

			@keyframes rotate-animation {
	from {
	  transform: rotate(-5deg);
	}
	to {
		transform: rotate(5deg);
	}
}
		

Но мы прописали только движение в одну сторону. Как сделать чередование?

Для этого есть свойство animation-direction, где есть значение alternate, которое вместе с свойством infinite сообщает, что движение должно быть постоянным и чередующимся: от начала до конца, потом обратно. Добавим animation-direction:

			.light {
	transform-origin: center top;
	
	// Добавим animation-direction alternate 
	animation: rotate-animation 1s infinite alternate;
}
		

На CodePen можно посмотреть весь код

И вот какая анимация у нас получается:

Все супер, анимация работает, но как-то неестественно. Свет дергается, движение не похоже на классическое движение маятника. Но как настроить плавность?

Шаг 4. Настраиваем функцию плавности

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

Чтобы ее настроить в связке с animation, используют свойство animation-timing-function

Расскажу про базовые функции плавности, потому что без них никуда:

linear — движение с постоянной скоростью.

Подходит только тогда, когда нужно показать какое-то постоянное движение, нет замедления ни в начале, ни в конце. Например, когда просто едет машина с постоянной скоростью:

В вебе редко можно встретить постоянное движение без остановок, поэтому когда не знаешь какой поставить easing, не используйте linear.

ease-in — движение с ускорением, без замедления

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

ease-out — движение с замедлением, но без ускорения.

Нужно только тогда, когда какой-то элемент появляется из-за пределов видимости.

ease-in-out — движение с одинаковым ускорением и замедлением.

Подходит под описание маятника. Анимация разгоняется на старте и с такой же скоростью замедляется в конце.

Как это выглядит:

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

Фишка в том, что замедление и ускорение одинаковое, поэтому и получается маятник.

ease

Эта функция чуть сложнее, у нее есть замедление и ускорение, но замедление более протяжное. Она идеально подходит для большого количества анимаций, особенно для интерфейсов. Лайфхак: когда не знаешь, что выбрать, оставляй ease.

Разобрав функции плавности, становится понятно, что в данном случае нужно использовать ease-in-out. Добавляем функцию плавности, и вот как теперь будет выглядеть описание анимации (Весь код можно посмотреть на CodePen):

			.light {
  ...
  /* постоянная анимация c ease-in-out функцией плавности */
  animation: rotate-animation 1s ease-in-out infinite alternate; 
}

		

Готово! Мы сделали прелоадер с простой анимацией покачивания света от фонаря:

Делаем выводы и двигаемся дальше

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

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

Я в своем телеграмм канале — https://t.me/HopeThinks рассказываю про креативную разработку, показываю свои работы и делюсь тем, что изучаю. Всем удачи в анимациях!