Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#статьи</a>

2 <ul><li>5 дек 2022</li>

3 <li>0</li>

4 </ul>Как скорость влияет на ощущение характера персонажа, почему все движения должны повторять дугу и зачем иллюстраторы делают анимацию гипертрофированной.

5 Иллюстрация: James Curran / RADIO / Oliver Sin / EJ Hassenfratz / Colowgee для Skillbox Media

6 Пишет о дизайне в Skillbox Media, а в перерывах и сама орудует графическим планшетом. Влюблена в советские шрифты, японскую рекламу и русский язык.

7 Первые аниматоры студии Диснея - Олли Джонстон и Фрэнк Томас - сформулировали 12 принципов для создания убедительного движения персонажей. Хотя изначально их использовали только в мультфильмах, они помогут вам сделать убедительную анимацию на промостранице, логотипе, в рекламном ролике.

8 Рассказываем обо всех принципах студии Диснея и показываем, как дизайнеры используют их в повседневной работе.

9 Объекты из мягких материалов при движении будут немного деформироваться. Этот эффект можно использовать, чтобы герои не выглядели деревянными. Сжатие и растяжение формы показывает движение кожи и мышц и делает героя реалистичнее - даже если он стилизованный.

10 Изображение: Miguelgarest /<a>Dribbble</a>Изображение: Tigran Manukyan /<a>Dribbble</a>Этот приём актуален для любых движущихся предметов, которые должны быть из мягких материалов - ткани, шерсти, резины. А вот для металла или древесины сжатие и растяжение не характерны. В следующей анимации можно увидеть, как деформируется мячик, а ракетки при этом никак не сжимаются и не растягиваются:

11 Изображение: Gal Shir /<a>Dribbble</a>В жизни мы часто "готовимся" совершить большое движение, даже не замечая этого. Самое очевидное - перед тем как побежать вперёд, прыгнуть, потянуться к чему-то или нанести удар, мы отклоняемся назад, чтобы увеличить амплитуду. И этот приём можно использовать в анимации для большей убедительности. Тут коала немного отклоняет голову назад, перед тем как начать тянуться к ветке.

12 Изображение: Daryl.Motion /<a>Dribbble</a>Управлять вниманием зрителя можно с помощью композиции, фона, ракурса и масштаба изображения. Нестандартный ракурс, крупный размер и центральное расположение привлекут к объекту дополнительное внимание.

13 Здесь, несмотря на слабый контраст фона с персонажами, зритель смотрит только на них - благодаря расположению по центру и непривычному ракурсу:

14 Изображение: James Curran /<a>Dribbble</a>Также сценичность влияет и на сюжет. Например, на этой иллюстрации сразу видно главного героя - мужчину на беговой дорожке, который расположен по центру. Если убрать из композиции пончик, то восприятие иллюстрации станет совсем другим:

15 Изображение: uzma nida hollywood zulqarnain /<a>Behance</a>Дисней описывал два подхода к созданию анимации: рисовать каждую позу последовательно (straight ahead) или нарисовать сначала ключевые позы, а потом - промежуточные кадры между ними (pose to pose).

16 Современная анимация почти всегда делается от позы к позе: дизайнер устанавливает на таймлайне значимые позы, а переходы между ними программа делает сама. Во времена Диснея такого, конечно, не было: художник всё рисовал вручную. Так что разница двух подходов - только в мышлении и последовательности работы.

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

18 Кадр: мультфильм "Покахонтас"А если нужно показать трансформацию героя или его быстрое перемещение из точки А в точку В, логично отрисовать ключевые позы, а потом заполнить место между ними менее значимыми промежуточными движениями. Здесь, например, акцентирована исходная поза Золушки и финальная, после преображения:

19 Кадр: мультфильм "Золушка"Части тела героя могут двигаться с разной скоростью и по разным траекториям: когда одна нога бегущего впереди, другая будет сзади, а волосы вообще могут развеваться в обратном направлении из-за ветра. Поэтому хвосты, крылья и волосы могут перекрывать друг друга, двигаться с разной скоростью или в разных направлениях.

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

21 Изображение: R A D I O /<a>Dribbble</a>При естественном движении объекту нужно время, чтобы набрать скорость. Автомобиль, например, сначала будет ехать медленно и разгонится только через несколько секунд. То же самое и с торможением: машина не сможет мгновенно остановиться на скорости 200 км/ч - она несколько секунд будет замедляться. Обычно этот эффект заметить сложно, потому что на этом ощущении редко делают акцент.

22 Тут можно увидеть, что герой сначала летит медленно и ускоряется во время падения:

23 Изображение: Ravichandra Gopalakrishnan /<a>Behance</a>А в этой анимации во время прыжка герой задерживается в наивысшей точке, а потом с ускорением летит вниз:

24 Изображение: Diana Prota /<a>Dribbble</a>Здесь герой совершает сложное движение: прыжок с разбегом. Его скорость изменяется в течение всей анимации, причём художник утрировал эти эффекты. В высшей точке прыжка он замирает, а приземляется очень резко:

25 Изображение: Emory Allen /<a>Dribbble</a>В природе многие вещи естественным образом движутся по дугообразной траектории. Например, так работают конечности людей - за счёт вращения суставов. В следующей анимации художник решил сделать морковку одушевлённой и придал ей человеческие черты - в частности, дугообразную траекторию движения ноги и поясницы:

26 Изображение:<a>EJ Hassenfratz</a>/<a>Dribbble</a>Прыжок тоже совершается по дуге: человек делает толчок вперёд и вверх.

27 Изображение: Eduard Mykhailov /<a>Dribbble</a>В реальном мире всё движется параллельно: тело персонажа, его мимика, одежда, трава и облака на фоне, другие персонажи. Поэтому, чтобы сделать анимацию более правдоподобной, нужно не ограничиваться единственным движением, а дать зрителю чуть больше подробностей.

28 Этот персонаж в прыжке выглядит убедительно, потому что у него движутся длинные усы:

29 Изображение: Emanuele Colombo /<a>Behance</a>А здесь показано раскачивание ветки, с которой спрыгивает белка, - это тоже деталь, которая придаёт сцене правдоподобности:

30 Изображение: Emma Frost /<a>Dribbble</a>Скорость движения будет влиять на впечатления зрителя. Одно и то же действие можно, например, растянуть на десять секунд или сжать до двух. В первом случае персонаж будет медленно идти, а во втором - быстро бежать. Также герой может двигаться равномерно или изменять скорость - и эффект будет разным.

31 В этой анимации тайминг продуман в зависимости от движения: оса летит энергично, в быстром равномерном темпе, приземляется медленно, а впивается резко одним махом:

32 Изображение: Oliver Sin /<a>Dribbble</a>Вот ещё один пример - так как персонаж идёт медленно, тесак в его руке кажется тяжёлым. Если ускорить ту же анимацию, тесак будет ощущаться лёгким:

33 Изображение: Tsuriel /<a>Dribbble</a>Чтобы движения на экране смотрелись более выразительно, имеет смысл их утрировать. Это можно сделать с помощью большей амплитуды движения, активной деформации или с помощью перспективных искажений. Тут, например, ракурс усиливает движение:

34 Изображение: Hao Li /<a>Behance</a>В искусстве анимации важную роль играют не только моушн-эффекты, но и отрисовка объектов и персонажей. Чтобы получилось узнаваемое движение, нужен продуманный рисунок и узнаваемый силуэт.

35 В следующем примере пластика персонажа достигнута не только с помощью пружинящего движения, имитирующего шаг, но и благодаря силуэту. Вид сбоку - самый узнаваемый ракурс для идущего человека. По этому силуэту мгновенно понятно, что человек идёт. Несмотря на стилизацию, тут продуманы нюансы, которые делают рисунок ещё более убедительным: например, рука и нога на заднем плане темнее, чем на переднем.

36 Изображение: Marcus Magnusson /<a>Dribbble</a>Важно, чтобы персонаж был чем-то симпатичен аудитории - независимо от того, положительный это герой или злодей. Привлекательность - качество, которое трудно измерить. Но достичь его можно с помощью необычной формы, интересных деталей, мимики или неожиданных движений.

37 Изображение: Bee Grandinetti /<a>Dribbble</a><a>Курс с трудоустройством: "Профессия Моушн-дизайнер" Узнать о курсе</a>