Анімація CSS3 - створення фен-ауту з ефектом відскоку за допомогою кривої Безьє

Ви знали, що геометричні перетворення додано до елементів HTML з перетворенняВластивість CSS, така як масштаб, перекос і обертання, може бути анімованим? Вони можуть бути анімовані за допомогою перехід власності і @keyframes анімації, але те, що навіть холодніше, що анімовані перетворення можуть бути прийняті на вирізу з додаванням трохи ефект відмов, за допомогою кубічний-безьє () функція синхронізації.

Коротко, кубічний-безьє () (у CSS) є a функція синхронізації для переходів. Вона вказує швидкість переходу, і, серед іншого, її можна також використовувати створити ефект стрибка в анімаціях.

У цьому пості ми спочатку збираємося створити просту анімацію перетворення до яких ми пізніше додайте a кубічний-безьє () функція синхронізації. Наприкінці цього підручника ви зрозумієте, як створити анімацію, яка використовує як фан-аут, так і ефект відскоку. Ось кінцевий результат (натисніть, щоб побачити ефект).

Демо натхненний цим красивим Dribbble постріл Крістофер Джонс про анімований маркер місця.

1. Створення листя

Форма маркера розташування складається з п'яти (назвемо їх) листя. Для створення овальної форми аркуша, давайте скористаємося кордон-радіус Властивість CSS. The кордон-радіус єдиний кут складається з двох радіусів, горизонтальні та вертикальні, як показано нижче.

The кордон-радіус властивість має багато різних синтаксисів. Ми будемо використовувати більш складний для форми маркера:

 кордон-радіус: htl htr hbr hbl / vtl vtr vbr vbl; 

У цьому синтаксисі горизонтальні та вертикальні радіуси згруповані разом; h & v представляють горизонтальні і вертикальні радіуси, і t, l, b & r представляють верхній, лівий, нижній і правий кути. Наприклад, vbl виступає за вертикальний радіус нижнього лівого кута.

Якщо даєте тільки одне значення для горизонтальної або вертикальної сторони це значення буде скопійовано браузером до всіх інших горизонтальних або вертикальних радіусів.

До створюють вертикальну овальну форму, тримати горизонтальні радіуси на 50% для всіх кутів і регулюйте вертикаль, доки не побачите потрібну форму. The горизонтальна сторона використовуватиме лише одне значення: 50%.

The вертикальних радіусів верхній лівий і верхній праві кути будуть 30%, а нижній лівий і нижній праві кути використовуватимуть 70% значення.

HTML

CSS

.pinStarLeaf ширина: 60px; висота: 120px; кордон-радіус: 50% / 30% 30% 70% 70%; фоновий колір: # B8F0F5; 

2. Розмноження листя

Оскільки маркер розгортатиме показ п'яти листя, ми створюємо ще чотири копії листа в різних кольорах і з абсолютним позиціонуванням, щоб складати їх один на одного.

HTML

CSS

#pinStarWrapper ширина: 300px; висота: 300px; позиція: відносна;  .pinStarLeaf ширина: 60px; висота: 120px; позиція: абсолютна; кордон-радіус: 50% / 30% 30% 70% 70%; ліворуч: 0; праворуч: 0; зверху: 0; знизу: 0; margin: auto; непрозорість: .5;  .pinStarLeaf: nth-of-type (1) background-color: # B8F0F5;  .pinStarLeaf: nth-of-type (2) background-color: # 9CF3DC;  .pinStarLeaf: nth-of-type (3) background-color: # 94F3B0;  .pinStarLeaf: nth-of-type (4) background-color: # D2F8A1;  .pinStarLeaf: nth-of-type (5) background-color: # F3EDA2;  

3. Захоплення Натисніть Подія & Поліпшення естетики

Давайте додайте прапорець з #pinStarCenterChkBox ідентифікатор для захоплення події клацання. Коли прапорець позначено, листи розгортаються (повертаються). Також потрібно додати a білий коло з #pinStarCenter ідентифікатор естетики. Він буде розташований у верхній частині маркера, і він буде центральним фрагментом маркера розташування.

HTML

Ми розміщуємо прапорець перед, а біле коло після - залишаємо:

CSS

По-перше, ми встановлюємо основні стилі для прапорців і покриваючого кола:

 #pinStarCenter, #pinStarCenterChkBox ширина: 45px; висота: 50px; позиція: абсолютна; ліворуч: 0; праворуч: 0; зверху: -60px; знизу: 0; margin: auto; background-color: #fff; кордон-радіус: 50%; курсор: покажчик;  #pinStarCenter, .pinStarLeaf події вказівника: немає;  #pinStarCenter> input [type = "checkbox"] ширина: 100%; висота: 100%; курсор: покажчик;  

Оскільки кожен аркуш буде обертатися вздовж осі z під різними кутами, ми повинні встановити transform: rotatez (); власності відповідно, до створити форму зірки. Ми також застосовуємо перехід власності для ефекту обертання (точніше ми використовуємо перехід: трансформація 1s лінійна правило для листя).

 #pinStarCenterChkBox: перевірено ~ .pinStarLeaf перехід: лінійне перетворення 1s;  #pinStarCenterChkBox: перевірено ~ .pinStarLeaf: nth-of-type (5) transform: rotatez (35deg);  #pinStarCenterChkBox: перевірено ~ .pinStarLeaf: nth-of-type (4) transform: rotatez (105deg);  #pinStarCenterChkBox: перевірено ~ .pinStarLeaf: nth-of-type (3) transform: rotatez (180deg);  #pinStarCenterChkBox: перевірено ~ .pinStarLeaf: nth-of-type (2) transform: rotatez (255deg);  #pinStarCenterChkBox: перевірено ~ .pinStarLeaf: nth-of-type (1) transform: rotatez (325deg);  

Якщо ви подивитеся на CSS вище, ви можете бачити з присутності #pinStarCenterChkBox: позначено ~ загальний селектор братів, який ми тільки додаємо перехід і перетворення властивості , коли встановлено прапорець (коли користувач натиснув маркер).

4. Модифікація Центру ротації

За замовчуванням розташований центр обертання в центрі обертається елемента, в нашому випадку, в центрі листя. Потрібно перемістити центр перетворення на внутрішній кінець листя. Ми можемо зробити це за допомогою перетворення-походження Властивість CSS, що змінює положення перетворених елементів.

Для того, щоб ефект обертання працював належним чином, додамо два наступні правила до .pinStarLeaf селектора в нашому файлі CSS:

 .pinStarLeaf transform-origin: 30px 30px; перехід: трансформація 1s лінійна;  

Давайте розглянемо нашу анімацію в дії - на цьому етапі без ефекту відскоку. Натисніть на біле коло, на верхній частині маркера.

Розуміння того, як ubic-Безьє () працює

Тепер, щоб додати ефект відскоку, потрібно замінити лінійний функція синхронізації з кубічний-безьє () в перехід декларації в нашому файлі CSS.

Але спочатку давайте зрозуміємо за логікою кубічний-безьє () функція синхронізації щоб ви могли легко зрозуміти ефект відскоку.

Синтаксис для кубічний-безьє () функція наступна, d і t є відстань і час, і їх значення зазвичай знаходяться в діапазоні від 0 до 1:

кубічний-безьє (t1, d1, t2, d2)

Навіть пояснюючи CSS кубічний-безьє () з точки зору відстані та часу, це не так, це набагато легше зрозуміти таким чином.

Припустимо, що є вікно, яке рухається від точки А до В через 6 секунд. Давайте використаємо наступне кубічний-безьє () Функція синхронізації для переходу з t1 = 0 і d1 = 1 значення.

 / * t1 = 0, d1 = 1, t2 = 0, d2 = 0 * / кубічний-безьє (0,1,0,0) 

Практично не вистачає часу, коробка переходить від точки А до середньої точки, а решта часу досягає B.

Давайте спробуємо те ж саме перехід із значеннями t1 = 1 і d1 = 0.

 / * t1 = 1, d1 = 0, t2 = 0, d2 = 0 * / кубічний-безьє (1,0,0,0) 

Протягом перших трьох секунд коробка не рухається сильно, а пізніше майже стрибає до середньої точки, і починає неухильно рухатися до B.

Як ти бачиш, d1 контролює відстань між A & середньої точки, і t1 час, необхідний для досягнення середньої точки від A.

Давайте скористаємося d2 і t2 зараз. Обидва t1 і d1 буде 1, і t2 = 1 і d2 = 0.

 / * t1 = 1, d1 = 1, t2 = 0, d2 = 1 * / кубічний-безьє (1,1,0,1) 

Коробка рухається майже на півдорозі за 3 секунди (через t1 = 1, d1 = 1), і в найкоротші терміни він переходить до точки В.

Останній приклад змінює попередні значення t2 і d2:

 / * t1 = 1, d1 = 1, t2 = 1, d2 = 0 * / кубічний-безьє (1,1,1,0) 

Коробка рухається майже на півдорозі за 3 секунди (через t1 = 1, d1 = 1), потім ще 3 секунди не рухається значно перед переходом до точки B.

Ці приклади показують це d2 і t2 Контролюйте відстань і час, до якого він займає перейти від середини до точки B.

Хоча ви, мабуть, не потребували цього тривалого (але рідкісного) пояснення кубічний-безьє () на даний момент, я думаю, це допоможе вам краще зрозуміти цю функцію. Тепер, куди приходить відскок у всьому цьому?

5. Додавання ефекту відмов з кубічним-безьє ()

The ключові параметри для ефекту відскоку є відстані, d1 і d2. A d1 значення менше 1 приймає коробку за точкою А перед тим, як приступити до B на початку анімації.

A d2 значення більше 1 приймає коробку за точкою B перед тим, як повертатися, щоб відпочити у B в кінці анімації. Звідси і ефект відскоку вперед і назад.

Тепер я додам кубічний-безьє () Значення безпосередньо нашої демонстрації замість першої лінійний значення перехід власності, і ви побачите результати.

 #pinStarCenterChkBox: позначено ~ .pinStarLeaf перехід: перетворення 1s кубічний-безьє (.8, -. 5, .2,1.4);  

Ось кінцевий результат: анімація з розгортанням лише CSS з ефектом відскоку:

Для порівняння і краще зрозуміти ефект відмов, ось як кубічний-безьє () значення анімації поводиться, коли його застосовують до нашого прикладу: