Когда дело доходит до веб-анимации, существует очень классический набор принципов:Twelve basic principles of animation, то есть 12 основных принципов анимации (также известных как принципы анимации Диснея), и в Интернете есть множество статей, которые интерпретируют и расширяют это:
Используемый в нем пример DEMO относительно прост и понятен, но он плохо отражает то, как его следует гибко использовать в реальном производстве. Сегодня эта статья заставит вас пересматривать и пересматривать снова и заменять самые простые DEMO некоторыми очень практичными и классными анимационными DEMO эффектами сегодня.
Сжать и растянуть -- сжать и растянуть
Цель сжатия и растяжения — придать нарисованному объекту ощущение веса и гибкости. Его можно применять к простым объектам, таким как прыгающие мячи, или к более сложным структурам, таким как мускулатура человеческого лица.
Применительно к анимации наиболее важным аспектом этого принципа является то, что объем объекта не изменяется при его сжатии или растяжении. Если длина мяча растягивается по вертикали, его ширина (три измерения и глубина) должна соответственно уменьшаться по горизонтали.
Глядя на картинку выше, становится очевидным, что траектория справа гораздо более реальна, чем та, что слева.
Принцип анимации следующий:
Похожие еще несколько интересных демо-версий веб-анимации:
Демо-версия CodePen -- CSS Flippy Loader 🍳 Автор Jhey
Посмотрите внимательно на приведенную выше анимацию загрузки, каждый блок будет иметь действие подготовки к сжатию перед прыжком вверх.В процессе сжатия высота становится меньше, а ширина становится шире.Это сжатие и растяжение, что делает анимацию более реалистичной.
Хорошо, посмотрите на два похожих эффекта, чтобы усилить впечатление:
CodePen Demo -- CSS Loading Animation
CodePen Demo -- CSS Animation Loader - Jelly Box
Подводя краткий итог, суть сжатия и растяжения заключается в том, чтобы поддерживать постоянный объем объекта, когда элемент растягивается, его ширина должна быть меньше, а когда элемент сжимается, его ширина должна быть больше.
Ожидание – подготовительное действие
Действие подготовки используется для подготовки основного действия анимации и делает действие более реалистичным.
Например, танцор, который прыгает с пола, должен сначала согнуть колени, а игрок в гольф, который замахивается, должен сначала отвести клюшку назад.
Принципиальная анимация выглядит следующим образом, вы можете увидеть некоторые подготовительные действия перед прокруткой:
Взгляните на некоторые практические сценарии изменения, следующая анимация:
CodePen Demo -- Never-ending box By Pawel
Маленький шарик катится вверх, но если вы присмотритесь, то каждый раз, когда вы катитесь, он сначала отскакивает назад, что можно понимать как атакующее действие, которое мы называем подготовительным действием.
Точно так же взгляните на эту анимацию тележки для покупок, в которой используется множество маленьких трюков, один из которых заключается в том, что тележка немного отступает назад, чтобы выполнить зарядное действие, прежде чем рвануть вперед.Вся анимация явно отличается. анимация выглядит более естественно:
Постановка -- показать макет
Постановка означает макет шоу, и его цель — привлечь внимание аудитории и прояснить, что в сцене самое важное.
Это можно сделать разными способами, например, поместив персонажей в кадр, используя свет и тень или угол и положение камеры. Суть этого принципа в том, чтобы сосредоточиться на основном содержании и избежать других ненужных деталей, привлекающих внимание пользователя.
Принцип анимации следующий:
Эффект от приведенной выше схемы Gif не очень очевиден, давайте посмотрим на пример эффекта:
CodePen Demo -- CSS Loading Animation
Суть этой техники заключается в выделении предмета в процессе анимации, а также в ослаблении эффекта несюжетных элементов за счет размытия, затухания и т.п., чтобы снизить внимание пользователя к нему.
Прямолинейное действие и поза к позе — непрерывное соответствие движения и позы
Фактически имеется в виду покадровая анимация и твин-анимация:
-
КадрАнимация: Объедините несколько изображений для воспроизведения, вы можете использовать шаги CSS-анимации, изображение состоит из одного кадра за другим, как в комиксе.
-
Tweenanimation: Дополняющая анимация представляет собой отрисовку ключевого кадра на временном интервале. В отличие от каждого кадра покадровой анимации, это ключевой кадр, а дополняющая анимация может рисовать базовую форму на критическом кадре, а затем на временном кадре. Ключевые кадры преобразуются или рисуются в другую форму, а затем компьютер автоматически генерирует промежуточный процесс анимации.
Это должно быть самое основное, и оно имеет разные магические эффекты в разных сценариях. В процессе реализации анимации с помощью CSS следует больше использовать твининг-анимацию, а также очень интересна покадровая анимация, например, сложную анимацию, разработанную дизайнером, можно сшить в покадровую анимацию с помощью несколько картинок.Это тоже очень хорошо.
Покадровая анимация и твининг-анимация подходят для разных случаев, никто не лучше, только кому больше подходит, сравните следующие две анимации часов, одна из которых использует покадровую анимацию для секундной стрелки, а вторая другое — это анимированная анимация:
- Секундная стрелка часов использует покадровую анимацию:
CodePen Demo -- CSS3 Working Clock By Ilia
- Секундная стрелка часов использует твин-анимацию:
CodePen Demo -- CSS Rotary Clock By Jake Albaugh
Иногда некоторые сложные анимации невозможно реализовать непосредственно с помощью CSS, и покадровый эффект также используется для аппроксимации анимации движения. Например, анимация гарнитуры Apple — это настоящая покадровая анимация, но она выглядит непрерывной:
CodePen Demo -- Apple AirPods Pro Animation (final demo) By Blake Bowen
Это на самом деле быстрое карусель нескольких изображений, каждая картинка, представляющая ключевой кадр.
Выполнение сквозных и перекрывающихся действий
Следующие и перекрывающиеся действия — это общий термин для двух тесно связанных методов, которые помогают более реалистично отображать движение и создают впечатление, что элементы движения подчиняются законам физики, включая принципы инерции.
- следитьозначает, что слабо связанные части тела должны продолжать двигаться после того, как персонаж остановится, и эти части должны продолжать двигаться за пределы точки, в которой персонаж остановился, прежде чем их вернут обратно в центр тяжести или продемонстрируют различную степень демпфирования колебаний;
- перекрывающееся действиесклонность частей элемента двигаться с разной скоростью (руки в голове будут двигаться в разное время и т. д.);
- Третий родственный методтянуть, элемент начинает двигаться, и некоторым требуется несколько кадров, чтобы догнать его.
Чтобы создать ощущение перекрывающихся действий, мы можем заставить элемент двигаться с немного разными скоростями. Это метод, который хорошо используется в переходах между окнами iOS. Когда некоторые кнопки и элементы перемещаются с разной скоростью, общий эффект будет более реалистичным, чем все, что движется с одинаковой скоростью, и дает посетителю время, чтобы правильно понять изменения.
Принципиальная схема:
Взгляните на анимацию корзины ниже, и внимательно посмотрите на тележку.В процессе движения к остановке явно чувствуется торможение и откат назад.Здесь для анимации используется эффект следования ярче и реальнее:
Медленно входить и медленно выходить — легкость входить и выходить
Движение объектов в реальном мире, таких как люди, животные, транспортные средства и т. д., требует времени для ускорения и замедления.
Для реальных эффектов движения его функция плавности не должна быть линейной. По этой причине движение часто постепенно ускоряется и замедляется перед остановкой, достигая эффекта замедления и замедления для приближения к более реалистичному движению.
Схема:
Это еще очень понятно. В реальном мире немногие функции плавности представляют собой линейные движения.
Дуга -- движение по дуге
Большинство естественных движений имеют тенденцию следовать дугообразной траектории, анимация должна следовать этому принципу, следуя неявномудугадля большей реалистичности.
Принципиальная схема:
Что ж, во многих анимациях использование дуг вместо прямых линий может сделать анимацию более реалистичной. Посмотрите на эту анимацию частиц фейерверка ниже:
CodePen Demo -- Particles, humankind's only weakness By Rik Schennink
Вся анимация частиц фейерверка выглядит очень естественно, ведь падение каждой частицы происходит по закону свободного падения, а траектории их движения представляют собой дуги, а не прямые линии.
Вторичное действие -- вторичное действие
Добавление второстепенных действий к основному действию может сделать сцену более живой и поддержать основное действие. Идущие люди могут одновременно размахивать или класть руки в карманы, говорить или свистеть, выражать эмоции через мимику.
Принципиальная схема:
Для простого примера приложения взгляните на следующую анимацию:
CodePen Demo -- Submarine Animation (Pure CSS) By Akhil Sai Ram
Вот картинка плывущей вперед подводной лодки, а в самой анимации еще много мест для оптимизации. Но есть некоторые вещи, которые стоит изучить и подтвердить, анимация использует вращение хвостовой подушечки и движение пузырей и подводных пейзажей.
В то же время стоит отметить, что отражение окна также является мелкой деталью, указывающей на то, что корпус движется, это второстепенное действие, оттеняющее движение основного корпуса.
Взгляните на анимацию печати ниже. Нажатие клавиш вверх и вниз на клавиатуре имитирует эффект щелчка. На самом деле, это также второстепенное действие для выделения основного эффекта анимации:
CodePen Demo -- CSS Typewriter By Aaron Iker
Тайминг – временной ритм
Время относится к количеству отрисовок или кадров данного действия, что означает скорость анимированного действия.
На чисто физическом уровне правильный выбор времени заставляет объекты подчиняться законам физики. Например, вес объекта определяет, как он реагирует на толкающую силу, поскольку более легкий объект будет реагировать быстрее, чем более тяжелый.
Одна и та же анимация отображается с разной скоростью, и ее эффекты часто сильно различаются. Для веб-анимации может потребоваться только настройкаanimation-durationилиtransition-durationценность .
Принципиальная схема:
Можно видеть, что одна и та же анимация, разные функции плавности или заданное разное время могут производить очень разные эффекты.
Конечно, временной ритм можно использовать во многих местах, например, в некоторых анимациях загрузки:
CodePen Demo -- Only Css 3D Cube By Hisami Kurita
Или вот так, та же анимация, разные рейты:
CodePen Demo -- Rotating Circles Preloader
Также это может быть та же задержка, та же скорость, но в другом направлении:
CodePen Demo -- 2020 SVG Animation By @keyframers
ПРЕВЫШЕНИЕ - преувеличение
Преувеличение — это эффект, особенно полезный для анимации, поскольку анимированные движения, стремящиеся идеально имитировать реальность, могут казаться статичными и скучными.
Некоторая степень сдержанности важна при использовании гиперболы. Если сцена содержит несколько элементов, отношения между этими элементами должны быть сбалансированы, чтобы не сбивать с толку и не пугать зрителей.
Принципиальная схема:
Хорошо, разные уровни отображения имеют разные смыслы эффекта, сравните следующие две анимации глюка:
Небольшой сбой встряхивания:
Серьезный сбой сотрясения:
CodePen Demo -- Glitch Animation
Видно, что вторая анимация явно может чувствовать более серьезный сбой, чем первая.
Слишком много реализма может испортить анимацию или сделать ее непривлекательной, статичной и скучной. Вместо этого добавление некоторого преувеличения к объектам-элементам делает их более динамичными и привлекательными.
Сплошной рисунок -- сплошной рисунок
Этот принцип означает, что наша анимация должна уважать подлинность, например, трехмерный стереоскопический рисунок, который должен учитывать форму элементов в трехмерном пространстве.
Изучите основы освоения 3D-форм, анатомии, веса, баланса, света и тени и многого другого. Помогает нам рисовать более реалистичные анимационные эффекты.
Принципиальная схема:
Взгляните еще раз на анимацию ниже, которая называется «Закрыть жалюзи» — закрытие жалюзи:
CodePen Demo -- Close the blinds By Chance Squires
При наведении была анимация с использованием нескольких DIV для имитации падения жалюзи и взаимодействия с цветом фона от яркого к темному процессу, очень хорошее использование цветной вспомогательной анимации со светлым оттенком.
Взгляните на эту анимацию маятника, в которой также очень хорошо используются элементы света, тени и перспективы:
CodePen Demo -- The Three-Body Problem By Vian Esterhuizen
Последняя Демо, хоть и реализована с помощью CSS, также максимально восстанавливает и имитирует летящую форму бумаги в реальности, а также вносит определенные изменения в изменение тени под бумагой:
CodePen Demo -- D CSS-only flying page animation tutorial By @keyframers
Хорошая анимация, детали выдерживают пристальное внимание.
Привлекательность - привлекательный
В отличие от обычного, мелкие детали часто очень хорошо привлекают внимание пользователя.
Привлекательность — это качество произведения искусства, и для ее достижения требуются постоянные эксперименты.
Принципиальная схема:
Я думаю, что это может быть ядром веб-анимации, привлекательной анимацией, у нее должны быть какие-то качества, давайте оценим ее вместе.
CodePen Demo -- Download interaction By Milan Raring
Через серию действий анимация расширяется, стрелочка двигается, полоса прогресса заполняется, меняется цифра, очень красиво отображается анимация загрузки, и процесс ожидания не утомляет.
Давайте посмотрим на эффект воспроизведения этого видео:
CodePen Demo -- Video button animation - Only CSS
Увеличьте масштаб через наведение маски, а затем нажмите на полноэкранное изменение, что сразу же привлечет внимание пользователя.
Некоторые распространенные заблуждения о веб-анимации
Конечно, некоторые из вышеперечисленных методов, полученных изПринципы анимации Диснея, мы можем включить некоторые из этих идей в дизайн нашей веб-анимации.
Однако следует отметить, что существуют некоторые принципы, на которые следует обратить внимание при использовании самой веб-анимации. Основные моменты заключаются в следующем:
- Повышение ассоциативности между анимацией и элементами страницы
- Не анимируйте ради анимации, имейте цель
- Не анимируйте слишком медленно, иначе это будет мешать взаимодействию.
Повышение ассоциативности между анимацией и элементами страницы
Это распространенная проблема, и часто можно увидеть, что некоторые анимации не имеют отношения к теме. Логика ассоциативности помогает пользователям понять, что только что произошло в макете интерфейса и что вызвало изменение.
Хорошая анимация может эффективно соединить несколько ссылок или сцен страницы последовательно.
При сравнении следующих двух анимаций вторая более актуальна, чем первая:
Не сильно коррелирует:
Актуальны:
Очевидно, что вторая анимация дает пользователю лучшее представление о том, что изменилось на странице, чем первая.
Не анимируйте ради анимации, имейте цель
Это также очень важно. Не анимируйте ради анимации, но имейте цель. Часто анимация многих страниц очень необъяснима.
Эмм, проще говоря, это анимация, которая существует исключительно ради показухи. Такая анимация может присутствовать в вашей демо-версии, на вашем личном веб-сайте, но она не подходит для бизнес-страниц в Интернете.
Использование анимации должно иметь четкую цель. Например, анимация загрузки может дать пользователю ощущение, что страница меняется и контент загружается.
В нашем процессе взаимодействия соответствующее добавление переходов и анимации может помочь пользователям очень хорошо почувствовать изменения на странице. Похоже на некоторые анимации прокрутки. Шелковистая прокрутка явно лучше, чем навязчивый контент.
Не анимируйте слишком медленно, иначе это будет мешать взаимодействию.
Медленная анимация, она создает ненужные паузы.
Некоторые пользователи будут часто видеть анимацию перехода, поэтому сделайте ее как можно короче. Держите продолжительность анимации на уровне 300 мс или меньше.
Сравнивая следующие две анимации, первый раз может быть освежающим для пользователя, но если пользователь часто выполняет операцию в процессе просмотра, слишком длинная анимация перехода отнимет у пользователя много ненужного времени:
Слишком длинная анимация перехода:
Сократите время анимации перехода, чтобы сохранить соответствующую продолжительность:
Креативная интерактивная анимация, объединяющая продукт и бизнес
Это довольно интересно. Лично я считаю, что веб-анимация сделана хорошо и может очень хорошо улучшить пользовательский опыт и ценность бренда.
Креативная анимация, объединяющая продукты и бизнес, должна постоянно разрабатываться, шлифоваться и повторяться. Например, на официальном сайте БилиБили, о котором все говорят, его верхний баннер, приуроченный к каким-то фестивалям и мероприятиям, часто имеет интересные креативные интерактивные анимации. Вы только посмотрите на два:
и это:
Я видел, как кто-то в разных местах обсуждал анимацию верхней части баннера Билибили, и видно, что анимация у нее удалась. Очень удачное сочетание каких-то фестивалей, практических вещей и хот-спотов, как относительно фиксированный продукт, постоянно привносящий новые, разные времена, разные впечатления.
Учитывайте экономическую эффективность анимации
И последнее: хотя анимация и хороша, отшлифовка высококачественной анимации занимает очень много времени, особенно сейчас, когда многие продуктовые компании находятся в стадии гибкой разработки.
Хорошая веб-анимация от замысла до реализации ни в коем случае не является работой только фронтенда, она требует общественных усилий продуктового, дизайнерского, фронтенд-персонала и другого связанного с этим персонала, а постоянные доработки могут, наконец, показать лучшие результаты. Поэтому в начале проекта вы должны учитывать экономическую эффективность, стоит ли тратить несколько дней на веб-анимацию? Конечно, это очень вопрос мнения.
Справочная статья
- Источник схемы --Understand Disney's 12 principles of animation
- Animation Principles for the Web
- Двенадцать принципов веб-анимации
- Twelve basic principles of animation
- Функциональная анимация: отличные эффекты перехода
наконец
С помощью веб-технологий рисовать яркие и интересные анимации непросто, особенно в нынешних бытовых условиях, мало кто будет изучать принципы анимации и применять их в практическом производстве. Но это действительно очень интересная и техническая вещь сама по себе. Я надеюсь, что эта статья может внести некоторое улучшение и помочь каждому познать веб-анимацию и более или менее использовать ее в последующей работе.
Ну вот и конец этой статьи, надеюсь она вам поможет :)
Если вы хотите получить самую интересную информацию о CSS, не пропустите мой официальный аккаунт --Интересные факты о внешнем интерфейсе iCSS😄
Другие замечательные технические статьи по CSS собраны в моемGithub -- iCSS, продолжайте обновлять, добро пожаловать, нажмите звездочку, чтобы подписаться на коллекцию.
Если у вас есть какие-либо вопросы или предложения, вы можете общаться больше.Оригинальные статьи ограничены в написании и знаниях.Если в статье есть какие-либо неточности, пожалуйста, дайте мне знать.