Давным давно (летом 2014), когда я усиленно работал с оформлением, передо мной возникла следующая проблема. Я хотел использовать CSS3 для создания эффекта прыгающего мячика с учетом естественных законов физики. Я прошерстил Интернет в поисках какого-нибудь способа, чтобы «вдохнуть» гравитацию в мой мячик.
После нескольких часов просматривания Stackoverflow и доков CSS, я нашел несколько опций, но это все равно не до конца меня устроило. Использование Javascript и Jquery было бы лишним и неэффективным для такой простой задачи, которая, как кажется, должна легко решаться с использованием существующих опций для анимации в CSS3.
Я сначала попытался использовать переходы ease-in (ease-out), которые представлены CSS. Но несмотря на то, что они выглядели достаточно плавными, было слишком сложно добиться ощущения естественности. И каждый новый прыгающий объект нуждался бы в совершенно новой функции, подобрать которую очень трудоёмко. Многие сайты, которые я посещал, предлагали использовать громоздкие keyframe-функции для описания анимации каждого прыжка. Код этих функций выглядит слишком сложным и избыточным. Более того, полученные прыжки объекта выглядели отрывистыми и непрофессиональными.
В итоге я начал экспериментировать с кубическими кривыми Безье. Но все примеры, которые я находил, были немножко не тем, что надо. Тем не менее, это было ближе всего к тому, чего я хотел добиться. Я начал с нуля, часами пытаясь правильно сконфигурировать эту гибкую функцию, пока наконец что-то не вышло.
Чтобы легко осуществить задуманное, сперва нужно определить анимацию прыжка установкой общего изменения положения объекта с помощью keyframe функции:
Затем, нужно вычислить необходимую продолжительность:
Добавление только одного CSS3 перехода достаточно для придания эффекта гравитации прыгающему объекту:
Здесь приведено несколько потенциальных идей, которые добавят гравитацию к элементам сайта за несколько минут.
Эффект прыжков может использоваться на веб-сайтах как средство обращения внимания на уведомление или новое непрочитанное сообщение. На примере ниже отображен вариант непрочитанного сообщения для онлайнового почтового клиента.
![](https://habrastorage.org/r/w1560/files/790/5fd/ed6/7905fded69f24008a9416fbf1cc3451d.png)
Эта реализация показывает типичное поведение объекта под действием силы тяжести. Анимация прыжка, которая фактически является просто сдвигом с особо рассчитанными временными параметрами, может также сочетаться с другими эффектами. В этом примере видно вращение и легкое изменение размера мячика, чтобы добавить иллюзию эластичности. Тень просто масштабируется одновременно с каждым прыжком с помощью тех же самых волшебных кубических кривых Безье.
![](https://habrastorage.org/r/w1560/files/eb9/adf/ed9/eb9adfed993742f49055e5fc6ca03d40.png)
Этот эффект может выглядеть достаточно сложным, но он использует те же функции, что и все вышеперечисленные примеры. Буква «I» деформируется и лампа прыгает с использованием абсолютно одинаковых кубических кривых Безье. С помощью этой синхронной анимации лампа как будто сплющивает букву «I».
![](https://habrastorage.org/r/w1560/files/c51/28c/187/c5128c1873324b00838f2d9f640aea60.png)
После нескольких часов просматривания 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;
}
Применение эффекта
Здесь приведено несколько потенциальных идей, которые добавят гравитацию к элементам сайта за несколько минут.
Уведомление
Эффект прыжков может использоваться на веб-сайтах как средство обращения внимания на уведомление или новое непрочитанное сообщение. На примере ниже отображен вариант непрочитанного сообщения для онлайнового почтового клиента.
![](https://habrastorage.org/files/790/5fd/ed6/7905fded69f24008a9416fbf1cc3451d.png)
Прыгающий мячик
Эта реализация показывает типичное поведение объекта под действием силы тяжести. Анимация прыжка, которая фактически является просто сдвигом с особо рассчитанными временными параметрами, может также сочетаться с другими эффектами. В этом примере видно вращение и легкое изменение размера мячика, чтобы добавить иллюзию эластичности. Тень просто масштабируется одновременно с каждым прыжком с помощью тех же самых волшебных кубических кривых Безье.
![](https://habrastorage.org/files/eb9/adf/ed9/eb9adfed993742f49055e5fc6ca03d40.png)
Эффект сплющивания
Этот эффект может выглядеть достаточно сложным, но он использует те же функции, что и все вышеперечисленные примеры. Буква «I» деформируется и лампа прыгает с использованием абсолютно одинаковых кубических кривых Безье. С помощью этой синхронной анимации лампа как будто сплющивает букву «I».
![](https://habrastorage.org/files/c51/28c/187/c5128c1873324b00838f2d9f640aea60.png)