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

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

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

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

Решение

В итоге я начал экспериментировать с кубическими кривыми Безье ^[4]. Но все примеры, которые я находил, были немножко не тем, что надо. Тем не менее, это было ближе всего к тому, чего я хотел добиться. Я начал с нуля, часами пытаясь правильно сконфигурировать эту гибкую функцию, пока наконец что-то не вышло.
Чтобы легко осуществить задуманное, сперва нужно определить анимацию прыжка установкой общего изменения положения объекта с помощью 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;
}

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

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

Уведомление

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

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

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

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

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

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

Автор: oe24

Источник ^[7]