Нарисуйте позиции мяча. Что вы будете создавать
Кого не спроси, кто лучший производитель анимационных фильмов, и все единогласно ответят — Disney. Действительно, с этим сложно поспорить. После многих проб и исследований однажды мастера анимации в Disney вывели 12 основных принципов создания хорошего анимационного персонажа. Что ж, рассмотрим эти 12 принципов внимательнее и проверим их на практике.
Итак, 12 принципов успешной диснеевской анимации
- Расчет времени (Timing) - определение интервала между действиями анимационного персонажа, для того чтобы подчеркнуть вес, параметры и характер героя. Также правильный расчет времени заставляет зрителя ожидать действие и держит внимание реципиента в постоянном внимании.
- С жатие и растяжение (Squash and Stretch) — во время движения анимационного персонажа, его тело то растягивается, то сжимается. По сути тело героя движется как пружина. При этом объем тела персонажа остается прежним. То есть туловище то растягивается вверх и горизонтально сплющивается, то наоборот.
- «Медленный вход» и «медленный выход» (Slow In & Slow Out). Суть этого принципа заключается в том, чтобы сконцентрировать внимание реципиента на важных деталях и компонентах. Анимационный объект как-бы проскальзывает от одной компоновки к другой.
- Подготовка, или упреждение (Preparation or Anticipation). Каждое следующее движение на экране требует ожидания от зрителя. Суть заключается в том, чтобы обратить внимание на подготовительные действия перед свершением основного действия. Таким образом, важно, чтобы зритель обращал внимание на подготовительные движения — перед прыжком герой приседает, перед кидком — заводит руку назад.
- Преувеличение, утрирование (Exaggeration ). Этот принцип заключается в изображении карикатурных черт лица, выражений и действий героя. Небольшое преувеличение позволяет зрителю сразу же определить, что собой представляет герой, прибавит больше эмоциональности. Однако знайте меру и не допускайте излишней театральности.
- Компоновки (Pose to Pose ) и фазованное движение (Straight Ahead Action ). Согласно этому принципу, аниматор заранее планирует, как разместить действие и главные компоновки. Больше всего внимания уделяют обработки ключевых моментов и расчету времени. Таким образом главные компановки должны иметь прозрачный сюжет, быть ясными и держать в напряжении на протяжении всего фильма. В тоже время при фазовом состоянии (компоненты между компановками) необходимо создать эффект большей спонтанности, легкости, эскизности.
- Сценичность (Staging). Каждое действие персонажа должно быть максимально понятным, узнаваемым и ясным, а выражение лица — хорошо прочитываться. Главная цель — сделать персонажа узнаваемым и заметным.
- Сквозное движение, или доводка (Follow Through), и захлест действия (Overlapping Action). Этого принципа придерживаются для того, чтобы создать иллюзию пластичности и непрерывности действия. Движение никогда не закачивается. Каждое следующее движение должно быть логическим продолжением предыдущего, при этом реципиент должен понимать, где заканчивается основное действие.
- Дуги (Arcs) . Этот принцип заключается в том, что в фазе быстрого движения дуга распрямляется, а при медленном с большим количеством промежуточных фаз — траектория дуги выпуклая и заокругленная. Если же траектория дуг движения будет постоянно прямой, но походка героя будет скорее смахивать на робота.
- Дополнительное действие, или выразительная деталь (Secondary Action). Дополнительные детали могут не только подкрепить основную идею анимационного фильма, но и позволяют более выразительно показать главное.
- «Крепкий» (профессиональный) рисунок (Solid Drawing ). Для того, чтобы создать хорошего персонажа необходимо базовое знание академического рисунка, поэтому учимся рисовать;-)
- Привлекательность (Appeal). Любой анимационный персонаж должен привлекать к себе внимания, иметь свое особенное обаяние, очарование, изумлять. Даже несимпотичный и довольно таки страшненький внешне персонаж должен вызывать симпатию или негатив. Главная идея заключается в том, что зритель не должен быть без различным к героям.
Сжатие и растяжение
Что ж, сейчас перейдем от слов к делу. Для начала давайте рассмотрим, что такое сжатие и растяжение (Squash and Stretch) и расчет времени (Timing). Обратимся к примеру, чтобы быть более наглядными. Перед нами простая анимация, созданная быстро при помощи Flash 8:
Обратите внимание на шар. Нам действительно кажется, что на него действует сила притяжения, однако сам мяч в действительности не сжимается и не растягивается во время движения. Особенно это хорошо видно когда мяч «приземляется». В это время мяч должен растянутся немного вширь. В тоже время при отскакивании вверх мяч должен вытягиваться. Именно благодаря такой деформации мяч и выглядит, как настоящий. При этом мяч должен изменять свою форму только в определенных точках времени — растягивается в ширину, когда приземляется, и в тоже время вытягивается, когда летит вверх или вниз.
Пресеты
Начнем с того, что необходимо открыть flash и создать новый документ. При этом вы можете использовать любой размер документа, который вам заблагорассудится. Условие только одно — количество кадров в минуту установите на отметке 24. Это расчет времени для нашего мини-фильма и это наилучшая скорость кадров в секунду при работе с анимационными персонажами.
Закладываем основы
Для начала нам надо создать задний фон — горизонтальную плоскость. Используя инструмент строки и удерживая клавишу Shift перетащите линию в нижнюю часть нашей воображаемой сцены. Это будет плоскость, на которой в будущем мы сможем разместить наш шар. Далее выберите графический символ и дайте ему имя «земля/ground» . У вас должно получиться примерно так:
Делаем шар
Теперь давайте сделаем мяч. Создайте новый слой над слоем «земля» и назовите его «мяч/ball» . Используйте Ellipse Tool и, удерживая Shift, перетащите курсив. Таким образом создайте достойный по размеру шар. Разместите шар на над нашей визуальной «землей», так чтобы создавалась иллюзия, что мяч лежит на земле. Выберете мяч и, нажимая F8, трансформируйте его в графический символ. То, что вы получите в результате должно выглядеть следующим образом:
Расчет времени
От расчета времени зависит, как долго будет продолжаться действие. А сам расчет времени зависит от того, как аниматор представляет себе само действие. Если проще сказать, то каждый аниматор задает себе простой вопрос: «Как долго мы хотим, чтобы этот шар находился в процессе падения?». На этом этапе важную роль играет воображение. Вам просто надо будет представить, сколько секунд падает шар и посчитать. Самый простой способ — или закрыть глаза и представить, или взять настоящий шар и секундомер и посчитать. Предположим, что падение шара займет у нас 1 секунду. Если учесть, что съемка для нашего фильма выставлена на 24 кадра в секунду, эту значит, что нам необходимо 24 разных кадра. Итак, давайте направимся к нашей шкале и выберем кадр 24 для обоих слоев, а затем нажмем клавишу F5, чтобы сделать ключевые кадры, которые разместятся в нашей рамке. При этом под рамкой подразумевается не весь экран. а только та, где будет «прыгать» мяч.
Анимация мяча
Теперь настало время оживить наш мяч. Направляемся к первому кадру на шкале и выбираем мяч. Получаем следующее:
[Как видим из изображения, мяч на данном этапе находится вверху экрана]
Ок, первый кадр сделан. Сейчас в современной анимации принято воспроизводить фильмы со скоростью 24 кадра в секунду, однако это не является обязательным. Многолетний этап наблюдения и экспериментирования в анимации также показал, что иногда достаточно и показа 12 рисунков в секунду. Излишне говорить, что 12 кадров на секунду намного упрощает задачу аниматора. В связи с этим позже известный аниматор Ричард Уильямс предложил делать каждый второй кадр ключевым. Такой принцип в кругах аниматоров начали называть «стрельба по двум». Что ж, сейчас там необходимо создать второй ключевой кадр. Для этого переходим по шкале времени, и на слое «шар» создаем новый ключевой кадр. Выбираем нужный кадр и нажимаем F6. Строка вверху должна выглядеть примерно так:
Что ж, мы медленно, но уверено приближаемся к концу этого урока. Многие из вас могут задаться вопросом, почему мы не использовали аниацию движения, а расчитывали нашу работу по отдельным кадрам. С анимацией движения было бы намного проще и быстрее. Проще и быстрее — да, но по качеству такая анимация б значительно уступала. Путь, который был избратн в этом уроке, как нельзя лучше подходит именно для создания анимационного персонажа.
Итак, теперь необходимо дальше выяснить траекторию движения мяча. Первый кадр — мяч вверху. Далее нам необходимо сделать промежуточные шаги — найти средину для траектории падения шара, и место расположения последний фазы. Если у нас 24 кадра в секунду, то средняя фаза попадает на 13 кадр. Так как любой мяч пружинит, то на момент средней фазы он должен находится внизу на нашей воображаемой земле, чтобы еще раз дать толчек и отскочить вверх. И того, кадр 13 должна выглядеть примерно так:
Теперь необходимо соединить точки. Сейчас мы будем двигаться от обратного между кадрами от 1 до 13 и выясним, как именно нам расположить промежуточные 5 кадров. Чтобы точно и четко распланировать всё игровое поле стоит спросить себя, а что мы знаем об окружающем нас мире? Итак, что может повлиять на наш шар в реальности? Первое и основное — это сила гравитации. Когда мяч падает он будет набирать обороты. Что это значит для нашей анимации? Это означает, что наши рисунки будут расположены по-разному по отношению друг к другу. Так, когда мяч только начинает падать, мы разместим рисунки ближе друг к другу, так как действие замедляется. действие происходит медленнее. А когда мяч летит вниз под силой своей тяжести, движение будет ускорятся. Для этого этапа, пожалуй, самым важным моментом является созерцание действительности. Если вы действительно заинтересованы и любите анимацию, то почаще обращайте внимание на всякие детали, на временные интервалы между фазами действия. Элементарная наблюдательность поможет вам вскоре четко на глаз определять сколько времени необходимо для свершение того или другого действия в анимационном фильме.
Выберите 3 кадр на второй группе кадров. Теперь мы может установить временной интервал для ключевого кадра. Проще всего это сделать, нажав на маленькую кнопку на нижней части шкалы, которая выглядит как 2 перекрывающихся квадрата (левая группа квадратов). Теперь вы видите две линии на временной шкале. Что ж, теперь стоит посмотреть, как наш текущий рисунок соотнесется к нашему первичному рисунку. Для этого перетащите левую черточку на временной шкале перетащите до упора влево, таким образом правая черточка шкалы будет находится точно над текущим кадром. В результате у вас должно получится что-то такое:
Теперь стоит начать движение мяча. Когда мы начнем перетаскивать мяч на рисунке. При этом вы можете видеть не только текущее положение мяча и призрак-образ предыдущего положения рисунка. Сейчас располагаем мяч, он должен находится немного ниже предыдущей позиции. Получается следующее:
Чтобы сделать 3-й кадр нам необходимо передвинуть значительно дальше от отправной точки. Теперь стоит повторно перетащить черточку на шкале влево от первого ключевого кадра. Сейчас вы можете видеть одновременно 1, 2, и 3 кадр. Результат налицо:
Мы все еще работаем с тремя ключевыми кадрами, но сейчас необходимо увеличить расстояние, так как гравитация обладает мячом. Мяч помещаем ниже,ближе к земле и увеличиваем расстояние с предыдущими ключевыми кадрами.
В этом уроке я расскажу вам о создании анимированного прыгающего мяча!
Мы нарисуем мяч, который подпрыгивает вверх и вниз. Наш прыгающий шар будет зациклен, а это значит, что первый кадр является последним кадром нашей анимации. Мы можем использовать один и тот же кадр анимации снова и снова до бесконечности.
1. Нарисуйте шар в разных позициях
В случае нашего прыгающего шара первый кадр будет представлять позицю 1, а последний кадр будем называть позицией 2. При воспроизведении анимация будет зацикливаться.
Шаг 1
Нарисуйте линию пола примерно на 2 см от нижней части страницы.
Шаг 2
Нарисуйте эскиз мяча. Он не должен быть идеальным кругом. Не старайтесь вырисовывать ровный круг сразу. Давайте нарисуем наш мяч в сантиметре от вверха страницы. Это позиция 1. Мяч находится над полом, готов упасть и отскочить!
Шаг 3
Теперь давайте нарисуем наш мяч во второй позиции. Мяч находится на полу, готов отскочить в позицию 1. Вы можете оставить полупрозрачный слой предыдущего кадра, чтобы видеть расположение мяча по отношению к предыдущему кадру.
Шаг 4
Давайте вернемся назад и добавим промежуточный кадр между позицией 1 и 2 Промежуточные кадры дают иллюзию, что одна позиция плавно переходит в другую.
В промежутке, который мы рисуем на этом этапе, для действия между позицией 1 и позицией 2, я наслаиваю кадр на предыдущий таким образом, что анимационный кадр нашего мяча не совсем посередине, а ближе к позиции 2.
Шаг 5
Затем добавьте промежуточный кадр между позицией 2 и позицией 1, чтобы показать, что мяч подпрыгивает к первоначальной позиции!
Давайте посмотрим на нашу анимацию. Выглядит хорошо, но чего-то не хватает. Мяч как будто плоский.
Шаг 6
Чтобы придать нашему упругому мячу немного эластичности, мы можем сделать слегка сплющенную форму шара в 2 кадре. Я оставил светлое изображение позиции 2, чтобы вы могли видеть разницу по отношению к этой позиции. Масса мяча должна оставаться той же. Это значит что при сплющивании он становится шире .
Уже гораздо лучше! Добавление сплющенной формы мяча дает ему ощущение отскока.
Шаг 7
Наш мяч выглядит неплохо, но он все еще чего-то не хватает. Давайте сделаем мяч вытянутым после отскока от пола. На слайде вы можете видеть, как позиционируется растянутый мяч относительно последнего рисунка. Обратите внимание на то, как масса остается неизменной, растягивая мяч и делая его более вытянутым и узким.
Теперь мяч выглядит упругим и эластичным как будто резиновый. Отлично!
Вот посмотрите на прогресс. Я обозначил позицию 1 и 2 и подсветил промежуточные кадры зеленым цветом.
Шаг 8
Давайте добавим еще один промежуточный кадр, чтобы сгладить анимаию при подходе мяча к позиции 1. Чем больше кадров в анимации, тем медленнее и плавнее действие.
Шаг 9
Когда мяч приближается к верхнему положению, добавьте еще одну промежуточную позицию для замедления и ослабления действия. Это сделает движение более реалистичным. Когда прыгающий мяч отскакивает и достигает самой высокой точки, он замедляется, под действием гравитациии и начинает падать назад на землю.
Я обозначил позицию 1 и 2 и подсветил промежуточные кадры зеленым цветом, а наши последние два кадра — синим.
А теперь посмотрим на анимацию. Это великолепный прыгающий мяч! Мы почти закончили! Но сначала…
2. Очистка и цвет анимации мяча
Шаг 1
Пришло время довести анимацию и очистить ее, так как кадры мы рисовали грубо! Давайте придадим контуру мяча красивый и чистый вид.
То же самое сделаем с остальными кадрами!
Теперь анимация мяча выглядит великолепно! Отличная работа! Осталось только одно:
Шаг 2
Давайте раскрасим мяч! Покрасим мяч на всех кадрах в синий цвет.
За короткое время вы создали анимированный прыгающий мяч с весом и массой!
В данном уроке представлен пример мощности CSS3. Мы сделаем 3D мяч, который будет выглядеть очень реалистично с помощью свойств CSS3 и добавим немного анимаций для формирования визуального эффекта.
Примечание: демонстрация будет работать в браузерах, которые поддерживают соответствующие свойства CSS3.
Разметка HTML
Начнем с разметки HTML
У нас есть три простых элемента div . “#ballWrapper ” - основной контейнер, который содержит наш мяч. Данный элемент div определяет положение мяча и высоту на экране. Элемент “#ball ” формирует разметку для мяча, а “#ballShadow ” содержит тень отдельно.
CSS
В текстах кода в уроке не используются префиксы для большей наглядности.
Сначала установим ширину и высоту основного контейнера. Он будет занимать положение по центру экрана:
#ballWrapper { width: 140px; height: 300px; position: fixed; left: 50%; top: 50%; margin: -150px 0 0 -70px; }
Координаты контейнера имеют значения ’50%’, а для полей используются отрицательные значения равные половине высоты и ширины. Так мяч центрируется на экране.
Теперь определим стили для мяча.
#ball { width: 140px; height: 140px; border-radius: 70px; background: linear-gradient(top, rgba(187,187,187,1) 0%,rgba(119,119,119,1) 99%); box-shadow: inset 0 -5px 15px rgba(255,255,255,0.4), inset -2px -1px 40px rgba(0,0,0,0.4), 0 0 1px #000; }
Мы устанавливаем для мяча равные ширину и высоту, а для свойства ‘border-radius ’ значение ’70px ’ (которое является половиной оригинальной высоты и шириной). В итоге получается круглая форма.
Другой интересный момент - фон. Элемент получает линейный фон и 3 разных уровня теней, чтобы сформировать 3D эффект. Первый уровень тени предназначен для формирования темной зоны внизу мяча. Второй уровень формирует рассеянное свечение также внизу мяча. А третий уровень формирует размытую тень позади контура мяча.
Если взглянуть на мяч, то видна небольшая овальная светлая форма, которая формирует эффект отражения. Вот код, который его формирует:
#ball::after { content: ""; width: 80px; height: 40px; position: absolute; left: 30px; top: 10px; background: linear-gradient(top, rgba(232,232,232,1) 0%,rgba(232,232,232,1) 1%,rgba(255,255,255,0) 100%); border-radius: 40px / 20px; }
Используется псевдо-элемент CSS ::after , который получает линейный градиент с непрозрачностью. В дополнение устанавливаем скругленные углы рамки ’40px / 20px’ формируя овальную форму.
Теперь установим тень мяча:
#ballShadow { width: 60px; height: 75px; position: absolute; z-index: 0; bottom: 0; left: 50%; margin-left: -30px; background: rgba(20, 20, 20, .1); box-shadow: 0px 0 20px 35px rgba(20,20,20,.1); border-radius: 30px / 40px; }
Здесь снова используются свойства для центрирования тени. Но она смещается вниз элемента ‘#ballWrapper’. Также добавляет полупрозрачный фон, тень и скругленная рамка.
Анимация
Теперь сформируем эффект.
Начнем с добавления свойства анимации для всего мяча:
#ball { animation: jump 1s infinite; }
Здесь определяется имя анимации (jump ), ее длительность (1 секунда) и количество раз выполнения (в нашем случае значение ‘infinite’ определяет бесконечное выполнение анимации).
А вот код анимации:
@keyframes jump { 0% { top: 0; } 50% { top: 140px; height: 140px; } 55% { top: 160px; height: 120px; border-radius: 70px / 60px; } 65% { top: 120px; height: 140px; border-radius: 70px; } 95% { top: 0; } 100% { top: 0; } }
Здесь происходит работа со свойством ‘top’ мяча. Начиная с 0 до 160 и назад до 0. В середине анимации также также изменяется свойство ‘border-radius’ - так формируется "удар" мяча о фон.
А затем определяем анимацию тени:
#ballShadow { animation: shrink 1s infinite; }
Здесь используются те же значения, что и для мяча, только с другой анимацией, которая называется shrink :
@-keyframes shrink { 0% { bottom: 0; margin-left: -30px; width: 60px; height: 75px; background: rgba(20, 20, 20, .1); box-shadow: 0px 0 20px 35px rgba(20,20,20,.1); border-radius: 30px / 40px; } 50% { bottom: 30px; margin-left: -10px; width: 20px; height: 5px; background: rgba(20, 20, 20, .3); box-shadow: 0px 0 20px 35px rgba(20,20,20,.3); border-radius: 20px / 20px; } 100% { bottom: 0; margin-left: -30px; width: 60px; height: 75px; background: rgba(20, 20, 20, .1); box-shadow: 0px 0 20px 35px rgba(20,20,20,.1); border-radius: 30px / 40px; } }
В анимации тени изменяются другие свойства. Для того, чтобы придать реалистичности нужно изменить ширину, высоту и прозрачность тени. Когда мяч находится близко к "полу", тень должна стать темнее и меньше. Когда мяч отскакивает вверх, тень должна стать светлее и больше.
В завершении добавим эффект для нажатия кнопки мыши. Мяч будет удаляться от нас. Для достижения эффекта используем псевдо-класс ‘:active ‘, добавляется трансформация и изменение свойства ‘scale’:
#ballWrapper { transform: scale(1); transition: all 5s linear 0s; } #ballWrapper:active { transform: scale(0); }
Трансформация значения свойства ‘scale’ (от 1 до 0)формирует иллюзию удаления мяча от зрителя.
Теперь нужно создать набор ключевых кадров для различных положений сферы. В главе 1 вы узнали, что позаимствованный из традиционной анимации термин «создание ключевых кадров» означает фиксацию положения объекта в определенном кадре. Все остальные положения объекта компьютер достраивает автоматически.
Начнем с воспроизведения общего перемещения мячика. Сначала нужно заставить его подпрыгнуть вверх и опуститься вниз:
1. Активизируйте инструмент Move (Переместить), нажав клавишу w, и переместите сферу на 10 единиц в положительном направлении оси Y. Переместите камеру таким образом, чтобы получить достаточное пространство для движений мяча.
2. В главе 3 при создании ключей анимации для планет вы выделяли нужные атрибуты в окне диалога Channel Box (Окно каналов) и нажимали клавишу s. Но в данном случае мы воспользуемся другим методом.
Нажмите комбинацию клавиш Shift+w. Это приведет к появлению в первом кадре ключей анимации для атрибутов Translate X (Смещение по оси X), Translate Y (Смещение по оси Y) и Translate Z (Смещение по оси Z). Проверим текущие параметры анимации. Выберите в меню Window (Окно) команду Setting/Preferences > Preferences (Настройки/Параметры > Параметры) и в списке Categories (Категории) появившегося окна диалога выделите строчку Settings (Настройки). В раскрывающемся списке Time (Время) раздела Working Units (Рабочие единицы) должен быть выбран вариант NTSC (30 fps) (NTSC (30 кадров/с)). Щелкните на кнопке Save (Сохранить). Заданный по умолчанию диапазон анимации, равный 120 кадрам, вполне подходит для наших целей.
3. Щелкните на кнопке Auto Keyframe toggle (Включение режима автоматической установки ключевых кадров). Теперь любое изменение положения объекта будет приводить к автоматическому созданию ключа анимации для атрибутов Translate X (Смещение по оси X), Translate Y (Смещение по оси Y) и Translate Z (Смещение по оси Z).
ПРИМЕЧАНИЕ
Функция Auto keyframe (Автоматическая установка ключевых кадров) начинает работать только после того, как вы вручную зададите первый ключевой кадр для анимируемого атрибута.
4. Теперь нужно заставить мяч двигаться вниз. В данном случае точные временные интервалы не имеют особого значения, поэтому установите ползунок таймера анимации, например, на отметку кадра № 10 и перемещайте мяч в отрицательном направлении оси У, пока он не окажется примерно на четверть
погружен в опорную плоскость. Это нужно, чтобы впоследствии получить эффект сжатия мяча при ударе о поверхность. Программа автоматически создаст ключ анимации в этом кадре.
5. Установите ползунок таймера анимации на отметку кадра № 20 и переместите мяч вверх примерно на три четверти исходной высоты. Можно просто ввести в поле Translate Y (Смещение по оси Y) значение 7,5.
6. В кадре № 30 переместите мяч вниз, на этот раз погрузив его в пол менее чем на четверть.
7. В кадре № 40 поднимите мяч над поверхностью на половину исходной высоты, то есть до F-координаты 5.
8. Повторите описанную процедуру еще несколько раз, постепенно уменьшая высоту подскоков и глубину погружения в поверхность. Откройте окно диалога Graph Editor (Редактор анимационных кривых), выбрав в меню Window (Окно) команду Animation Editors > Graph Editor (Редакторы анимации > Редактор анимационных кривых), чтобы посмотреть на полученную кривую. Мы продолжим упражнение после детального рассмотрения интерфейса этого окна.
На втором шаге вы воспользовались комбинацией клавиш Shift+w, чтобы создать ключи анимации для преобразования перемещения по всем трем осям. Существуют аналогичные клавиатурные комбинации также для преобразований поворота и масштабирования. Нажатие клавиш Shift+e фиксирует текущую ориентацию объекта по всем трем осям, а комбинация Shift+r задает ключевые кадры для размера объекта по всем осям.
Окно диалога Graph Editor
Важным инструментом из арсенала аниматора является окно диалога Graph Editor (Редактор анимационных кривых). Оно дает возможность выполнить большую часть работы по редактированию движения объектов. Более того, с помощью этого инструмента можно создавать анимацию. Начальные сведения о нем вы получили в главе 2. В этом окне наглядно показано, как ключи анимации расположены во времени и в пространстве, что облегчает процесс их редактирования.
Функциональные кривые
Для правильного построения анимации важно понимать смысл функциональных кривых. По их виду вы можете судить о направлении движения объекта, его скорости, ускорении и времени перехода в то или иное положение.
Как вы увидите в следующем упражнении, любая анимация объекта сопровождается проблемами, решать которые удобней всего с помощью функциональных кривых. Не бойтесь прибегать к окну диалога Graph Editor (Редактор анимационных кривых) и пользуйтесь им при каждом удобном случае. Чем больше будет ваш опыт работы с ним, тем проще вам будет по виду кривых определить наличие проблем в анимации.
На первый взгляд функциональные кривые напоминают неоднородные рациональные сплайны Безье, с которыми вы уже знакомы. Но кривизну в данном случае контролируют не управляющие точки, а векторы касательных, находящиеся в местах расположения ключей анимации. Кривизна редактируется перемещением маркеров на концах управляющих векторов.
Функциональная кривая представляет собой зависимость значения выбранного атрибута (оно откладывается по вертикали) от номера кадра (он откладывается по горизонтали). Вид анимации зависит не только от положения ключей, но и от формы самой кривой. Вот пример расшифровки функциональной кривой и ее редактирования.
На рис. 8.1 показан результат анимации атрибута Translate Z (Смещение по оси Z).
Рис. 8.1. Пример анимационной кривой
Кривая показывает, что сначала объект быстро перемещается в положительном направлении оси Z. Затем движение постепенно замедляется, пока объект не остановится. Остановке движения соответствует плоский участок кривой, центр которого располагается в кадре № 41. После этого объект снова начинает двигаться с ускорением, но на этот раз в отрицательном направлении оси 2.. Движение происходит с постоянной скоростью вплоть до кадра № 62. Здесь направление перемещения резко меняется, и в течение 45 кадров объект двигается в положительном направлении оси Z. В конце скорость движения медленно спадает до нуля.
Рис. 8.2. Линейное движение
Таким образом, форма кривой в окне диалога Graph Editor (Редактор анимационных кривых) определяет, как будет двигаться объект. Например, на рис. 8.2 показана кривая, соответствующая равномерному прямолинейному перемещению.
На рис. 8.3 показана кривая для постепенно ускоряющегося объекта, движение которого внезапно прекращается в кадре № 30. Обрыв кривой означает прекращение движения. Исключением являются бесконечные кривые, о которых мы поговорим чуть позже.
Рис. 8.3. Движение с ускорением
Объект, функциональная кривая которого показана на рис. 8.4, резко начинает свое движение, затем оно постепенно замедляется. И в кадре № 27, где кривая становится плоской, объект останавливается.
Рис. 8.4. Движение с замедлением
Мячик из мультфильма
Теперь воспользуемся полученными знаниями для анализа анимационной кривой прыгающего мячика:
1. Откройте окно диалога Graph Editor (Редактор анимационных кривых) и посмотрите на анимационную кривую мячика. Она напоминает кривую с рис. 8.5.
Рис. 8.5. Анимационная кривая прыгающего мячика. Обратите внимание на уменьшение высоты подскока с течением времени
2. Обратите внимание на то, что кривая существует только для атрибута Translate Y (Смещение по оси Y), несмотря на наличие на панели Outliner (Структура) списка всех трех атрибутов перемещения. Дело в том, что в первом кадре ключ анимации был создан для каждого из атрибутов, но перемещение происходило только вдоль оси Y. Это не очень хороший подход. Если вы не собираетесь аними-ровать какой-либо из атрибутов, не имеет смысла создавать для него ключи анимации.
3. Запустите воспроизведение анимации, чтобы посмотреть на движение объекта. Щелкните на кнопке Animation Preferences (Параметры анимации) и убедитесь в том, что в раскрывающемся списке Time (Время) раздела Working Units (Рабочие единицы) выбран вариант NTSC (30 fps) (NTSC (30 кадров/с)).
4. Основное внимание следует уделить временным интервалам отдельных фаз движения, то есть скорости движения мяча вверх и вниз. В данный момент видим следующее:
- Сначала мяч падает слишком быстро, хотя второй и третий отскоки выглядят вполне реалистично.
- Поменять временные интервалы можно перемещением ключей анимации в окне диалога Graph Editor (Редактор анимационных кривых). Для этого выделите ключ анимации в кадре № 10, а также все расположенные за ним ключи, и переместите их на два кадра вправо (рис. 8.6).
Рис. 8.6. Переместив все ключи анимации, кроме первого, на два кадра вправо, вы замедлите начальное падение мяча
Чтобы переместить ключи анимации в окне диалога Graph Editor (Редактор анимационных кривых), выделите их, нажмите клавишу w и перетащите ключи средней кнопкой мыши. Удерживая в процессе этого перемещения клавишу Shift, вы ограничите его горизонтальной или вертикальной осью.
- Высота подскоков мяча постепенно уменьшается, однако интервал между подскоками по-прежнему составляет всего 10 кадров. То есть за то же самое время мяч проходит меньшее расстояние, поэтому скорость его движения возрастает. Чтобы исправить ситуацию, выделите три последних ключа анимации и переместите их на один кадр влево (рис. 8.7).
Рис. 8.7. Перемещение трех последних ключей анимации на один кадр влево делает перемещение мяча более естественным
Временные интервалы
Задание временных интервалов в анимации связано с установкой правильного порядка ключей. Для создания достоверной анимации крайне важно выбрать правильную скорость перемещения объекта. По мере роста вашего опыта выбор корректных временных интервалов будет происходить на интуитивном уровне. Упражнение с прыгающим мячиком крайне популярно как раз потому, что позволяет получить представление об основных аспектах редактирования анимации.
Загрузите файл ball_v02.mb из папки ChapterFiles\Bouncing_BaU\scenes прилагаемого к книге компакт-диска. Пока что при воспроизведении анимации движения мяча выглядят не очень натурально. Возникает ощущение, что он не отскакивает от пола, а опускается и поднимается на гребне волны. Проблема состоит в отсутствии ускорений и замедлений движения мяча. По умолчанию ключи анимации в Maya создаются таким образом, чтобы итоговая анимационная кривая была гладкой, как неоднородный рациональный сплайн Безье. Именно это является причиной некорректного движения мяча. Он должен постепенно разгоняться при падении и замедляться при отскоке. Вот как можно решить данную проблему:
1. В окне диалога Graph Editor (Редактор анимационных кривых) выделите все ключи анимации, соответствующие приземлению мяча, и щелкните на кнопке Linear Tangents (Линейные касательные) на панели инструментов этого окна.
2. Затем выделите все ключи анимации, соответствующие положению мяча в верхних точках, и щелкните на кнопке Flat Tangents (Плоские касательные). В итоге кривая анимации должна принять вид, показанный на рис. 8.8.
Рис. 8.8. Результат редактирования скорости мяча в начале и в конце подскока
3. Теперь при воспроизведении анимации мяч будет двигаться намного более реалистично. При желании вы можете самостоятельно дополнительно отредактировать ключи анимации по своему усмотрению.
Растяжение и сжатие
Идея деформации объекта при движении существует с момента возникновения анимации. Ведь таким способом создается впечатление, что объект имеет некий вес и реагирует на силу тяжести и столкновения с другими объектами. Простейшим способом деформации объекта в Maya является его неравномерное масштабирование, выполняемое с помощью инструмента Scale (Масштабировать). Вот как это выглядит на практике:
1. Загрузите файл ball_v03.mb с прилагаемого к книге компакт-диска или продолжите выполнение предыдущего упражнения. Убедитесь в том, что нажата кнопка Auto keyframe (Автоматическая установка ключевых кадров). Установите ползунок таймера анимации на отметку кадра № 12. Это соответствует первому удару мяча об пол. Нажмите клавишу г для активизации инструмента Scale (Масштабировать) и уменьшите масштаб мяча вдоль оси Y примерно до 0,6. Нужно сделать так, чтобы мяч больше не проваливался сквозь пол. Создайте ключ анимации для всех атрибутов масштабирования, нажав комбинацию клавиш Shift+r.
2. Установите ползунок таймера анимации на отметку кадра № 15 и увеличьте масштаб мяча по оси У примерно до 1,3.
Это соответствует его состоянию сразу после отскока от пола. Тремя кадрами позже верните масштаб мяча в исходное состояние, присвоив параметру Scale Y (Масштабирование по оси Y) значение 1.
3. Подвигайте ползунок таймера анимации. Вы обнаружите, что перед началом движения мяч уже находится в сплющенном состоянии. Это связано с отсутствием ключей анимации атрибутов масштабирования до момента соприкосновения
мяча с поверхностью. Установите ползунок таймера анимации на отметку кадра № 9 и введите в поле Scale Y (Масштабирование по оси Y) значение 1. Снова подвигайте ползунок таймера анимации, и вы увидите, что мяч начинает сплющиваться еще до момента соприкосновения с поверхностью. Откройте окно диалога Graph Editor (Редактор анимационных кривых) и переместите первый ключ анимации атрибута Scale Y (Масштабирование по оси Y) из кадра № 9 в кадр №11. Теперь мяч сжимается при ударе о пол и растягивается при отскоке.
4. Повторите описанную процедуру для остальных отскоков, постепенно уменьшая коэффициент масштабирования, ведь высота прыжков мяча уменьшается. Пара последних прыжков может происходить вообще без деформации мяча.
Для сравнения загрузите файл ball_v03.mb с прилагаемого к книге компакт-диска. Хотя теперь движение мяча выглядит корректно, ему не помешает небольшое редактирование, например более точный выбор временных интервалов. Откройте окно диалога Graph Editor (Редактор анимационных кривых) и поэкспериментируйте с анимационной кривой.
Что вы будете создавать
В этом уроке я научу вас создавать анимацию прыгающего мяча, которой вы будете гордиться!
Мы будем создавать мяч, который прыгает вверх и вниз. Наш прыгающий мяч будет двигаться по определенной схеме - это означает, что первый кадр нашей анимации - он же и последний кадр нашей анимации. Мы можем повторять то же самое снова и снова, и он может играть бесконечно.
Нарисуйте позиции мяча
В случае нашего прыгающего мяча, первый кадр будет представлять позицию № 1, а последний кадр мы будем называть позиция № 2. Когда мы завершим нашу анимацию, он будет двигаться по определенной схеме при проигрывании.
Шаг 1
Начните с рисования линии нижнего предела примерно высотой 2,54 см от нижней части страницы. Это точка приземления нашего мяча.
Шаг 2
Набросайте эскиз своего мяча - это не обязательно должен быть идеальный круг. Мне нравится работать с неидеальными набросками, когда я создаю анимации. Давайте нарисуем наш мяч на сантиметр ниже от верхней части страницы. Это позиция № 1. Мяч как будто находится над полом, и готов упасть и отскочить!
Шаг 3
Теперь давайте нарисуем мяч на второй позиции. Это позиция № 2. Мяч на полу и готов отпрыгнуть назад к позиции № 1! Вы можете увидеть светлый образ предыдущего кадра, так что у вас появится ощущение перемещения мяча по отношению к предыдущему кадру.
Шаг 4
Давайте вернемся и добавим еще один круг в промежуток между позой №1 и позой № 2. Этот круг является как бы кадром анимации в промежутке между нашими позициями. Эти круги создают иллюзию, что одна позиция плавно переходит в следующую.
Круги, которые мы нарисовали между позициями на этом этапе, нужны для движения между позицией № 1 и позицией № 2. Когда я создаю анимацию, я люблю отдавать предпочтение какой либо из позиций. Таким образом, рисунок-анимация нашего мяча находится не совсем посередине, а чуть ближе к позиции № 2, чем к позиции №1.
Шаг 5
Затем добавьте еще один круг между позицией № 2 и позицией № 1, чтобы создать видимость, что мяч подпрыгивает обратно к исходной позиции!
Давайте взглянем на нашу анимацию до этого момента. Она выглядит хорошо, но чего-то не хватает. Мяч выглядит плоским.
Шаг 6
Чтобы придать нашему прыгающему мячу немного упругости, мы можем добавить немного сжатый кадр мяча сразу после позиции № 2. Я оставил немного светлый образ позиции № 2, так что вы сможете увидеть сжатый образ мяча по отношению к позиции № 2. Убедитесь, что вы не меняете вес мяча - когда мяч давит вниз, он становится немного толще по бокам, таким образом, сохраняя свою массу.
Так гораздо лучше! Добавив еще один кадр сжатого мяча, он стал визуально более подвижным.
Шаг 7
Наш мяч выглядит хорошо, но ему по-прежнему не хватает чего-то. Давайте добавим растягивающийся мяч после приземляющегося мяча. На слайде вы видите, как растянутый мяч позиционируется по отношению к нашему последнему рисунку. Обратите внимание, как сохраняется масса, когда мяч растягивается, что делает его более вытянутым, при этом мяч становится тоньше по бокам.
Теперь наш мяч выглядит более подвижным и больше похож на эластичный резиновый мяч. Отлично!
Посмотрите на результат. Я дал название позиции № 1 и № 2 и обвел мячи посередине зеленым цветом.
Шаг 8
Давайте добавим еще один промежуточный мяч, чтобы сгладить движение мяча вверх к позиции № 1. Чем больше промежуточных рисунков имеет анимация, тем медленнее и плавнее его движение.
Шаг 9
Когда мяч приближается к верхней позиции, добавьте еще один промежуточный рисунок, чтобы замедлить и облегчить его отскок. Это сделает движение более реалистичным. Как только мяч подпрыгивает вверх и достигает своей высшей точки, он замедляет движение, как будто борется с гравитацией, и только потом начинает падать на землю.
Я дал название позиции № 1 и № 2 и выделил промежуточные рисунки зеленым, а два последних - синим.
А теперь давайте посмотрим на нашу анимацию. Это великолепный прыгающий мяч! Я думаю, что мы почти закончили! Но сначала…
Подправьте и раскрасьте свою анимацию
Шаг 1
Настало время подравнять нашу анимацию! Мне нравится работать, что называется «без деталей», когда я рисую анимацию. Теперь, когда мы довольны тем, как наша анимация глядит, давайте обведем наши рисунки поверх неровной линии, что придаст ему приятный, ровный черный контур.
Хорошо! Посмотрите на все наши рисунки вместе. Теперь это симпатичная кучка ровных мячей!
Вот наша анимация. Она выглядит здорово! Отличная работа! Остался последний штрих …
Шаг 2
Давайте раскрасим наш мяч! Раскрасьте все изображения мячей. Синий - мой любимый цвет, но вы можете выбрать любой цвет, какой захотите. Действуйте!
Отлично! Продолжайте, пока все мячи не будут окрашены.
Отличная работа!! Хорошая Анимация!
Это большой прыгающий мяч! Он выглядит потрясающе! За короткое время вы создали анимационный прыгающий мяч, который имеет вес и массу. Надувной мяч, которым вы можете гордиться. Продолжайте делать анимации - нет предела совершенству!
