Что такое покадровая анимация
Покадровая анимация. Анимация формы. Трассировка растровых изображений
Цели занятия
Содержание занятия
С какой же именно скоростью (частотой кадров) необходимо демонстрировать наблюдателю меняющиеся изображения, чтобы у него создалась иллюзия непрерывного движения? Ответ на этот вопрос определяется целью создания анимации и ее последующего воспроизведения.
Наиболее часто используются следующие варианты частоты смены кадров анимации:
Во Flash по умолчанию предлагается частота кадров 12 кадров в секунду, что вполне подходит для компьютерной анимации (обычно достаточно 12-15 кадров в секунду).
Компьютерную анимацию разделяют на покадровую (отрисовывается каждый кадр ) и автоматическую ( программа сама создает промежуточные кадры между ключевыми кадрами). Независимо от того, какой механизм используется для создания отдельных кадров, суть анимирования заключается в том, чтобы отразить изменение объекта во времени.
Для создания анимации нам потребуется панель временной шкалы. Это основной инструмент для создания анимации. Найдите ее на рабочем столе. На панели временной шкалы могут быть представлены следующие элементы (рис. 5.1):
Кадры, создаваемые на каждом слое, имеют различное предназначение и внешне отличаются друг от друга.
Последовательность промежуточных кадров. Промежуточный кадр редактировать нельзя.
Раскадровка автоматической анимации между двумя ключевыми кадрами.
Для создания кадров команды удобно выбирать в контексном меню по правой кнопке мыши (когда курсор выделяет кадр на шкале) (рис. 5.2). Также существуют «горячие клавиши» фактически для всех этих команд. Поскольку при создании анимации работа с кадрами занимает большую часть времени, стоит выучить эти комбинации клавиш:
Поговорим о покадровый анимации ( перезалив)
При расчёте стоимости изготовления мультфильма, многие заказчики приходят в ужас. Некоторые смеются и утверждают, что вскоре сами пойдут работать в мультипликаторы, раз они «гребут» лопатами столько денег. Ведь всегда кажется, что современная компьютерная анимация делается очень просто (достаточно знать волшебные кнопки, которые сами за тебя все сделают). Так ли это на самом деле?
Мы решили написать эту статью для того чтоб разъяснить, из чего складывается бюджет на современный анимационный фильм.
Каждый встречал уличного художника? Мы уверены, что да. Многим нравится идея заказать портрет карандашом. Вспомните как выглядит этот процесс. Вы садитесь на стульчик и Вас рисует художник 20-30 минут (если не больше), затем Вы платите ему в среднем от 1000 руб. (редко бывает меньше).
А теперь давайте сравним этот процесс с изготовлением анимационного ролика. Мультфильм хорошего качества, где лица людей будут узнаваемы, где будут красивые фоны и пейзажи обычно стоит более 100 тыс. руб за минуту. В одной минуте 60 секунд. На каждую секунду художник-аниматор рисует не менее 8 кадров, а чаще 12-16. Каждый кадр должен быть не менее красивым, чем рисунок уличного художника. Но при простом подсчете (8 кадров умножаем на 60 секунд, равно 480. Теперь 100 тыс. рублей делим на 480 кадров), мы получаем 208 рублей за один кадр. Двести рублей за один нарисованный руками маленький шедевр! А теперь попробуйте найти художника, который согласится нарисовать Вам живописную полноцветную картину за 200 рублей. К тому же мы не учли еще множество нюансов. Давайте считать дальше. В анимации обычно фоны рисуются отдельно от персонажей. В одной минуте хорошей анимации обычно более 10 фонов с различными объектами окружения. А ведь их тоже надо рисовать и за каждый из них художник должен получить зарплату. В этот же бюджет еще следует уместить работу со сценарием, раскадровкой и аниматиком. Многие пренебрегают этим процессом, но мультфильм без четко определенного сценария это то же самое, что картина без холста и подрамника. Если учесть все элементы производства, то художнику-аниматору приходится рисовать один кадр менее чем за 60 рублей. В итоге месячная зарплата за круглосуточную напряженную работу выходит менее 10-15 тыс. рублей.
Возникает следующий вопрос: «А как же трёхмерные мультики? Там же всё делается на компьютере и ничего рисовать не надо, а значит работа легче и быстрее». Всё правильно, в 3D-графике отпадает необходимость в рисовке каждого кадра и анимация больше защищена от ошибок, так как в любой момент можно ее исправить и поменять. Но тут действует принцип: «Лучше день потерять, а потом за пять минут долететь». Анимация делается быстрее, но герой создается дольше, поэтому по затратам сил и времени цифровой мультфильм идентичен рисованному.
Давайте изучим процесс создания такой анимации детально. Во первых, для 3D-анимации необходимо написать сценарий, сделать раскадровку и разработать героя. Этот процесс ничем не отличается от такой-же подготовительной работы к рисованному мультику. Что касается создания героя, здесь дела обстоят еще сложнее, ведь в отличии от классического рисования, художнику необходимо знать 3D-редактор, работе в котором необходимо долго учиться (более 5 лет). Процесс создания качественного и детального 3D-персонажа включает в себя несколько стадий: скульптинг, ретопология, текстурирование, риггинг, лицевая мимика. В сумме моделирование под ключ может занять более одного месяца работы группы трёхмерщиков, каждый из которых специализируется на отдельной стадии производства.
Именно по этой причине анимация — удел только энтузиастов и людей, которые действительно любят своё дело и готовы даже за не высокую зарплату трудиться в поте лица и создавать настоящие произведения искусства.
Покадровая анимация
Количество кадров равно количеству рисунков, которые необходимо сделать для анимации. Это огромная работа, которая выполняется сразу несколькими людьми. Она отнимает много времени, однако результат получается действительно крутым. Мы еще вернемся к известным примерам покадровой анимации далее.
Каждый новый кадр не похож на предыдущий, и от этого анимация становится более живой. Техника похожа на рисованную анимацию, где кадры рисуются на обычных листах, фотографируются (сканируются) и совмещаются в один мультфильм. Изображения не обязательно должны быть нарисованы. Очень часто для фильмов создаются куклы, у которых все части тела подвижные. Каждый новый кадр – новая поза куклы.
История явления
История начинается в 1895 году. Для съемки сцены казни режиссер попросил палача замереть в момент взмаха топора. Работу камеры приостановили, а место девушки в кадре заняла кукла. Затем съемку возобновили, и получилась эффектная сцена.
В 1900 году анимация применялась в коротком фильме “Очарованный рисунок”. В нем главный герой показывает преимущества покадровой анимации.
Персонаж как бы взаимодействует с изображением на холсте, мастерски работая со стоп кадрами. Он то добавляет объекты на рисунок, то наоборот достает их.
Одним из самых ярких примеров покадровой анимации в истории по праву считается фильм “Кинг-Конг”, 1933 год. Была создана кукла обезьяны из резины, шкуры и пенопласта. На создание анимации ушел целый год.
Время шло, и изменялась сама анимация. Она становилась более плавной и естественной для восприятия за счет усовершенствования технологии. В современных фильмах покадровая анимация применяется, но очень редко.
Отличия от других анимационных техник
Существует несколько видов анимации:
Перекладная анимация – одна из самых старых техник, которую можно увидеть, например, в мультфильме “Ежик в тумане”. На бумаге объект разрезается на отдельные куски, которые передвигают (перекладывают). Реализация по принципу покадровой анимации, только рисовать каждый кадр не надо. Несмотря на примитивность такой анимации, “Ежик в тумане” считается одним из лучших мультфильмов всех времен.
Компьютерная 2D анимация – современная техника, которую применяют почти в каждом мультфильме. Можно сказать, что это просто рисованная анимация, которую рисуют на компьютере. Зрители сильно полюбили этот вид анимации, ведь мультфильмы получаются яркие, динамичные и простые.
3D анимация – это по-настоящему живые персонажи в мультфильме. На компьютере создается трехмерная модель персонажа, которая “оживает” с помощью компьютерной графики. Поэтому мультфильмы с применением 3D анимации особенно нравится смотреть, когда в кадре люди или животные.
Покадровая анимация – самый сложный и долгий процесс из всех перечисленных. Однако, такая анимация плавная и “живая”. Множество мультфильмов компании “Дисней” выполнены именно в этой технике.
Особенности создания покадровой анимации
Как мы сказали ранее, при покадровой анимации каждый кадр прорисовывается заново. Контуры персонажей, предметов, текста – все детали четко отрисовываются, в следствие чего анимация выглядит немного неестественно. Однако это и есть ее отличительная черта.
Однако, кинорежиссёры поняли, что в фильмах такого эффекта быть не должно. Простой пример: когда вы фотографируете бегущего человека, на фото не будет четкого контура ног, силуэт будет размытым. Даже когда вы смотрите на бегущую собаку, вы не отслеживаете ее движения по каждому кадру, вы видите картину в целом. Поэтому, при создании покадровой анимации, контуры стали прорисовывать не полностью, а при использовании кукол – фотографировать в движении.
Известные современные примеры
Сейчас покадровая анимация применяется в основном при создании простых видео для youtube и других видеоплощадок в интернете. Это могут быть как забавные короткие видео, так и видео, несущие информационный характер. Среди наиболее известных примеров можно выделить “Simons’ cat” и “Mr. Freeman”. В анимации используется 10-15 кадров в секунду, однако это и является ключевой фишкой этих мультфильмов. Все действия выглядят динамично, их интересно смотреть.
Как самому создать покадровую анимацию
Итоги
Покадровая анимация постепенно уходит на второй план, появляются новые технологии, с помощью которых нарисовать сцену для фильма или целый мультфильм намного проще и быстрее. Тем не менее, покадровая анимация – это основа основ, именно она стала началом всех современных мультфильмов.
Покадровая анимация. Анимация формы. Трассировка растровых изображений
Покадровая анимация
Для создания покадровой анимации требуется предварительно подготовить (или, по крайней мере продумать) каждый кадр фильма. При этом необходимо учитывать следующее обстоятельство: плавность перехода от одного кадра к другому и, соответственно, плавность и естественность движений персонажей зависят от того, насколько отличается следующий кадр от предыдущего (а не от скорости смены кадров, как иногда полагают). Другими словами, чем больше кадров содержит «мультик», тем ближе движения персонажей к естественным. А частота смены кадров влияет на скорость воспроизведения анимации.
Мультик, созданный с применением покадровой анимации, представляет собой последовательность ключевых кадров, с каждым из которых связано некоторое изображение (картинка) на столе.
Создадим простейшую покадровую анимацию, применяя на практике знания о создании различных типов кадров.
Наш первый мультик будет прост и примитивен. Предположим, что «героем» фильма будет шар, который падает и разбивается на три части. Будем считать, что для раскрытия столь «сложного» сюжета достаточно пяти кадров:
С учетом описанного сюжета последовательность работы должна быть следующей.
Просмотрев полученный мультик, мы имеем два вывода:
Исправим некоторые недочеты. Для этого:
Рассмотрение возможностей временной шкалы нельзя считать полным без упоминания о пяти кнопках, расположенных в низу линейки кадров.
Итак, первая анимация готова. У вас в руках есть все возможности ее редактирования (кадры, слои, объекты).
Как делать анимацию, которая нравится всем (даже пользователю)?
Привет читателям Хабра! Меня зовут Сергей Кузнецов, я руковожу отделом frontend-разработки в компании AGIMA и сегодня я вам принес статью про… да, про анимацию. Знаю, на этут тему здесь не писал только ленивый. Знаю, сказать что-то новое об анимации сложно. И все-таки надеюсь, что эта статья окажется для многих полезной, а для кого-то — даже интересной.
Итак, начнем.
В наши дни анимацию используют все разработчики — к месту и не к месту. И анимация, использованная не к месту, может сыграть с сайтом злую шутку — вместо «запланированного» интереса со стороны пользователя вызвать скуку, непонимание и даже отторжение. Вот как раз о том, как правильно использовать анимированные элементы, мы и поговорим в этой статье. А еще — о том, как сделать анимацию качественной, добиться ее максимальной производительности и не потратить на это слишком много времени и сил. Немного о первом, в двух словах о другом и совсем чуть-чуть о третьем. Поехали!
Зачем вообще нужна анимация?
У каждого элемента сайта должно быть четкое назначение. В том числе и у анимации. Исходя из функций, можно выделить три больших группы анимированных элементов.
Далеко не все сайты загружаются мгновенно. Для того чтобы во время загрузки страницы пользователь не потерял к ней интерес и не подумал, что сайт безнадежно «завис», и нужна анимация ожидания. Самая распространенная анимация этого типа — preloader
Это элемент, который посетитель видит сразу после перехода на сайт, пока загружается содержимое страницы. «Прелоадеры» выполняют сразу несколько функций:
На прелоадере можно показать полезную информацию — подсказки или советы.
С помощью такого типа анимации можно показать этапы, требуемые для достижения цели, или показать последовательность действий.
Пример еще одного варианта использования анимации ожидания: последовательное заполнение страницы контентом при скролле вместо отложенной одновременной загрузки всех элементов. То есть, если на экране много «тяжеловесных» элементов, их лучше загружать по очереди, а не сразу — здесь и приходит на помощь анимация.
2. Анимация подтверждения
Такая анимация нужна, чтобы пользователь не сомневался, что действие на сайте успешно совершено, и понимал, что можно сделать дальше. Интерактивные элементы на странице могут менять форму, цвет, содержание — например, кнопка меню после нажатия может смениться на «крестик», указывающий на то, что теперь меню можно снова закрыть.
Анимация подтверждения применяется и для того, чтобы подсказать посетителю, с чем на странице можно взаимодействовать. Это актуально для мобильных версий сайтов — когда на устройстве нет курсора мыши, пользователю стоит заранее указать на интерактивные элементы с помощью простой анимации.
3. Декоративная анимация
Это мини-игры, нестандартный скролл страницы, видеовставки, параллакс. Нет, эта анимация не «просто для красоты». У нее вполне утилитарная функция — привлечь внимание пользователя к самому важному, заинтересовать в дальнейшем изучении сайта, вызвать тот самый wow-эффект. Декоративную анимацию важно использовать «к месту» и дозированно, она не должна перегружать страницу и отвлекать пользователя от ее содержания.
Какой бывает анимация?
Не будем перечислять устаревшие или редко используемые технологии. Упомянем только самые распространенные — и разберем их плюсы и минусы.
Тут наверное из снежной королевы кадр, где выбирались развилки
Самый простой и действенный способ «оживить» страницу
Почти тоже самое что и видео. По сути, показ за короткий промежуток времени набора отдельных изображений, что создает иллюзию движения.
Самые сложные, но и самые впечатляющие типы анимации. Это 2D- и 3D-анимация соответственно. 2D-рисование в Canvas сводится все к тому же покадровому принципу. WebGL дает возможность реализации 3D-графики при использовании Canvas. Часть кода на WebGL может выполняться непосредственно на видеокартах, что улучшает общую производительность.
Как сделать анимацию качественной?
А как повысить производительность?
И немного лайфхаков
Вот и всё. Хотя об анимации можно говорить еще долго. К примеру, мы могли бы рассказать о новинках мира анимации — о новых фильтрах и медиазапросах, или о появившихся совсем недавно продвинутых инструментах и технологиях, таких как Web Animations API. А вы хотели бы почитать о трендах в анимации? Если да, будем рады посвятить этой теме следующую статью!