§ 48. Анимация

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

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

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

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

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

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

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

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

Чтобы показать перемещение, объект размещают в разных местах последовательных кадров. Например, в первом кадре мяч находится слева, а в следующих постепенно приближается к правому краю. Тогда зритель связывает положения в правильном порядке и воспринимает их как путь мяча. Большой скачок между двумя соседними положениями создаёт резкий рывок, потому что промежуточные этапы движения не показаны.

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

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

Способы создания анимации

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

Разбор задач

Мяч движется слева направо в нескольких кадрах

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

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

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

Переход между начальным и конечным положениями

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

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

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

Мяч движется рывками и заканчивает раньше времени

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

1. Просмотрим последовательные кадры и сравним положения мяча. Если он за один шаг перемещается далеко, добавим промежуточные положения или уменьшим шаг.
2. Проверим частоту кадров. Она влияет на то, сколько изображений показывается за секунду, поэтому может менять плавность и скорость воспроизведения.
3. Посмотрим на временную шкалу и увеличим длительность анимации, если действие должно продолжаться дольше. Убедимся, что конечное событие не стоит слишком рано.
4. Запустим анимацию целиком ещё раз. Если рывки или раннее завершение остались, проверим порядок кадров и повторно отрегулируем параметры.

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

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

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

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

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

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

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

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

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

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