Красиве падіння: CSS3-анімація з гравітацією

Давним давно (влітку 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;
}


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

Повідомлення

Ефект стрибків може використовуватися на веб-сайтах як засіб звернення уваги на повідомлення або нове непрочитане повідомлення. На прикладі нижче відображено варіант непрочитаного повідомлення для онлайнового поштового клієнта.


м'ячик Стрибає

Ця реалізація показує типове поведінка об'єкта під дією сили тяжіння. Анімація стрибка, яка фактично є просто зрушенням з особливо розрахованими часовими параметрами, може також поєднуватися з іншими ефектами. В цьому прикладі видно обертання і легке зміна розміру м'ячика, щоб додати ілюзію еластичності. Тінь просто масштабується одночасно з кожним стрибком з допомогою тих же самих чарівних кубічних кривих Безьє.


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

Цей ефект може виглядати досить складним, але він використовує ті ж функції, що і всі перераховані вище приклади. Буква «I» деформується і лампа стрибає з використанням абсолютно однакових кубічних кривих Безьє. За допомогою цієї синхронної анімації лампа ніби сплющивает літеру «I».


Більш красивий варіант анімації можна подивитися на демо сторінці, вихідні коди на Github.

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.