Анимация сделана легко: Прыгающий мяч - Деформация и Растяжение.

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

Я добавил еще один кадр в позиции x и сгладил кривую в конце, чтобы шар не так сильно прыгал, а катился красиво.

Мне очень нравится этот последний крошечный скачок, потому что его почти не видно, его просто ощущаешь.




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

Суть в том, что внешняя сила изменяет форму, а объем остается прежним: когда он касается земли, все должно сжиматься, затем он должен растягиваться в воздух и снова сжиматься, когда касается земли.

Шаг 1

Сначала нам нужно заняться якорной точкой слоя.

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

Вы можете также убрать привязку, чтобы лучше это увидеть.





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

При создании мы взяли цветовую площадь 100x100 пикселей. Если в якорной точке для y вместо 50 поставить значение «100», то якорная точка будет находиться точно на нижней поверхности шара.

Это должно остаться таким.

Шаг 2

Однако нам нужно также сместить путь движения на 50 пикселей. Лучше всего сделать это в режиме Ключевых кадров.

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

Затем выберите позицию y самостоятельно, чтобы выделить все ключевые кадры позиции y, и перетащите ползунок на «720».





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

Шаг 3

Самый важный аспект сжатия и растяжения - сохранение объема. Если я сделаю шар плоским, он также должен стать шире и наоборот. Если я подниму его выше, он должен стать уже, чтобы объем оставался прежним.

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

Представим себе шар как прямоугольник, так как на самом деле он таков, так как изначально наш шар - это цветовая площадь, у нас есть сторона а и другая сторона а, которая одинаково велика.

Теперь мы сжимаем и растягиваем шар каким-то образом, тогда красная площадь b/c должна быть такой же как красная площадь a/a.

Теперь переведем это в уравнение: a * a = b * c

Мы знаем, что а имеет значение 100.

Текущее значение х - это b и текущее значение у - это c.

Мы влияем на одно из них, давайте возьмем х, тогда здесь будет 10 000 = x * y

Если x остается неизвестным, давайте выразим у.

y = 10 000 / x. Я называю это формулой сжатия и растяжения и это выражение затем вставляется в масштаб, как выражение.

Шаг 4

Мы нажимаем Alt и масштабируем с помощью мыши.

"x = значение". Значение всегда дает мне текущее значение. У него есть 2 слота, 2 аргумента.

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

И "y = 10 000/x".

Затем мы помещаем "y, х" в квадратные скобки. Это формат, в котором мы снова обратно получаем два значения масштабирования.

Мы это подтверждаем, и сначала ничего не происходит, ...

Шаг 5

… но как только мы начинаем двигать x, у нас появляется фантастический squash и stretch, при котором объем остается постоянным.

Шаг 6

Давайте рассмотрим, как происходит squash и stretch.

Когда мяч на верху, происходит равновесие сил. Это означает, что во всех этих точках мы можем установить ключевую точку, потому что там больше не действует никакая другая сила, кроме собственной. Это 100% ключевые точки.

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

Шаг 7

Сейчас, возможно, вы скажете, что на половине пути вниз мяч движется быстрее - нет. Коротким мгновением до удара он двигается быстрее. Кадр до того, как мяч ударит по земле👀 Мячу неизвестно, что скоро придет земля, и он не боится земли, а внезапно его выбрасывают на землю. И это именно то воздействие, на которое он подвергается.

Итак, squash и stretch анимируются так, чтобы мяч был самым длинным за кадр до удара о землю. Мы растягиваем его на это время…

… и в момент удара он сжимается, мы растягиваем его в ширину.





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

Шаг 8

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

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

Шаг 9

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

Сначала я добавлю Easy Ease-ключевые точки, что позволит нам лучше распределить пространство. Кроме того, мы получим более красивые акценты на точках перегиба из-за более плоских участков, то есть в этих местах есть некоторое ускорение или замедление, когда происходит squash и stretch, и у нас есть еще несколько моментов в воздухе, где на него не оказывается никакое воздействие. Мне это очень нравится.

Шаг 10

Теперь добавляем вращение, последнее, что мы должны анимировать при Bouncing Ball, и это тоже очень просто:

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

На вершинах и на земле в точках перегиба вращение всегда равно нулю.

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

Шаг 11

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

После небольших настроек все это выглядит вот так:

У нас почти все элементы, которые присущи Bouncing Ball: у нас есть классическое движение мяча, а также его squash и stretch и вращение.





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

Об этом будет речь в следующей части серии уроков "Анимация в After Effects: Bouncing Ball - Zerplatzen".