Как работает твининг: ключевые кадры, интерполяция и примеры для начинающих

Что такое твининг: от первых мультфильмов до анимации в Scratch и Roblox

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

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

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

Разберём, как работает твининг, чем он отличается от покадровой анимации и как самостоятельно сделать плавное движение персонажа.

Что такое твининг в анимации

Твининг (tweening, от in-betweening) — это создание промежуточных кадров или состояний между ключевыми кадрами анимации. Благодаря им зритель видит непрерывное движение или постепенное изменение объекта.

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

Представим мяч, который перемещается слева направо за десять кадров:

Кадр 1: мяч находится слева.
Кадры 2–9: мяч последовательно занимает восемь промежуточных положений.
Кадр 10: мяч достигает правой стороны экрана.

Эти восемь промежуточных кадров и называют in-betweens.

Раньше художники прорисовывали их вручную. Сегодня программы для анимации могут автоматически рассчитывать многие промежуточные положения.

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

Как работает твининг

В основе цифрового твининга лежит интерполяция — математический способ расчёта промежуточных значений.

Аниматор задаёт начальное и конечное состояния объекта, а программа вычисляет, как он должен изменяться между ними.

Допустим, мяч движется по горизонтали. В начале его координата равна 0, а через две секунды должна стать равной 100.

При линейной интерполяции движение будет выглядеть так:

Время	Координата по горизонтали
0 секунд	0
0,5 секунды	25
1 секунда	50
1,5 секунды	75
2 секунды	100

Мяч проходит одинаковые расстояния за равные промежутки времени, поэтому его скорость остаётся постоянной.

Аниматору не приходится задавать каждую координату вручную. Достаточно указать начальное и конечное положения и продолжительность движения.

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

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

Ключевые и промежуточные кадры выполняют разные задачи.

Ключевые кадры (keyframes) задают важные состояния. Например, на одном кадре персонаж держит руку опущенной, а на другом — поднятой.

Промежуточные кадры (in-betweens) показывают, как рука перемещается между этими положениями.

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

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

От чего зависит плавность анимации

На восприятие движения особенно влияют три параметра:

Timing (время движения). Определяет продолжительность действия. Если мяч пересекает экран за полсекунды, он кажется гораздо быстрее, чем при движении в течение пяти секунд.
Spacing (расстояние между положениями). Показывает, насколько объект смещается от одного кадра к следующему. Равные промежутки дают постоянную скорость, а изменяющиеся помогают передать ускорение и торможение.
Frame rate (частота кадров). Определяет количество кадров, показываемых за секунду. В анимации часто используют 24 или 30 кадров в секунду, хотя встречаются и другие значения.

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

Основные виды твининга

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

Рассмотрим шесть распространённых вариантов.

1. Motion tweening — анимация движения

Этот вид твининга позволяет изменять положение объекта и другие параметры его трансформации.

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

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

В зависимости от программы и настроек объект может двигаться по прямой или следовать более сложной траектории.

2. Shape tweening — превращение одной фигуры в другую

Shape tweening позволяет постепенно менять форму объекта. Такой эффект также называют морфингом (morphing).

Например, на первом ключевом кадре изображён квадрат, а на последнем — круг. Программа рассчитывает промежуточные формы, чтобы квадрат постепенно превратился в круг.

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

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

В некоторых редакторах, включая Adobe Animate, для управления такими превращениями предусмотрены специальные подсказки формы — shape hints.

3. Rotation tweening — вращение

Этот способ используется, когда нужно постепенно изменить угол поворота объекта.

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

Аниматор управляет направлением, скоростью и количеством оборотов. Доступные настройки зависят от используемой программы.

4. Scale tweening — изменение размера

Scale tweening позволяет плавно увеличивать или уменьшать объект.

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

Этот приём встречается и в интерфейсах: например, когда кнопка или значок слегка увеличивается при взаимодействии с пользователем.

5. Color tweening — изменение цвета

При цветовом твининге программа рассчитывает промежуточные оттенки между двумя заданными цветами.

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

6. Opacity tweening — изменение прозрачности

Прозрачность определяет, насколько хорошо виден объект.

При непрозрачности 100% он полностью видим, а при 0% — невидим.

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

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

Что такое easing и зачем он нужен

Переместить объект между двумя точками сравнительно просто. Гораздо сложнее сделать движение убедительным.

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

В анимации такие изменения скорости создают с помощью easing — настройки характера движения во времени.

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

Easing помогает управлять разгоном, торможением и дополнительными эффектами движения.

Тип easing	Как работает	Пример
Linear	Постоянная скорость	Движение конвейерной ленты
Ease-in	Медленное начало с последующим ускорением	Автомобиль трогается с места
Ease-out	Быстрое начало и постепенное замедление	Выдвижная панель останавливается
Ease-in-out	Разгон в начале и торможение в конце	Перемещение персонажа между двумя точками
Bounce	Подпрыгивание возле конечной точки	Пружинящий элемент интерфейса
Elastic	Движение за конечную точку с последующими колебаниями	Эффект растянутой и отпущенной пружины

Эффекты Bounce и Elastic лишь стилизуют физическое движение. Они не обязательно воспроизводят законы реальной физики.

Как easing помогает сделать движение реалистичнее

Представим мяч, падающий на пол.

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

Чтобы передать ускорение, аниматор увеличивает расстояние между последовательными положениями мяча по мере падения.

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

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

Как появился твининг

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

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

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

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

Опытные аниматоры создавали основные позы персонажей — key drawings. Затем другие художники готовили дополнительные рисунки, уточнявшие ход движения, и промежуточные кадры.

Специалистов, которые занимались прорисовкой промежуточных кадров, называли in-betweeners. В русскоязычной анимационной практике такую работу также называют фазовкой.

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

С развитием компьютерной графики значительную часть расчётов удалось автоматизировать.

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

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

Чем твининг отличается от покадровой анимации

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

При покадровой анимации (frame-by-frame animation) художник создаёт или корректирует изображение каждого отдельного кадра. Это даёт возможность точно управлять позами, мимикой и изменением формы персонажей.

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

Твининг	Покадровая анимация
Программа может автоматически рассчитывать промежуточные состояния	Каждый кадр создаётся или корректируется вручную
Удобен для предсказуемых изменений	Подходит для сложных и выразительных движений
Позволяет быстро изменять время и значения ключевых кадров	Даёт непосредственный контроль над отдельными рисунками
Хорошо подходит для перемещения, вращения и изменения масштаба	Часто используется для детально прорисованных эффектов
Иногда требует исправлений, чтобы движение не выглядело механическим	Обычно требует больше ручной работы с рисунками

Нельзя сказать, что один метод всегда лучше другого.

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

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

Где используется твининг

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

Мультфильмы и 3D-анимация

В рисованных мультфильмах твининг помогает связывать основные позы персонажей и передавать движение между ними.

Например, персонаж поднимает руку, предмет перемещается по сцене, а камера постепенно меняет положение.

В 3D-анимации интерполяцию используют для перемещения и вращения виртуальных объектов, камер и элементов системы управления персонажем — рига.

Видеоигры

В играх твининг подходит для движений и эффектов, которые должны происходить по заранее заданным правилам.

Например:

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

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

Сайты и мобильные приложения

Многие привычные эффекты интерфейса основаны на постепенном изменении визуальных свойств.

Меню выезжает сбоку, уведомление плавно исчезает, а кнопка увеличивается после нажатия.

В веб-разработке подобные переходы можно создавать с помощью CSS transitions и animations, которые позволяют интерполировать, например, прозрачность и параметры трансформации.

Такие эффекты помогают пользователю проследить переход между состояниями интерфейса.

Моушн-дизайн и видеомонтаж

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

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

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

Программы для твининга: с чего начать

Для первых экспериментов необязательно изучать профессиональные программы. Существуют инструменты как для начинающих, так и для опытных аниматоров.

Программа	Возможности	Кому подойдёт
Scratch	Простое перемещение объектов за заданное время с помощью блоков Glide	Детям и начинающим
Adobe Animate	Motion tween, shape tween и classic tween	Для создания 2D-анимации
Blender	Ключевые кадры, кривые интерполяции и инструменты трёхмерной анимации	Тем, кто хочет освоить 3D
Roblox Studio	TweenService для изменения поддерживаемых свойств игровых объектов	Для разработки игр
Adobe After Effects	Анимация по ключевым кадрам, графика и визуальные эффекты	Для видеомонтажа и моушн-дизайна
Toon Boom Harmony	Профессиональные инструменты 2D-анимации, включая автоматизированные переходы	Для производства мультфильмов

Возможности этих программ заметно различаются.

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

В Adobe Animate также встречается термин classic tween. Он обозначает традиционный для Flash способ автоматического создания промежуточной анимации, а не ручную прорисовку каждого кадра.

Как сделать первую анимацию с твинингом в Scratch

Один из самых доступных способов познакомиться с принципом твининга — заставить персонажа плавно перемещаться по сцене в Scratch.

Scratch — визуальная среда программирования, в которой вместо написания обычного программного кода используются готовые блоки.

Для упражнения откройте онлайн-редактор Scratch.

Шаг 1. Создайте проект

Откройте Scratch и создайте новый проект.

На сцене появится стандартный персонаж — кот Scratch. Для упражнения можно оставить его или выбрать другого спрайта.

Шаг 2. Установите начальное положение

Откройте категорию «События» и перетащите в рабочую область блок запуска программы при нажатии зелёного флажка (when green flag clicked).

Затем перейдите в категорию «Движение» и присоедините блок перехода к заданным координатам (go to x: y:).

Укажите значения:

go to x: -150 y: 0

Теперь при каждом нажатии зелёного флажка персонаж будет оказываться ближе к левой стороне сцены.

Шаг 3. Добавьте плавное перемещение

В категории «Движение» найдите блок Glide, который отвечает за перемещение спрайта к указанным координатам за определённое время.

Присоедините его к предыдущему блоку и установите:

glide 2 secs to x: 150 y: 0

В результате последовательность из трёх блоков будет такой:

when green flag clicked
go to x: -150 y: 0
glide 2 secs to x: 150 y: 0

Названия блоков приведены на английском языке. В русскоязычном интерфейсе Scratch они отображаются в переводе.

Шаг 4. Запустите анимацию

Нажмите зелёный флажок над сценой.

Кот появится в точке с координатой x = -150 и за две секунды плавно переместится в точку x = 150.

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

Шаг 5. Измените скорость движения

Попробуйте уменьшить продолжительность Glide с двух секунд до одной.

Персонаж преодолеет прежнее расстояние вдвое быстрее.

Теперь установите пять секунд. Кот будет двигаться заметно медленнее.

Можно изменить и конечные координаты. Например, задав другое значение y, вы заставите персонажа перемещаться по диагонали.

Шаг 6. Верните персонажа назад

Добавьте ещё один блок Glide:

glide 2 secs to x: -150 y: 0

Теперь кот сначала пройдёт вправо, а затем вернётся в исходное положение.

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

Блок Glide в Scratch подходит для простого плавного перемещения. Для сложных эффектов ускорения, морфинга и выразительной анимации персонажей понадобятся дополнительные приёмы или другие программы.

Как работает твининг в Roblox Studio

В Roblox Studio для создания плавных изменений предусмотрен встроенный сервис TweenService.

Он позволяет разработчикам анимировать поддерживаемые свойства объектов за заданное время.

Представим дверь в игре Roblox. Вместо того чтобы мгновенно перемещать её из закрытого положения в открытое, можно настроить постепенное перемещение или вращение.

Для этого разработчик указывает объект, конечные значения нужных свойств, продолжительность и тип easing.

Таким же способом можно заставить уведомление постепенно исчезать, увеличивать значок награды или перемещать платформу между заданными точками.

Для настройки времени и характера движения Roblox использует TweenInfo. Метод TweenService:Create() создаёт анимацию, а Play() запускает её.

Таким образом, твининг в Roblox Studio помогает создавать игровые события, анимированные интерфейсы и визуальные эффекты.

Преимущества и ограничения твининга

Главное достоинство цифрового твининга — возможность сократить объём повторяющейся работы.

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

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

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

Однако автоматическая интерполяция не всегда даёт нужное изображение.

Программа способна вычислить положение объекта посередине между двумя ключевыми кадрами, но не всегда может определить, насколько убедительным окажется движение.

Например:

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

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

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

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

Пять распространённых ошибок при работе с твинингом

1. Использовать одинаковую скорость для любых движений

Постоянная скорость подходит далеко не всегда. Из-за неё персонажи иногда выглядят механическими.

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

2. Создавать слишком мало ключевых кадров

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

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

3. Не учитывать траекторию движения

Объект может оказаться в правильной конечной точке, но пройти к ней по неестественному пути.

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

Поэтому важно проверять не только начальное и конечное положения, но и весь путь объекта.

4. Делать все действия одинаковыми по продолжительности

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

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

5. Полностью полагаться на автоматику

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

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

Частые вопросы о твининге

Что такое твининг простыми словами?

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

Чем твининг отличается от ключевых кадров?

Ключевые кадры фиксируют важные положения или значения свойств объекта в определённые моменты времени. Твининг создаёт промежуточные состояния между ними. Эти механизмы работают вместе.

Твининг и анимация — одно и то же?

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

Можно ли делать твининг вручную?

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

Используется ли твининг в 3D-анимации?

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

Есть ли твининг в Scratch?

В Scratch доступны простые интерполированные перемещения через блоки Glide. Более сложные эффекты можно создавать с помощью собственных скриптов или изучать в специализированных программах для анимации.

Чем tweening отличается от easing?

Tweening отвечает за переход между ключевыми состояниями объекта. Easing определяет характер этого перехода во времени: будет ли движение равномерным, начнётся ли оно с разгона, закончится ли торможением или подпрыгиванием.

Почему твининг иногда выглядит неестественно?

Автоматическая интерполяция может создавать слишком равномерное движение, неудачные траектории и искажённые промежуточные формы. Для улучшения результата аниматоры корректируют ключевые кадры, продолжительность движения, траектории и настройки easing.

С чего начать изучение твининга

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

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

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

Главное — не количество созданных кадров, а то, насколько понятно и убедительно они передают движение.