Анимация мячик прыгает. Прыгающий мяч CSS — Реальный пример. Сжатие и растяжение
Чем же может действительно впечатлить CSS? Может произвольным выбором значений в зависимости от времени? По изображению, которое идет первым к данному уроку вы наверняка поняли что мы будем создавать сегодня. Так как мне тема футбола очень близка, поэтому я сделал пример с мячом. Мы сделаем так, чтобы мяч прыгал ударяясь о землю и стены. При этом мы сделаем так, чтобы каждый раз траектория отличалась от предыдущей, по которой проходил мяч. Этот пример показывает то, какие внушительные возможности есть в технологии CSS.
Скрытые возможности и анимация CSS3
Это 4-й урок, посвященный 3D преобразованиям и анимации CSS. Обязательно посмотрите и изучите предыдущие три урока:
Прыгающий мяч CSS — Реальный пример
Мяч, с произвольной траекторией полета смотрите ниже:
Мяч двигается по траектории, которая меняется время от времени.
Как обычно для тех у кого анимация не поддерживается браузером следующее видео:
Структура HTML
Смотрим из чего состоит структура этой анимации:
| 1 2 3 4 5 | <div id = "stage" > <div id = "traveler" > <div id = "bouncer" > </ div > </ div > |
Что у нас есть:
- — блок, в котором будет происходить анимация.— блок, который нужен чтобы двигать мяч по горизонтали.— блок с мячом. Также он необходим для того чтобы не только отобразить мяч, но и для задания вращения мяча, а также движения по вертикали.
Всемогущий CSS
Сперва давайте разберемся с ключевыми кадрами, потому что они здесь непростые. Вам нужно понять где мы двигаем мяч по горизонтали, а где по вертикали. Как и раньше, код не содержит префиксов.
Задаем движение по горизонтали. Для этого мы создали в HTML структуре блок с идентификатором traveler :
1 2 3 4 5 6 7 8 @keyframes travel { from { left : 21px ; } to { left : 530px ; } } Я задал что мяч будет двигаться с отступом в 21px слева. То есть он не будет касаться края и будет создаваться впечатление, будто он касается стены. Таким же образом он не будет доходить до конца, потому что мы ему задали 530px , а это на 70px меньше всей ширины сцены (но это еще с учетом размеров самого изображения с мячом). Таким образом вот его область, в которой он будет двигаться по горизонтали:
Сейчас мяч может двигаться только вправо и влево, и только по горизонтали. Как на примере ниже:
Анимация не воспроизводится? Смотрите короткий ролик ниже того, о чем я говорю:
А сейчас пришло время заставить мяч двигаться еще и по вертикали. Вот так выглядят ключевые кадры:
1 2 3 4 5 6 7 8 9 10 @keyframes bounce { from, to { bottom : 0 ; animation-timing-function : ease-out; } 50% { bottom : 310px ; animation-timing-function : ease-in; } } Вы уже могли заметить, что когда мяч поднимается и опускается скорость то повышается, то уменьшается. И в обоих случая по-разному. За это отвечают свойства animation-timing-function . Данное свойство может принимать следующие параметры: linear , ease , ease-in , ease-out и ease-in-out . Я перечислил не все, а лишь самые простые. Вы можете поэкспериментировать с ними самостоятельно и увидеть как изменяется скорость движения мяча.
Для того, чтобы сделать анимацию более реальную добавим вращение мяча. Используем следующие ключевые кадры.
В данном уроке представлен пример мощности 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 (Редактор анимационных кривых) и поэкспериментируйте с анимационной кривой.
Задание 3
Сложная Анимация.
Прыгающий мяч
Особый эффект анимации придают детали, имитирующие физические взаимодействия объектов реального мира, - столкновения, деформации, разрушения формы и т.п. В Мах существует множество механизмов для создания таких имитаций, и, кроме того, написаны очень мощные программы третьих фирм в виде подключаемых модулей к среде Мах. Однако следующий пример иллюстрирует, что вполне приличных результатов можно добиться, используя даже стандартные средства анимации.
1. Загрузите файл Ball.MAX. Определим задачу как создание сложной анимации мяча с имитацией упругих отскоков и деформаций.
2. Прежде всего, необходимо создать служебный объект, задающий амплитуду отскоков объекта «Мяч Футбольный» от плоскости «Поле». Перейдите в панель Create (Создать) и выберите кнопкой Helpers (Служебные Объекты) нужную категорию создаваемых объектов. Затем, щелкнув на кнопке Dummy (Служебный) из свитка Object Type (Тип Объекта), создайте вспомогательный куб рядом с мячом (рис. 9.28).
РИСУНОК 9.28. Создание Dummy (Служебного) объекта 3.
Далее установите Pivot Point (Опорную Точку) нового объекта в положение, выровненное с его нижней гранью. Для этого перейдите в режим редактирования опорных точек щелкнув последовательно на закладке панели Hierarchy (Иерархия), кнопках Pivot (Опора) и Affect Pivot Only (Работать Только с Опорной Точкой).
В результате в видовых окнах появится тройка утолщенных осей и, используя кнопку Align (Ориентация) из выполните перенос опорной точки куба «Dummy-Мяч». После левого щелчка на самом кубе появится диалоговое окно Align Selection (Выровнять Выделение), где необходимо выбрать переключатель Pivot Point (Опорная Точка) в группе Current Object (Текущий Объект) (им является опорная точка куба).
Далее выберите переключатель Minimum (Минимум) в группе Target Object (Целевой Объект) (им станет нижняя грань куба), а также включите флажок Y Position (Положение по Оси Y) (рис. 9.29).
РИСУНОК 9.29. Выравнивание Опорной Точки по нижней грани
После подтверждения ввода выйдите из режима редактирования опорных точек, щелкнув еще раз на кнопке Affect Pivot Only (Работать Только с Опорной Точкой). Теперь вам достаточно разместить куб «Dummy-Мяч» на поверхности плоскости «Поле», что можно сделать, повторив команду Align (Ориентация) и указав в диалоговом окне соответственно переключатели Pivot Point (Опорная Точка) и Maximum (Максимум), а также включив флажок Y Position (Положение по Оси Y). Затем выполните выравнивание куба по центру объекта «Мяч Футбольный», используя оси X, Z и в результате вспомогательный объект «Dummy-Мяч» будет размещен в исходное положение анимации.
4. Выполните связывание модели мяча со вспомогательным кубом по правилу «родитель-потомок». Для этого необходимо включить режим Select and Link (Выбрать и Связать) одноименной кнопкой в Main Toolbar (Основной Панели), последовательно щелкнуть на мяче и, нажав левую кнопку мыши, перейти на куб, а затем отпустить.
5. Включив кнопку Toggle AutoKey Mode (Переключатель в режим автоматического создания ключей), поднимите куб над плоскостью приблизительно на 190-200 единиц. Обратите внимание, что связанный с ним мяч переместится в ту же точку Переместитесь в кадр с номером 14 и, опустите куб в первоначальную точку на плоскость. Мяч тоже переместится в эту точку
6. Вызовите окно Track View - Curve Editor и задайте тип цикла Ping-Pong (Циклически Зеркальный) для анимации перемещения куба, используя соответствующие инструменты. Выполнив Эскиз Анимации, вы сможете увидеть циклическое подпрыгивание мяча на плоскости.
7. Теперь необходимо добавить затухание амплитуды скачков мяча и его поступательное движение.
Первая задача решается использованием специального механизма Мах - присвоения Multiplier Curve (Кривой Множителя) контроллеру анимации Position (Перемещения) объекта (эта кривая представляет собой график влияния и задает степень усиления / ослабления основного контроллера). Ее значения перемножаются с величинами параметра анимации и для генерации затухания должны плавно изменяться от 1 до 0). Для этого необходимо выбрать требуемую строку параметра анимации Position (Перемещения) куба в Окне Дерева Иерархии и выбрать в диалоговом окне из меню Curves (Кривые) команду Apply Multiplier Curve (Применить Кривую Множителя).
В результате возникнет одноименный подчиненный контроллер со своим треком и двумя ключами в кадрах 0 и 100. Значения ключей при создании равно 1, поэтому измените только последний из них на нулевое значение, а также задайте графики функции до и после ключа. Для придания большей плавности кривой переместите ключ из кадра 100 в 120-й кадр (рис. 9.30).
8. Поступательная составляющая движения мяча добавляется непосредственным заданием конечного положения в кадре с номером 100, поэтому, выбрав объект «Мяч Футбольный» и включив кнопку Toggle AutoKey Mode, перейдите в финальный кадр и переместите его вдоль оси X приблизительно до координаты 233 единицы по этой же оси. Контролируйте изменение координат по статусной строке или по диалоговому окну Move Transform Type-In (Точный Ввод Параметров Трансформаций).
Для наглядности активизируйте режим отрисовки траектории мяча в видовых окнах. Чтобы выполнить это, вызовите правым щелчком на модели мяча диалоговое окно Properties (Свойства) и включите флажок Trajectory (Траектория) в группе Display Properties (Свойства Показа) (рис. 9.31).
РИСУНОК 9.30. Внешний вид Функциональной Кривой Множителя
РИСУНОК 9.31. Включение отображения Траектории Анимации
9. Создайте Эскиз Анимации и проанализируйте полученные результаты. Безусловно, движение мяча требует добавления некоторых важных нюансов. Поэтому следующими действиями будут создание упругих деформаций мяча при его столкновениях с плоскостью и замедления движения по траектории, вызванные этими деформациями.
10. Выберите вспомогательный куб и откройте окно Track View -Curve Editor. Найдите трек Transform (Трансформации) объекта «Dummy-Мяч» в Окне Дерева Иерархии, раскройте его и выберите параметры анимации Position (Перемещение) и Scale (Масштаб) левым щелчком с нажатой клавишей
. В Окне Треков войдите в режим создания ключей, щелкнув на модальной кнопке Add Keys (Добавить Ключи) на Панели Инструментов диалогового окна. Создайте три ключа на функциональной кривой масштаба, отрисовываемой как прямая линия, проходящая через вертикальную координату 100 единиц. Перейдите в режим Move Keys (Перемещение Ключей), щелкнув на одноименной модальной кнопке, и переместите последовательно созданные ключи в кадры с номерами 13, 14 и 17. Щелкните правой кнопкой мыши последовательно на каждом ключе и, в появишихся диалоговых окнах, задайте форму кривой и введите следующие значения:
В результате будет создана деформация мяча в первой точке отскока.
Выполните копирование тройки созданных ключей во вторую и третью точки соприкосновения мяча с плоскостью. Эти точки характеризуются нулевым значением функциональной кривой Position (Перемещение) и располагаются соответственно в 42 и 70 кадрах.
Перейдите в кадр с номером 41 и для создания копии ключей выберите их на кривой Scale (Масштаб) (левым щелчком с клавишей
). 11. Включите режим горизонтального перемещения, выбрав из списка кнопок Move Keys (Перемещение Ключей) требуемую. Затем, удерживая клавишу
, перетащите выбранные ключи вправо и выполните их точное перемещение в кадр 41. Повторите аналогичные действия для кадра 69, и в результате должен получиться график анимации трех подскоков мяча (рис. 9.32).
РИСУНОК 9.32. Функциональные кривые Анимации Масштаба
12. Однако каждый последующий отскок мяча должен быть слабее, следовательно, необходимо уменьшить величины масштабных коэффициентов для ключей трека Scale (Масштаб) в кадрах 42 и 70:
13. Теперь остается лишь внести корректировку в траекторию движения мяча путем добавления замедления и изменений кривизны функциональной кривой, продолжая работать с вспомогательным объектом «Dummy-Мяч».
Выберите первый ключ на треке Position (Перемещение) правым щелчком и установите следующие значения параметров контроллера ТСВ Position (TCB Перемещение):
Далее перейдите к параметрам следующего ключа, нажав на правую стрелку возле номера кадра в диалоговом окне Key Info (Параметры Ключа), и настройте их так: после чего траектория мяча с учетом деформаций приобретет законченный вид (рис. 9.33).
РИСУНОК 9.33. Результирующая Траектория Анимации Мяча
14. Теперь остается лишь выполнить визуализацию полученной анимационной последовательности. Попробуйте самостоятельно удлинить анимацию, добавив качение мяча по плоскости, его остановку в «результате трения» и т.п.