3.3. Растровая и векторная анимация

Определения и обозначения

Анимация — последовательная смена изображений или состояний объектов, создающая иллюзию движения. Например, если мяч на каждом следующем изображении немного смещён, зритель увидит его перемещение. Это понятие помогает описать принцип мультфильма или движущейся картинки.

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

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

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

Как это устроено

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

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

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

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

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

Сравнение растровой и векторной анимации

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

Разбор задач

1. Анимация в GIF

Условие. Определите, к какому виду относится анимация, если каждый её кадр сохранён как отдельная картинка GIF. Важно выяснить, что именно хранится в последовательности: готовые изображения или параметры объектов. Название формата само по себе не заменяет анализ способа представления кадров.

1. Сначала определяем, что кадр в условии — отдельная картинка.
2. Затем вспоминаем: растровое изображение состоит из пикселей, а каждый кадр в таком случае хранится как готовая картинка.
3. Сопоставляем это с определением: последовательность готовых растровых кадров относится к растровой анимации.

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

2. Мяч движется слева направо

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

1. В первом кадре помещаем мяч у левого края сцены.
2. Во втором и третьем кадрах сдвигаем его вправо на небольшое расстояние, каждый раз сохраняя одинаковый размер.
3. В четвёртом кадре продолжаем перемещение, а в пятом помещаем мяч у правого края.
4. Сравниваем соседние кадры: если разница между положениями меньше, скачок при смене изображения менее заметен.

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

3. Анимация логотипа

Условие. Сравним два способа анимировать логотип: хранить отдельную растровую картинку для каждого положения или задать один векторный объект и менять его координаты. Нужно учесть объём хранения, качество при увеличении и удобство редактирования. Предположим, что логотип состоит из простых фигур и надписи.

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

Ответ. Для такого логотипа удобнее векторный способ: он упрощает изменение координат и сохраняет чёткость при увеличении. Растровый вариант тоже может работать, но для каждого положения нужны готовые кадры. Если же логотип содержит сложную фотографическую текстуру, растровое представление может лучше передать её детали.

Типичные ошибки

Ошибка: считать векторной любую анимацию, в которой движутся отдельные предметы. Так рассуждают, потому что движение объекта кажется похожим на команду перемещения, но вид анимации определяют по способу хранения изображений. Проверьте себя: кадры хранятся как картинки из пикселей или как описания объектов и их параметров? Если это готовые растровые картинки, движение отдельных предметов не делает анимацию векторной.

Ошибка: путать кадр с объектом. В кадре могут находиться сразу фон, персонаж и другие детали, поэтому кадр описывает состояние всей сцены, а объект — только её часть. Чтобы проверить себя, спросите: «Это вся картинка в конкретный момент или один предмет внутри неё?» Ответ на этот вопрос помогает не смешивать два понятия.

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

Ошибка: считать, что увеличение частоты кадров всегда уменьшает размер файла. Больше кадров обычно означает больше данных, особенно когда каждый хранится как отдельное растровое изображение. Путаница возникает из-за того, что высокая частота иногда делает движение плавнее, но плавность и объём — разные свойства. Перед выводом уточните, как изменилось число кадров и в каком виде они хранятся.

Связь с другими темами

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

Что запомнить

• Анимация создаёт иллюзию движения последовательной сменой кадров.
• Кадр — отдельное состояние сцены в последовательности анимации.
• В растровой анимации каждый кадр хранится как изображение из пикселей.
• В векторной анимации изменяются параметры описанных графических объектов.
• Растровая анимация лучше подходит для сложных и фотографических изображений.
• Векторная анимация удобна для простых объектов, масштабирования и интерактивного управления.
• Плавность движения зависит от числа кадров и скорости их показа.