Виды анимации

 

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

Функциональная анимация – это анимация взаимодействия пользователя с объектами интерфейса. Например, открытие pop-up окон, получение уведомления об отправке заявки, эффекты наведения на кнопки, раскрывание списков, смена состояния иконок, смена внешнего вида курсора при наведении на объекты или при drag-and-drop. Задача функциональной анимации - помочь пользователю отличить нефункциональные объекты, например, фоновые, от функциональных элементов, с которыми он может как-то взаимодействовать. Другими словами, эта анимация отражает реакцию интерфейса на поведение пользователей, даёт им своего рода подсказки: «что произойдёт, если нажать сюда».

Эстетическая анимации. Отвечает за красоту, марафет, эмоции. Её задача - погрузить пользователя в проект, сделать сайт живее, динамичнее, интереснее.

 

 

1.4. ТЕХНОЛОГИИ, ИСПОЛЬЗУЕМЫЕ ДЛЯ СОЗДАНИЯ ВЕБ-АНИМАЦИЙ

В основном для создания анимированных веб-страниц разработчики пользуются CSS-анимациями и переходами или JavaScript.

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

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

SVG-анимации (Scalable Vector Graphics - масштабируемая векторная графика) - это формат векторной графики, который может использоваться в интернете. SVG-анимации выглядят очень четкими благодаря тому, что векторы не имеют никаких пиксельных ограничений. Не важно, как вы измените размеры страницы, – SVG будет сохранять свой вид и не потеряет качество, в отличие от растровых изображений.

Canvas-анимации. С canvas-анимациями вы получаете отличную производительность при анимировании множества визуальных объектов. Canvas предоставляет визуальное пространство, где вы можете создавать сложные анимации с высокопроизводительным рендерингом. При этом canvas-анимации работают с пикселями. Это отличный способ делать комплексные и красивые анимации. Взаимодействуя с пикселями, вы можете создавать сложные вещи и при этом не утяжелять производительность. Так что это отличный выбор для сложных рисунков и взаимодействий.

WebGL – это Web Graphics Library (библиотека веб-графики). В основном, используется для сложных эффектов и 3D. Также ее можно использовать при создании анимаций для виртуальной реальности. WebGL позволяет рендеринг графики при 60 кадрах в секунду. Для создания анимаций, аналогичных WebGL, вы также можете использовать Canvas, но это будет сложнее. Большинство красивых и креативных визуальных эффектов созданы с помощью WebGL.