Анимация для начинающих: как оживить мяч
![Изображение конечного продукта](imager/https://cms-assets.tutsplus.com/uploads/users/1112/posts/26330/final_image/animate-squash-stretch-slide-37.jpg)
В этом уроке я расскажу вам о том, как оживить сквош и растянуть. Включение сквоша и растяжка в анимацию персонажа или даже объект, такой как прыгающий шар, придает вашей анимации так много жизни!
Я покажу вам, как наносить сквош и растягиваться в свою собственную анимацию. Это анимация! Небо - предел, так что не бойтесь преувеличивать!
Вы помните наш учебник по прыжкам с мячом? В нашей анимации шара было немного сквоша и растягивание. Давайте используем наш шар в качестве примера, чтобы узнать о сквош и растяжке. Посмотрите на этот пример прыгающего мяча. Он выглядит немного жестким.
![Отскок мяча без сквоша и растяжки](https://cms-assets.tutsplus.com/uploads/users/1112/posts/26330/image/animate-squash-stretch-balldemo-01.gif)
Теперь, в этом примере прыгающего шара, обратите внимание на то, как мяч удлиняется, когда он падает. Это подчеркивает скорость падения мяча. Это растяжение . Затем мяч становится более плоским, когда он бьет по земле, поскольку он подчеркивает скорость и вес мяча. Это сквош . Я преувеличивал сквош и растягивался ради этой демонстрации.
![Отскок мяча с сквошем и растяжкой](https://cms-assets.tutsplus.com/uploads/users/1112/posts/26330/image/animate-squash-stretch-balldemo-02.gif)
Давайте посмотрим на выстроенные рисунки. Стартовая поза нашего мяча находится на красной вершине. Растянутая поза мяча находится в зеленом цвете. Смятая поза нашего шара находится внизу на красном. Довольно круто, да? Теперь давайте анимируем наш собственный сквош и растянемся с помощью персонажа! Поехали!
![Прыгающий мяч](imager/https://cms-assets.tutsplus.com/uploads/users/1112/posts/26330/image/animate-squash-stretch-slide-01.jpg)
1. Нарисуйте наши позы
Я думал, что буду использовать очень забавный мультяшный персонаж с бобовидным телом, чтобы действительно показать преувеличенный сквош и растянуть. Он милый маленький парень, тебе не кажется? Мы собираемся оживить наш персонаж, прыгающий с левой стороны рамки в правую сторону рамки.
![Наш персонаж](imager/https://cms-assets.tutsplus.com/uploads/users/1112/posts/26330/image/animate-squash-stretch-slide-02.jpg)
Шаг 1
Начнем с составления рекомендации по этажу.
![Нарисуйте пол](imager/https://cms-assets.tutsplus.com/uploads/users/1112/posts/26330/image/animate-squash-stretch-slide-03.jpg)
Шаг 2
Нарисуйте нашу первую позу / крайность. Я начал с нашего маленького парня в стартовой позиции. Если вы хотите немного повеселиться, вы можете нарисовать волосы на голове персонажа. Когда мы идем, заметьте, как волосы могут быть затронуты первичными движениями персонажа. Это называется вторичным действием.
![Начальная поза](imager/https://cms-assets.tutsplus.com/uploads/users/1112/posts/26330/image/animate-squash-stretch-slide-04.jpg)
Шаг 3
Для нашей второй позы наш персонаж упреждает движение до того, как он прыгнет.
![Поза 2](imager/https://cms-assets.tutsplus.com/uploads/users/1112/posts/26330/image/animate-squash-stretch-slide-05.jpg)
Я положил немного сквоша в его предвкушение предвкушения.
![](imager/https://cms-assets.tutsplus.com/uploads/users/1112/posts/26330/image/animate-squash-stretch-slide-06.jpg)
Шаг 4
Нарисуйте нашу третью позу. Я работаю очень грубо! Не бойтесь быть беспорядочным и иметь эскизные линии повсюду. Сквош и стрейч иногда могут быть грязными и забавными!
![Поза 3](imager/https://cms-assets.tutsplus.com/uploads/users/1112/posts/26330/image/animate-squash-stretch-slide-07.jpg)
Обратите внимание, как наш персонаж начинает удлиняться, но я сохраняю массу персонажа одинаково. Когда он становится все длиннее и выше, его стороны сближаются. Персонаж становится более тонким, но масса не меняется. Если он прыгнет, и он доберется дольше, но его стороны не сблизятся, он будет выглядеть так, как будто он растет и становится гигантом!
![Поза 3 и 2 вместе](imager/https://cms-assets.tutsplus.com/uploads/users/1112/posts/26330/image/animate-squash-stretch-slide-08.jpg)
Шаг 5
Нарисуйте позу № 4. Он возвращается к своей первоначальной массе / размеру, и он находится в верхней части рамки. Он собирается начать спуск.
![Поза 4](imager/https://cms-assets.tutsplus.com/uploads/users/1112/posts/26330/image/animate-squash-stretch-slide-09.jpg)
Шаг 6
Давайте нарисуем нашу пятую позу. Он снова начинает растягиваться по пути вниз.
![Поза 5](imager/https://cms-assets.tutsplus.com/uploads/users/1112/posts/26330/image/animate-squash-stretch-slide-10.jpg)
Посмотрите, как он растягивается по сравнению с позой раньше.
![Поза 4 и 5 вместе](imager/https://cms-assets.tutsplus.com/uploads/users/1112/posts/26330/image/animate-squash-stretch-slide-11.jpg)
Шаг 7
Давайте проведем нашу шестую позу. Когда персонаж контактирует с землей, он действительно растягивается, когда он быстро опускается на землю.
![Поза 6](imager/https://cms-assets.tutsplus.com/uploads/users/1112/posts/26330/image/animate-squash-stretch-slide-12.jpg)
Шаг 8
Давайте нарисуем нашу седьмую позу. Теперь ноги персонажа действительно посажены на землю.
![Поза 7](imager/https://cms-assets.tutsplus.com/uploads/users/1112/posts/26330/image/animate-squash-stretch-slide-13.jpg)
Шаг 9
Теперь, когда он остановился, он продолжает двигаться вниз и сквозит, когда его вес продолжает двигаться вниз. Я действительно преувеличивал сквош в позе 8, настолько, что его приземистое тело спрятало его ноги! Не бойтесь преувеличивать, когда вы живете (эй, это рифмуется!).
![Поза 8](imager/https://cms-assets.tutsplus.com/uploads/users/1112/posts/26330/image/animate-squash-stretch-slide-14.jpg)
Шаг 10
Давайте нарисуем нашу девятую позу. В этой позе, после того, как он сквозит, он слегка растягивается, когда он возвращается.
![Поза 9](imager/https://cms-assets.tutsplus.com/uploads/users/1112/posts/26330/image/animate-squash-stretch-slide-15.jpg)
Шаг 11
Давайте нарисуем нашу финальную позу № 10. В этой позе он затем опускается в свою конечную позу.
![Поза 10](imager/https://cms-assets.tutsplus.com/uploads/users/1112/posts/26330/image/animate-squash-stretch-slide-16.jpg)
Обратите внимание, как поза 9 перевыпускает последний рисунок, а затем он возвращается к своему первоначальному «размеру» в позе 10. Это добавляет немного «подушки» к нашему действию. Наш персонаж успешно завершил свой прыжок. Хорошая работа! Посмотрим, как это выглядит!
![Поза 9 и 10 вместе](imager/https://cms-assets.tutsplus.com/uploads/users/1112/posts/26330/image/animate-squash-stretch-slide-17.jpg)
Действительно хорошая работа! Выглядит отлично! Он может использовать промежуточный здесь и там, чтобы сгладить действие.
![Просмотр превью](https://cms-assets.tutsplus.com/uploads/users/1112/posts/26330/image/animate-squash-stretch-preview-01.gif)
2. Добавить некоторые в-Betweens
Шаг 1
Оглядываясь назад на анимацию, я чувствую, что мы можем использовать промежуточный между позой 1 и позой 2. Это сглаживает движение между позой 1 и позой 2, что является нашей предвечной позицией.
![Поза 1 и 2](imager/https://cms-assets.tutsplus.com/uploads/users/1112/posts/26330/image/animate-squash-stretch-slide-06.jpg)
Посмотрите, как промежуточный элемент находится между позицией 1 и позой 2.
![добавить промежуточный](imager/https://cms-assets.tutsplus.com/uploads/users/1112/posts/26330/image/animate-squash-stretch-slide-18.jpg)
Шаг 2
Теперь давайте добавим промежуток между нашей второй и третьей позой.
![добавить промежуточный](imager/https://cms-assets.tutsplus.com/uploads/users/1112/posts/26330/image/animate-squash-stretch-slide-19.jpg)
Шаг 3
Хорошо выглядеть! Теперь мы могли бы использовать промежуточный между позами 8 и 9, когда он выходил из своей раздавленной позы.
![добавить промежуточный](imager/https://cms-assets.tutsplus.com/uploads/users/1112/posts/26330/image/animate-squash-stretch-slide-20.jpg)
Шаг 4
Наконец, он может использовать промежуточный между позами 9 и 10, когда он возвращается в свою обычную стоячую позу.
![добавить промежуточный](imager/https://cms-assets.tutsplus.com/uploads/users/1112/posts/26330/image/animate-squash-stretch-slide-21.jpg)
Это выглядит великолепно! Теперь это бодрый, эластичный, сквошный парень!
![Просмотр превью](https://cms-assets.tutsplus.com/uploads/users/1112/posts/26330/image/animate-squash-stretch-preview-02.gif)
3. Затяните наши анимационные рисунки
Теперь, когда наша анимация выглядит приятной, мы можем начать ужесточать линию для нашего персонажа. Я все еще работаю с чернильной линией, но улучшаю мелкие вещи, когда я иду.
Я хочу показать вам прогресс, поэтому я оставил свою черную линию светло-серым. Я чернила свою последнюю строку в черном, поэтому мы видим линию против серого.
Шаг 1
Очистка чертежа 1. Посмотрите, как я покинул свою грубую анимационную линию серым цветом. Я очистил черную линию на всех шагах, чтобы показать вам, как я обтекаю, аккуратно и улучшаю рисунок, когда я иду.
![Очистка чертежа 1](imager/https://cms-assets.tutsplus.com/uploads/users/1112/posts/26330/image/animate-squash-stretch-slide-22.jpg)
Шаг 2
Очистка чертежа 2.
![Очистка чертежа 2](imager/https://cms-assets.tutsplus.com/uploads/users/1112/posts/26330/image/animate-squash-stretch-slide-23.jpg)
Шаг 3
Очистка рисунка 3. Обратите внимание, как я сохраняю пропорции и ощущения моего оригинального рисунка, но сделал небольшие улучшения. Я заставил ноги чувствовать себя более обоснованными и выровнять их больше с ногами на предыдущем рисунке.
![Очистка чертежа 3](imager/https://cms-assets.tutsplus.com/uploads/users/1112/posts/26330/image/animate-squash-stretch-slide-24.jpg)
Шаг 4
Очистка рисунка 4. Обратите внимание, как я слегка изменил положение ног, так что ноги заземлены в том же месте, что и предыдущие стоки; таким образом, ноги не скользят по всему месту. Не бойтесь воспроизводить анимацию, когда вы очищаете каждый рисунок, чтобы убедиться, что анимация выглядит нормально, когда вы идете вперед.
![Очистка чертежа 4](imager/https://cms-assets.tutsplus.com/uploads/users/1112/posts/26330/image/animate-squash-stretch-slide-25.jpg)
Шаг 5
Очистите остальные чертежи.
![Очистка рисунка 5](imager/https://cms-assets.tutsplus.com/uploads/users/1112/posts/26330/image/animate-squash-stretch-slide-26.jpg)
![Очистка чертежа 6](imager/https://cms-assets.tutsplus.com/uploads/users/1112/posts/26330/image/animate-squash-stretch-slide-27.jpg)
![Очистка рисунка 7](imager/https://cms-assets.tutsplus.com/uploads/users/1112/posts/26330/image/animate-squash-stretch-slide-28.jpg)
![Очистка рисунка 8](imager/https://cms-assets.tutsplus.com/uploads/users/1112/posts/26330/image/animate-squash-stretch-slide-29.jpg)
![Очистка рисунка 9](imager/https://cms-assets.tutsplus.com/uploads/users/1112/posts/26330/image/animate-squash-stretch-slide-30.jpg)
![Очистка чертежа 10](imager/https://cms-assets.tutsplus.com/uploads/users/1112/posts/26330/image/animate-squash-stretch-slide-31.jpg)
![Очистка рисунка 11](imager/https://cms-assets.tutsplus.com/uploads/users/1112/posts/26330/image/animate-squash-stretch-slide-32.jpg)
Продолжайте, вы почти закончили! Обратите внимание, как на рисунке 12 я улучшил положение рта. Я думал, что рот был немного ниже моего первоначального рисунка.
![Очистка чертежа 12](imager/https://cms-assets.tutsplus.com/uploads/users/1112/posts/26330/image/animate-squash-stretch-slide-33.jpg)
![Очистка рисунка 13](imager/https://cms-assets.tutsplus.com/uploads/users/1112/posts/26330/image/animate-squash-stretch-slide-34.jpg)
Вы закончили - это ваш последний рисунок! Я убрал его и сделал его более похожим на оригинальную старую позу.
![Очистка рисунка 14](imager/https://cms-assets.tutsplus.com/uploads/users/1112/posts/26330/image/animate-squash-stretch-slide-35.jpg)
Вот наш окончательный рисунок во всей красе; Я показываю вам строки без эскиза. Отличная работа!!
![Рисование 14 очищено](imager/https://cms-assets.tutsplus.com/uploads/users/1112/posts/26330/image/animate-squash-stretch-slide-36.jpg)
Congrats! Отличная работа!
Вы проделали хорошую работу! Вы действительно получаете ведро сквоша и растягиваете! Попробуйте все на вашей анимации: прыгающий мяч, персонаж, прыгающий или падающий. Любое количество действий может быть усилено сквошем и растяжкой.
Не бойтесь преувеличивать или делать сквош и растягиваться в своей анимации. Это ваша особая анимация, так что сделайте ее своей! И помните, практика делает совершенным, так что продолжайте оживлять!
![Поздравляю](https://cms-assets.tutsplus.com/uploads/users/1112/posts/26330/image/animate-squash-stretch-demo-03.gif)
1