Что такое анимация — простое объяснение и примеры

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

Как это работает (коротко и по делу)

Анимация опирается на эффект persistence of vision: если показывать кадры достаточно быстро (обычно от 12 до 24 fps и выше), мозг сливает их в непрерывное движение. В цифровой анимации применяют keyframes (ключевые кадры) и tweening (интерполяцию) — задают важные положения объекта, а программа заполняет промежутки.

Ключевые приёмы, которые сразу улучшат результат:

Squash & stretch: сжатие/растяжение придаёт массе и упругости.
Anticipation: подготовительное движение перед действием делает его понятнее.
Easing: плавные начала/концы движения (не linear) выглядят естественнее.

Виды анимации и примеры

2D (кадровая или векторная): рисунки, нарисованные вручную или векторно; инструменты — Adobe Animate, Toon Boom.
3D: модель, риггинг, анимация скелета; инструменты — Blender, Maya.
Stop-motion: физические модели с пофреймовым съёмом.
Моушен-графика: анимированная инфографика и логотипы, обычно в After Effects.
Cut-out: анимация вырезанных элементов (низкий порог входа).

Сравнение техник

Вид	Особенность	Кому подходит
2D (векторная)	Быстро править, меньше веса	Иллюстраторы, веб-дизайнеры
3D	Реалистичность, освещение	Кино, игры, визуализация
Stop-motion	Тактильность и уникальность	Арт-проекты, авторское кино
Моушен-графика	Инфографика и рекламные ролики	Маркетологи, студии контента

Практические примеры: как сделать простую анимацию быстро

GIF/браузер (CSS). Простейшая "прыжок":

@keyframes bounce {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-20px); }
  100% { transform: translateY(0); }
}
.element { animation: bounce 1s infinite ease-in-out; }

Примените к элементу в HTML — и он будет подпрыгивать. Для плавности используйте ease-in-out и не делайте длительность меньше 0.3s.

Смартфон (Canva/CapCut). Добавьте фото, дублируйте кадры, сдвиньте объект и поменяйте прозрачность/масштаб — получите короткую петлю. Для теста берите 12 fps, для готового ролика — 24 fps.

Для быстрых прототипов начинайте с 12 fps — хватает для циклов; на публике используйте 24 fps для более «киношного» вида.

Частые ошибки

Слишком жёсткие переходы (нет easing).
Неправильный fps: слишком низкий или смешение fps между клипами.
Игнорирование масштаба и перспективы.
Отсутствие anticipation/последствий (follow-through).
Перегрузка деталями: анимация должна помогать, а не отвлекать.

FAQ

С: Какой fps выбрать для веб-анимации?
О: Для интерфейсов 60 fps даёт лучшую отзывчивость; для анимационных роликов 24 fps — стандарт кино.
С: Нужны ли художественные навыки для моушен-графики?
О: Базовые навыки композиции и тайминга важнее сложного рисунка; многие эффекты делаются в векторе и с шаблонами.
С: С чего начать, если хочу анимировать персонажа?
О: Начните с простых упражнений: прыжок с anticipation, мяч с squash & stretch, затем переходите к walk cycle с ключевыми кадрами.