+7 (499) 380-66-48

Как сделать анимации живыми

Основные принципы анимации
13.04.2018
15
1
avatar

Виктор Гунин

Frontend developer

Вокруг нас живой, движимый мир и желание придать такое же движение и жизнь статичным элементам на сайте - вполне разумное желание. Но как добиться действительно «живых» анимаций? Как заставить элемент сайта двигаться будто он подчиняется нашим с вами законам физики? Я расскажу.

Когда думаешь о самой приятной и живой анимации на ум сразу приходит студия Дисней. И именно аниматоры этой студии еще в середине ХХ века предложили миру 12 принципов анимации. Естественно ни о каких сайтах, формах и выпадающих меню они не подозревали, но все те же 12 принципов отлично подходят и для нашей с вами работы.

Давайте посмотрим о чем речь.

Принцип 1. Сжатие и растяжение

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

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

Принцип 2. Подготовка, или упреждение

Ни одно движение не начинается моментально. Дня начала движения необходима подготовка. Человек перед прыжком сгибает ноги, перед броском мяча бейсболист отводит руку назад, перед свистком футбольный судья набирает воздуха в грудь. В вебе - если мы собираемся передвигать элемент, этот элемент не должен сразу получать ускорение, было бы неплохо для начала немного отодвинуть его назад, будто мы выстреливаем им из воображаемой рогатки. Человеческому глазу такое принцип движения будет намного более очевидным и живым.

Важно! Упреждающее движение всегда направлено в противополложную сторону от основного!

Принцип 3. Сценичность (постоянный учёт того, как видит образ зритель)

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

Принцип 4. Использование компоновок и прямого фазованного движения

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

Принцип 5. Сквозное движение (или доводка) и захлест действия

Сквозное движениеКак и в случае подготовки, движение не может прекращаться моментально. При остановке предмет или анимированный элемент пройдет немного большее расстояние, вернется обратно (тоже с избыточным движением), и в итоге займет окончательное положение. Чем больше воображаемый вес предмета, тем менее избыточным движением он будет обладать. И обратно - легкие предметы будут "болтаться" при резкой останоке.

Принцип 6. Смягчение начала и завершения движения (Спэйсинг)

Принцип, который, наверное, наиболее часто используется всеми, кто использует анимации в вэбе - easing. Движение начинается плавно, набирает скорость и точно так же затухает. У нас есть долстаточно много вариантов сглаживания движения, самый часто используемый для стандартного движения - ease-in-out.

Принцип 7. Дуги

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

Принцип 8. Дополнительное действие (выразительная деталь)

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

Принцип 9. Расчёт времени (Тайминг)

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

Принцип 10. Преувеличение, утрирование

Иногда скучно показывать объективную реальность такой, какая она есть. Иногда интересно преувеличивать движение, добавлять дополнительное искажение или импульс, это выглядит живее и веселее чем стандартное, привычное движение. Бывает важно удивить пользователя.

Принцип 11. «Крепкий» (профессиональный) рисунок.

При всей абстрактности элементов нельзя забывать то, что у предмета есть форма и вес. Расхождения с тем, что мы можем наблюдать в жизни будут заметны и вызовут ощущения обмана илинедоработки. если элемент отстает от фона - должна быть тень. Если у элемента был объем, толщина - она не должна пропадать без причины.

Принцип 12. Привлекательность

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

Это все?

Создание анимированных элементов - искусство, еще большее искусство - это создание действительно живых анимаций, которые позволят пользователю наслаждаться временем пребывания на вашем сайте. Анимации помогают, удивляют, радуют, веселят и очаровывают. И приведенные выше принципы должны помочь вам этого добиться. 

Понравилась статья?
Лайкни или поделись с друзьями
Подписка на новые статьи
Введите корректный email
Я согласен с условиями обработки персональных данных