CSS3 Анимация - Създаване на фен-аут с ефект на отскачане, използвайки кривата на Безие

Знаете ли, че геометрични трансформации добавени към HTML елементи с трансформиранеСвойството CSS, като мащаб, изкривяване и завъртане, може да бъде анимирано? Те могат да бъдат анимирани с помощта на преход собственост и @keyframes анимации, но това, което е дори по-хладно, е, че анимираните трансформации могат да бъдат превърнати в една степен с добавянето на малко ефект на отскачане, използвайки кубичен-Bezier () функция за синхронизация.

Накратко, кубичен-Bezier () (в CSS) е a функция за синхронизация за преходи. Той определя скоростта на прехода и между другото може да бъде използвана и за това създайте ефект на подскачане в анимациите.

В този пост първо ще го направим създайте проста анимация за преобразуване на което ние по-късно добави кубичен-Bezier () функция за синхронизация. В края на този урок ще разберете как да създадете анимация, която използва както на фен-аут, така и на отскачащ ефект. Това е крайният резултат (кликнете, за да видите ефекта).

Демото е вдъхновено от този красив Dribbble заснет от Кристофър Джоунс за анимиран маркер за местоположение.

1. Създаване на листата

Формата на маркера за местоположение се състои от пет (да ги наречем) листа. За да създадете овална форма на листа, нека използваме граничен радиус CSS собственост. Най- граничен радиус на един ъгъл съставен от два радиуса, хоризонтални и вертикални, както е показано по-долу.

Най- граничен радиус свойството има много различни синтаксиси. Ще използваме по-сложен за формата на маркера:

 граничен радиус: htl htr hbr hbl / vtl vtr vbr vbl; 

В този синтаксис хоризонталните и вертикалните радиуси са групирани заедно; з & V представляват хоризонтални и вертикални радиуси, и T, л, б & R представят горния, левия, долния и десния ъгъл. Например, VBL означава вертикалния радиус на долния ляв ъгъл.

Ако дадете само една стойност за хоризонтална или вертикална страна, тази стойност ще бъде копирана на всички други хоризонтални или вертикални радиуси от браузъра.

Да се създават вертикална овална форма, дръжте хоризонталните радиуси на 50% за всички ъгли и регулирайте вертикалните, докато се види желаната форма. Най- хоризонтална страна ще използва само една стойност: 50%.

Най- вертикални радиуси на горния ляв и горен десен ъгъл 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; марж: автоматично; непрозрачност: .5;  .pinStarLeaf: nth-of-type (1) background-color: # B8F0F5;  .pinStarLeaf: nth-of-type (2) фонов цвят: # 9CF3DC;  .pinStarLeaf: nth-of-type (3) фон-цвят: # 94F3B0;  .pinStarLeaf: nth-of-type (4) фон-цвят: # D2F8A1;  .pinStarLeaf: nth-of-type (5) фон-цвят: # F3EDA2;  

3. Заснемане на събитие и подобряване на естетиката

Нека да добавете отметка с #pinStarCenterChkBox идентификатор за улавяне на събитие за кликване. Когато отметката е поставена, листата ще се разведат (завъртат). Ние също трябва да добавим a бял кръг с #pinStarCenter идентификатор за естетика. Тя ще бъде позиционирана отгоре на маркера и ще бъде централната част на маркера за местоположение.

HTML

Поставяме отметката преди, а белият кръг след това оставя:

CSS

Първо, ние поставяме основните стилове за квадратчето за отметка и за покриващия кръг:

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

Тъй като всеки лист ще се върти по оста z под различни ъгли, трябва да настроим transform: rotatez (); съответно собственост на създайте форма на звезда. Ние също прилагаме преход Имот за ротационен ефект (по-точно използваме Преход: трансформира 1s линейно правило за листата).

 #pinStarCenterChkBox: проверено ~ .StarLeaf преход: преобразуване 1s линейно;  #pinStarCenterChkBox: проверено ~ .StartLeaf: nth-of-type (5) transform: rotatez (35deg);  #pinStarCenterChkBox: проверено ~ .StarLeaf: nth-of-type (4) transform: rotatez (105deg);  #pinStarCenterChkBox: проверено ~ .StartLeaf: nth-of-type (3) transform: rotatez (180deg);  #pinStarCenterChkBox: Проверено ~ .StarLeaf: nth-of-type (2) transform: rotatez (255deg);  #pinStarCenterChkBox: проверено ~ .StarLeaf: nth-of-type (1) transform: rotatez (325deg);  

Ако погледнете CSS по-горе, можете да видите от присъствието на #pinStarCenterChkBox: отметнато ~ общ селекционер, който добавяме само преход и трансформиране Имоти когато е поставена отметка (когато потребителят е натиснал маркера).

4. Промяна на центъра на ротацията

По подразбиране центърът на въртенето е позициониран в центъра на въртящия се елемент, в нашия случай, в центъра на листата. Трябва да преместим центъра на трансформацията към вътрешния край на листата. Можем да направим това с помощта на трансформиране на произход CSS това свойство променя позицията на трансформираните елементи.

За да направим ефекта на въртене правилно, нека добавим следните две правила към .pinStarLeaf селектор в нашия CSS файл:

 .pinStarLeaf transform-origin: 30px 30px; преход: преобразуване 1s линейно;  

Нека да видим нашата фен анимация в действие - в този момент, без още отскачащ ефект. Кликнете върху белия кръг, отгоре на маркера.

Разбиране за това как работи ubic-Bezier ()

Сега, за да добавим ефекта на отпадане, трябва да заменим линеен функция за синхронизация с кубичен-Bezier () в преход декларации в нашия CSS файл.

Но първо, нека разберем логиката зад кубичен-Bezier () функция за синхронизация така че лесно можете да усетите ефекта на отскачане.

Синтаксисът за кубичен-Bezier () функцията е следната, д и T сте разстояние и път, и техните стойности обикновено варират между 0 и 1:

кубично-безие (t1, d1, t2, d2)

Въпреки че обяснява CSS кубичен-Bezier () по отношение на разстоянието и времето не е точно, много по-лесно е да го разберете по този начин.

Да предположим, че има кутия, която се движи от точка А до точка Б след 6 секунди. Нека използваме следното кубичен-Bezier () функция за синхронизация при прехода с t1 = 0 и d1 = 1 стойности.

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

В почти никакъв момент, кутията се премества от точка А до средна точка, а останалата част от времето достига до Б.

Да опитаме същия преход със стойности 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 секунди не се движи много преди да скочи до точка Б.

Тези примери показват това d2 и t2 Контролирайте разстоянието и времето, през което е полето преминете от средата до точка Б.

Макар че вероятно нямате нужда от това дълго (но рядко) обяснение кубичен-Bezier () на този етап мисля, че ще ви помогне да разберете по-добре тази функция. Сега, къде е всичко това?

5. Добавяне на ефект на отскачане с Cubic-Bezier ()

Най- ключови параметри за ефекта на отскок са разстоянията, d1 и d2. А d1 стойност на по-малко от 1 взима кутията зад точка А преди да пристъпите към Б в началото на анимацията.

А d2 стойност на повече от 1 взима кутията отвъд точка Б преди да се върнете да си починете в B в края на анимацията. Оттук и назад и напред отскачам ефект.

Сега ще добавя кубичен-Bezier () ценности директно на нашето демо на мястото на първото линеен стойност на преход и ви позволяват да видите резултатите.

 #pinStarCenterChkBox: Проверено е.  

Това е крайният резултат - анимация само за разхлаждане на CSS с ефект на отскачане:

За сравнение и да разберем по-добре отскачащия ефект, ето как кубичен-Bezier () стойността на анимацията се държи, когато е приложена към нашата кутия с примери: