Красивое падение: CSS3-анимация с гравитацией

в 19:20, , рубрики: css, css3, web-разработка, анимация, веб-дизайн, Веб-разработка, Программирование

Давным давно (летом 2014), когда я усиленно работал с оформлением, передо мной возникла следующая проблема. Я хотел использовать CSS3 для создания эффекта прыгающего мячика с учетом естественных законов физики. Я прошерстил Интернет в поисках какого-нибудь способа, чтобы «вдохнуть» гравитацию в мой мячик.

После нескольких часов просматривания Stackoverflow и доков CSS, я нашел несколько опций, но это все равно не до конца меня устроило. Использование Javascript и Jquery было бы лишним и неэффективным для такой простой задачи, которая, как кажется, должна легко решаться с использованием существующих опций для анимации в CSS3.

Я сначала попытался использовать переходы ease-in (ease-out), которые представлены CSS. Но несмотря на то, что они выглядели достаточно плавными, было слишком сложно добиться ощущения естественности. И каждый новый прыгающий объект нуждался бы в совершенно новой функции, подобрать которую очень трудоёмко. Многие сайты, которые я посещал, предлагали использовать громоздкие keyframe-функции для описания анимации каждого прыжка. Код этих функций выглядит слишком сложным и избыточным. Более того, полученные прыжки объекта выглядели отрывистыми и непрофессиональными.

Решение

В итоге я начал экспериментировать с кубическими кривыми Безье. Но все примеры, которые я находил, были немножко не тем, что надо. Тем не менее, это было ближе всего к тому, чего я хотел добиться. Я начал с нуля, часами пытаясь правильно сконфигурировать эту гибкую функцию, пока наконец что-то не вышло.
Чтобы легко осуществить задуманное, сперва нужно определить анимацию прыжка установкой общего изменения положения объекта с помощью keyframe функции:

@-webkit-keyframes bounce {
  from, to {
    bottom: [нижняя точка прыжка]px;
    height: [высота сплющенного объекта в нижней точке]px; /*смотри про сплющивание ниже в топике*/
  }
  80% {
    bottom: [верхняя точка прыжка]px;
    height: [полная высота объекта в верхней точке прыжка]px;
  }
}

Затем, нужно вычислить необходимую продолжительность:

Длительность прыжка  ≈ (  (  (Верхняя точка прыжка) - (Нижняя точка прыжка)  ) / 125 )

Добавление только одного CSS3 перехода достаточно для придания эффекта гравитации прыгающему объекту:

#Myball {
    -webkit-animation: bounce [длительность прыжка] cubic-bezier(0.30, 2.40, 0.85, 2.50) infinite;
}

Применение эффекта

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

Уведомление

Эффект прыжков может использоваться на веб-сайтах как средство обращения внимания на уведомление или новое непрочитанное сообщение. На примере ниже отображен вариант непрочитанного сообщения для онлайнового почтового клиента.
Красивое падение: CSS3-анимация с гравитацией - 1

Прыгающий мячик

Эта реализация показывает типичное поведение объекта под действием силы тяжести. Анимация прыжка, которая фактически является просто сдвигом с особо рассчитанными временными параметрами, может также сочетаться с другими эффектами. В этом примере видно вращение и легкое изменение размера мячика, чтобы добавить иллюзию эластичности. Тень просто масштабируется одновременно с каждым прыжком с помощью тех же самых волшебных кубических кривых Безье.
Красивое падение: CSS3-анимация с гравитацией - 2

Эффект сплющивания

Этот эффект может выглядеть достаточно сложным, но он использует те же функции, что и все вышеперечисленные примеры. Буква «I» деформируется и лампа прыгает с использованием абсолютно одинаковых кубических кривых Безье. С помощью этой синхронной анимации лампа как будто сплющивает букву «I».
Красивое падение: CSS3-анимация с гравитацией - 3

Более красивый вариант анимации можно посмотреть на демо страничке, а исходные коды на Github.

Автор: oe24

Источник


* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js