Чтобы Микки Маус помахал рукой одну секунду, художник рисует его двенадцать раз подряд. Немного другой наклон кисти, немного другой изгиб локтя, немного другое выражение лица. Двенадцать почти одинаковых рисунков ради одной секунды экранного времени.
Так устроена покадровая анимация, она же традиционная анимация: самая старая и самая трудоёмкая техника оживления картинок. Автоматики в ней нет вообще: каждый кадр делается отдельно, руками.
В статье разбираем, что такое покадровая анимация, чем рисованный вариант отличается от пластилинового стоп-моушна, сколько рисунков нужно на минуту мультфильма, в каких программах это делают бесплатно и с какого упражнения начать сегодня вечером.
Если интересно, откуда всё это выросло исторически — от театра теней до Pixar, — у нас есть отдельный большой материал: история анимации. А если путаетесь в терминах «аниматор» и «мультипликатор», загляните в разбор кто такой мультипликатор и чем он отличается от аниматора.
Статья написана для новичка. Специального образования и опыта в рисовании она не требует: все термины объясняем по ходу, а первое практическое упражнение можно сделать бесплатно на телефоне.
Тем, кто уже понял, что хочет заниматься этим всерьёз, пригодится наша подборка курсов по анимации, где собраны программы от коротких интенсивов по 2D до полноценных профессий.
CheckroiПодборка курсов по анимации161 курс • 40 школСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить→
Что такое покадровая анимация простыми словами
Покадровая анимация (по-английски frame by frame — «кадр за кадром») — это техника, в которой каждый кадр создаётся вручную и отдельно от остальных. Художник не задаёт компьютеру начальную и конечную точку движения, чтобы тот сам придумал середину. Он рисует всю середину сам.
Работает это на свойстве нашего зрения, которое называют инерцией восприятия. Глаз удерживает картинку доли секунды после того, как она исчезла. Если показывать серию слегка отличающихся изображений достаточно быстро, мозг склеивает их в непрерывное движение.
Слово «кадр» здесь означает один рисунок или один снимок. Кино идёт со скоростью 24 кадра в секунду, у интернет-роликов обычно 25–30 кадров в секунду. Отсюда и главная особенность техники: чтобы получить минуту анимации при 24 кадрах в секунду, нужно 1440 кадров.
Коротко. Покадровая анимация — это когда движение рисуется руками, кадр за кадром, без вычислений программой. Всё остальное в этой статье вытекает из одного этого факта.
Три техники, которые называют одним словом
Тут прячется главная путаница темы. Наберите «покадровая анимация» в поиске, и вы увидите и рисование, и пластилиновых человечков. Википедия под этим заголовком вообще описывает съёмку физических объектов.
Ошибки ни у кого нет. Просто слово «покадровая» описывает принцип работы, а не материал. Принцип один: каждый кадр делается отдельно. Материал бывает разный, и от него зависит, что вам покупать и чему учиться.
| Техника | Как делается кадр | Что нужно на старте | Кому подходит |
|---|---|---|---|
| Рисованная анимация (frame by frame) | Каждый кадр рисуется заново на бумаге или в графическом редакторе | Планшет или телефон со стилусом, бесплатная программа | Тем, кто любит рисовать и хочет в мультипликацию или в 2D-анимацию для игр |
| Стоп-моушн (stop motion) | Реальный объект сдвигают на миллиметр и фотографируют | Камера или смартфон, штатив, ровный свет, пластилин или конструктор | Тем, кто любит делать руками и не хочет рисовать вообще |
| Перекладка (cut-out) | Готовые вырезанные детали персонажа двигают между кадрами | Бумага и ножницы или те же программы, что для рисованной | Тем, кто хочет быстрый результат без академического рисунка |
С покадровой анимацией часто путают ещё одну вещь, устроенную совсем иначе. Это твининг (от английского in-between — «между»), он же интерполяция. Вы ставите объект в точку А, затем в точку Б, а программа сама достраивает все промежуточные положения. Так работают анимация интерфейсов, значительная часть моушн-дизайна и почти вся реклама.
Твининг быстрее в десятки раз. Но у него есть предел: программа умеет двигать готовую картинку, она не умеет менять её изнутри. Когда персонаж поворачивает голову и мы видим другую сторону лица, никакая интерполяция это не нарисует. Нужен человек с карандашом.
Канал основателя Checkroi Вани Буявца3 700 человек читают мой Телеграм-канал про нейросетиСобрал промпты для Claude Code и ChatGPT, разборы ИИ-инструментов и лайфхаки по продвижению бизнеса в одном местеПрисоединитьсяКак устроена анимация изнутри: кадры, «двойки» и тайминг
Дальше несколько цифр, которые обычно не показывают новичкам. Они выглядят пугающе, зато после них вы точно понимаете, во что ввязываетесь.
Ключевые кадры и фазовка
Аниматоры не рисуют подряд первый кадр, второй, третий. Сначала делают ключевые кадры (по-английски keyframes), то есть опорные позы, между которыми происходит действие. Рука вверху, рука внизу. Это скелет движения.
Потом рисуют промежуточные кадры, заполняя расстояние между ключами. Эта работа называется фазовкой, а по-английски in-between. В больших студиях ей занимаются отдельные люди, фазовщики. Именно фазовка съедает основное время: по разным оценкам от трёх до пяти часов на одну секунду готового материала.
«На единицах» и «на двойках»
Полностью гладкое движение требует 24 рисунка в секунду. Такой режим называют анимацией на единицах: один рисунок на один кадр плёнки.
На практике так почти никто не работает. Гораздо чаще каждый рисунок держат два кадра подряд, и тогда на секунду нужно 12 рисунков вместо 24. Это анимация на двойках, и именно она даёт классическому мультфильму его узнаваемое ощущение. Объём работы падает вдвое, а глаз разницы почти не замечает.
Быстрые движения переводят обратно на единицы, чтобы не рябило. Медленные иногда уводят «на тройки», по 8 рисунков в секунду. Выбор режима и есть основа тайминга, то есть расчёта, за сколько кадров произойдёт действие.
| Хронометраж | Кадров при 24 fps | Рисунков «на двойках» | Примерное время работы |
|---|---|---|---|
| 1 секунда | 24 | 12 | 3–5 часов |
| 10 секунд | 240 | 120 | рабочая неделя |
| 1 минута | 1440 | 720 | 2–4 недели у команды |
Вот цифра для масштаба из архива музея Джорджа Истмана про «Белоснежку и семь гномов» 1937 года: для полуторачасового мультфильма отсняли 362 919 кадров, а исходных прозрачных листов с рисунками и фонов ушло больше полутора миллионов. Компьютеров не было. Всё это нарисовали и разложили люди.
Что из этого следует новичку. Не берите сюжет. Первые ваши работы должны длиться две-три секунды: прыгающий мячик, машущая рука, моргающий глаз. Идея снять свой короткометражный мультфильм с первого раза убивает больше начинающих аниматоров, чем любая техническая сложность.
Что взяли у Disney: 12 принципов, которые до сих пор работают
В 1981 году два аниматора студии Disney, Фрэнк Томас и Олли Джонстон, выпустили книгу «The Illusion of Life» и собрали в ней двенадцать правил, по которым студия работала с тридцатых годов. Эти принципы преподают до сих пор: и в рисованной анимации, и в 3D, и в моушн-дизайне.
Разбирать все двенадцать новичку рано. Вот четыре, которые дают самый заметный результат сразу.
Сжатие и растяжение (squash and stretch)
Живое тело меняет форму при движении. Мяч сплющивается об пол и вытягивается в полёте, щёки при беге трясутся. Если ваш объект летит и падает, сохраняя идеальную геометрию, движение выглядит мёртвым. Одно это правило превращает первое упражнение с мячиком из технического в живое.
Упреждение (anticipation)
Перед любым действием идёт маленькое движение в противоположную сторону. Прыжку предшествует приседание, броску предшествует замах, шагу вперёд перенос веса назад. Без упреждения зритель не успевает понять, что сейчас произойдёт.
Замедление на краях (slow in and slow out)
Движение почти никогда не начинается и не заканчивается мгновенно. Тело разгоняется и тормозит. На языке кадров это значит, что рисунки в начале и конце движения ставят гуще, а в середине реже. Самая частая правка, которую делают новичкам на курсах.
Дуги (arcs)
Живые существа двигаются по дугам. Прямых траекторий в природе почти нет. Рука описывает окружность в плече, голова при кивке идёт по кривой. Прямолинейное перемещение читается как механизм, и это ровно та причина, по которой анимация робота удаётся новичку легче, чем анимация кошки.
CheckroiПодборка курсов по 2D-анимации9 курсов • 7 школСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить→
Программы для покадровой анимации: чем рисовать бесплатно
Платить на старте не нужно вообще ничего. Три сильные программы для покадровой анимации бесплатны, и работать в них можно даже на заказ.
| Программа | Платформа | Цена | Для чего берут |
|---|---|---|---|
| Krita | Windows, macOS, Linux | Бесплатно | Главный выбор новичка: полноценный редактор рисования плюс покадровая анимация в одном окне |
| Pencil2D | Windows, macOS, Linux | Бесплатно | Самый простой интерфейс: минимум кнопок, ничего лишнего, запускается на слабом ноутбуке |
| OpenToonz | Windows, macOS, Linux | Бесплатно | Профессиональный инструмент: на его основе работает японская студия Ghibli |
| FlipaClip | Android, iOS | Бесплатно с платными дополнениями | Рисование анимации на телефоне или планшете, подходит для первых упражнений |
| Adobe Photoshop | Windows, macOS | По подписке | Короткие анимации и гифки, если Photoshop у вас уже стоит |
| Adobe Animate | Windows, macOS | По подписке | Рекламные ролики и веб-анимация, много лет отраслевой стандарт |
| Toon Boom Harmony | Windows, macOS | По подписке | На нём делают сериалы: «Симпсоны», «Рик и Морти», значительная часть индустрии |
Если выбирать не хочется, ставьте Krita. Она бесплатная, живёт на всех системах, в ней есть и кисти для рисунка, и таймлайн для анимации, и русский интерфейс. Работать в ней можно годами, и переходить куда-то ещё вас никто не заставит.
Отдельно про стоп-моушн: там программа нужна другая, потому что кадры фотографируются. Для съёмки на телефон обычно берут Stop Motion Studio. Она сама делает нужную выдержку между снимками и собирает результат в видео.
Если задача проще (например, сделать короткую зацикленную гифку для соцсетей), необязательно ставить что-то тяжёлое. Мы собирали сервисы для создания GIF и анимации онлайн, которые работают прямо в браузере.
Первая анимация за вечер: пошагово
Теперь про то, как сделать покадровую анимацию своими руками и с чего начать, если раньше вы этого никогда не делали. Практическая часть займёт вечер.
Шаг 1: выберите инструмент и не меняйте его месяц
Krita на компьютере или FlipaClip на телефоне. Одна программа, никаких сравнений и поисков «а вдруг там удобнее». Именно из-за перебора программ новички тратят два месяца и не делают ни одной анимации.
Шаг 2: включите «луковую шелуху»
Луковая шелуха (onion skin) — это режим, в котором поверх текущего кадра полупрозрачно показан предыдущий. Вы видите, где объект был, и рисуете следующее положение относительно него. Без этого режима покадровая анимация практически невозможна, а включается он одной кнопкой в любой программе.
Шаг 3: сделайте прыгающий мячик
Классическое первое упражнение всех анимационных школ мира. Нарисуйте круг вверху экрана. На следующем кадре чуть ниже. Дальше ещё ниже, и расстояния между положениями увеличивайте: падающий предмет разгоняется.
В момент удара сплющите круг в овал, при отскоке вытяните вертикально. Вверх мяч летит с уменьшающимся шагом, потому что тормозит. Двенадцати кадров хватит. Поставьте на таймлайне 12 fps и нажмите воспроизведение.
Шаг 4: добавьте маятник
Второе упражнение на дуги: шарик на верёвочке качается влево-вправо. Проверьте две вещи: траектория должна быть кривой, и на краях качания шарик замедляется. Здесь начинает работать принцип замедления на краях.
Шаг 5: соберите цикл ходьбы
Стандартный цикл ходьбы человека укладывается в 12 рисунков, и его рисуют все, от студентов до аниматоров с двадцатилетним стажем. Он замкнут в кольцо, поэтому персонаж может идти бесконечно, а вы получаете первый кусок работы, который не стыдно показать.
Совет практиков. Смотрите чужую анимацию покадрово, останавливая видео стрелками. Вы удивитесь, из какого малого числа рисунков собраны движения, которые кажутся сложными. Насмотренность в этой профессии даёт не меньше, чем часы рисования.
Канал основателя Checkroi Вани БуявцаЗабирайте промпты и обучение по нейросетям в моём Телеграм-каналеБольше 3 700 человек уже применяют Claude Code, ChatGPT и другие нейросети в работе, учёбе, бизнесе и жизниПерейти в канал7 ошибок новичка, из-за которых анимация дёргается
Ошибка 1: равные расстояния между кадрами
Если объект перемещается на одинаковое расстояние каждый кадр, движение выглядит машинным. В природе всё разгоняется и тормозит. Меняйте шаг.
Ошибка 2: слишком мало кадров на быстром движении
Медленное движение прощает редкие рисунки. Быстрое не прощает ничего. Если рука проносится через весь экран за четыре кадра, зритель увидит рывок. Быстрые куски переводите на единицы.
Ошибка 3: персонаж «плавает» в размерах
Классическая беда рисованной анимации: от кадра к кадру герой незаметно растёт, худеет или меняет пропорции. Лечится луковой шелухой и вспомогательными линиями роста.
Ошибка 4: движение по прямой
Живое двигается по дугам. Прямая траектория превращает персонажа в деталь механизма.
Ошибка 5: всё двигается одновременно
В живом теле части движутся с задержкой: сначала корпус, потом рука, потом кисть, в самом конце волосы и одежда. Одновременный старт всех элементов сразу выдаёт новичка.
Ошибка 6: сюжет вместо упражнения
Идея начать со своего мультфильма про космос заканчивается брошенным проектом на девятой секунде. Первые месяцы делают короткие этюды по две-три секунды.
Ошибка 7: прыжки между уроками
Человек смотрит десять роликов разных авторов, пробует всё по чуть-чуть и не собирает цельной картины. Один источник, одна программа, последовательность упражнений: так быстрее.
CheckroiПодборка курсов для аниматоров96 курсов • 25 школСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить→
Как сохранить готовую анимацию и где её показать
Цикл ходьбы готов, и тут новичка ждёт последняя ловушка: работа, сохранённая не в том формате, выглядит хуже, чем она есть. Дёрганый градиент, каша вместо тонких линий и вес в 20 мегабайт на пять секунд — это почти всегда не про рисунок, а про экспорт.
| Формат | Когда брать | Что учесть |
|---|---|---|
| MP4 (H.264) | показать ролик где угодно, отправить заказчику | универсальный вариант по умолчанию, но не умеет прозрачный фон |
| GIF | короткая петля в чат, стикер, превью в портфолио | всего 256 цветов: градиенты рассыпаются, вес растёт быстро |
| WebM или MOV с альфа-каналом | анимация поверх сайта или другого видео | единственный способ сохранить прозрачность |
| PNG-секвенция | отдать работу на монтаж или в игровой движок | ничего не теряет, но занимает больше всего места |
| Спрайт-лист | анимация персонажа для игры | кадры собираются в один файл сеткой, размер кадра фиксирован |
Практическое правило: исходник храните в проекте программы, а не в экспортированном файле. Экспорт — это всегда упрощение, и отредактировать готовый MP4 обратно в покадровку уже нельзя. Отдельно держите PNG-секвенцию: из неё пересобирается любой другой формат без потери качества.
Частота кадров при экспорте должна совпадать с той, в которой рисовали. Анимацию «на двойках» иногда собирают на 12 fps вместо 24, чтобы файл был легче, — и получают рывки на быстрых движениях, которые в исходнике переведены на единицы. Ставьте 24 кадра в секунду и не трогайте этот параметр.
Про показ. Первые работы бессмысленно копить «до приличного уровня»: покадровая анимация растёт от обратной связи, а обратная связь берётся только там, где работу видят. Заведите две площадки — короткие петли в соцсети и портфолио для собранных сцен. В портфолио выкладывайте не только результат, но и промежуточный этап: ключевые кадры рядом с готовым циклом читаются как доказательство, что вы понимаете фазовку, а не подобрали удачный шаблон.
И полезная привычка на будущее: подписывайте файлы режимом и хронометражем в имени, вроде walk-cycle_24fps_2s_v3. Через полгода в папке будет полсотни версий, и без этого вы не найдёте ту самую.
Куда это ведёт дальше: профессии и деньги
Покадровая анимация редко бывает самоцелью. Обычно она становится входной дверью в одну из соседних областей.
Мультипликация и сериальная анимация. Классический путь: фазовщик, потом аниматор, потом ведущий аниматор сцены. Как в это попадают в России и обязателен ли для этого ВГИК, разбирали в материале как стать мультипликатором.
2D-анимация для игр. Взрывы, циклы бега персонажей, эффекты попаданий в инди-играх часто делаются именно покадрово. Отдельная подборка курсов по 2D-анимации закрывает этот сценарий.
Моушн-дизайн. Самая денежная соседняя ниша: реклама, заставки, оформление видео. Там основная работа идёт на интерполяции, но рисованные вставки ценятся отдельно, потому что их умеют делать немногие. Подробности собраны в разборе профессии моушн-дизайнера.
По деньгам ориентиры мы собирали отдельно: свежие цифры есть в статьях про то, сколько зарабатывают аниматоры и сколько зарабатывает моушн-дизайнер. Короткая версия: в моушн-дизайне вилка заметно выше, в мультипликации выше творческая часть.
Где научиться покадровой анимации
Разобраться самостоятельно можно, и первые упражнения точно получится сделать по бесплатным урокам. Дальше упирается в то, чего в одиночку не достать: разбор ваших работ человеком, который сразу видит, почему движение не читается. Тайминг и дуги ставятся правкой ошибок под присмотром, теория тут помогает мало.
Мы собрали программы российских школ по анимации в одном каталоге, чтобы можно было сравнить формат, длительность и цену, не открывая двадцать вкладок.
| Курс | Школа | Стоимость со скидкой | В рассрочку | Длительность | Обзор курса от Checkroi |
|---|---|---|---|---|---|
| Профессия «Моушн-дизайнер с нуля до ПРО» Перейти на сайт курса |  Contented | 196 794 ₽ | 5466 ₽/мес. | 18 месяцев | Обзор курса |
| Профессия «Моушен-дизайнер в 2D и 3D» Перейти на сайт курса | Contented | 122 634 ₽ | 3406 ₽/мес. | 12 месяцев | Обзор курса |
| Моушен-дизайн в 2D и 3D Перейти на сайт курса |  Нетология | 139 600 ₽ | 4307 ₽/мес. | 11 месяцев | Обзор курса |
| Моушн дизайн Перейти на сайт курса |  XYZ School | 111 100 ₽ | 5822 ₽/мес. | 6 месяцев | Обзор курса |
| Цифровая анимация и визуальные эффекты (Бакалавриат) Перейти на сайт курса |  Университет Синергия | 490 000 ₽ | 40 833 ₽/мес. | 4 years | Обзор курса |
| Моушн-дизайнер (Бакалавриат) Перейти на сайт курса | Университет Синергия | 400 000 ₽ | 33 333 ₽/мес. | 3 years | Обзор курса |
| Убойная анимация в PowerPoint Перейти на сайт курса |  Bonnie & Slide | 24 900 ₽ | 2125 ₽/мес. | 1 месяц | Обзор курса |
| Профессия «Моушн-дизайн, 3D и основы VFX» Перейти на сайт курса | Нетология | 173 700 ₽ | 7237 ₽/мес. | 12 месяцев | Обзор курса |
| Нейроанимация и цифровое кино (Бакалавриат) Перейти на сайт курса | Университет Синергия | 560 000 ₽ | 46 667 ₽/мес. | 4 years | Обзор курса |
| Нейроанимация и цифровое кино (Второе высшее) Перейти на сайт курса | Университет Синергия | 560 000 ₽ | 46 667 ₽/мес. | 4 years | Обзор курса |
Больше программ — в полном каталоге курсов по анимации
Если пока не решили, в какую сторону двигаться, посмотрите наш обзор видов дизайнеров с зарплатами и порогом входа, где анимация показана рядом с соседними направлениями. А для общего контекста профессии подойдёт материал про курсы для аниматоров.
