ЦСС3 Анимација - Стварање фан-оута са ефектом одбијања помоћу Безиер кривуље

Да ли сте знали да геометријске трансформације додан у ХТМЛ елементе са ознаком трансформисатиСвојство ЦСС-а, као што су скала, укошење и ротирање могу бити анимиране? Они могу бити анимирани користећи прелаз имовине и @кеифрамес анимације, али оно што је још хладније је то што анимиране трансформације могу бити узете у први план са додатком мало боунце еффецт, помоћу кубни-безиер () тиминг фунцтион.

Укратко, кубни-безиер () (у ЦСС) је а функција времена за прелазе. Она специфицира брзину транзиције, и између осталог, може се користити и за то креирајте ефекат одбијања у анимацијама.

У овом посту, прво ћемо направите једноставну анимацију трансформације на које смо касније адд а кубни-безиер () тиминг фунцтион. На крају овог упутства, разумећете како да направите анимацију која користи и фан-оут и ефекат одбијања. Ево коначног резултата (кликните да бисте видели ефекат).

Демо је инспирисан овим прелепим Дрибббле снимком Цхристопхера Јонеса о анимираној ознаци локације.

1. Креирање лишћа

Облик маркера локације састоји се од пет (да их назовемо) лишћа. За креирање овалног облика од листа, хајде да употребимо бордер-радиус ЦСС својство. Тхе бордер-радиус једног кута је састављен од два радијуса, хоризонтално и вертикално, као што је приказано испод.

Тхе бордер-радиус својство има много различитих синтакса. Користићемо компликованије за облик маркера:

 бордер-радиус: хтл хтр хбр хбл / втл втр вбр вбл; 

У овој синтакси, хоризонтални и вертикални радијуси су груписани заједно; х & в представљају хоризонталне и вертикалне радијусе, и т, л, б & р представљају горњи, леви, доњи и десни угао. На пример, вбл означава вертикални радијус доњег левог угла.

Ако дате само једна вредност или за хоризонталну или за вертикалну страну, та вриједност ће се копирати на све друге хоризонталне или вертикалне радијусе прегледника.

До створите вертикални овални облик, задржите водоравни радијус на 50% за све углове и подесите вертикалне, док се не види жељени облик. Тхе хоризонтална страна користиће само једну вредност: 50%.

Тхе вертикални радијуси горњи леви и горњи десни углови ће бити 30%, док ће доњи леви и доњи десни углови користити 70% вредност.

ХТМЛ

ЦСС

.пинСтарЛеаф ширина: 60пк; хеигхт: 120пк; полупречник: 50% / 30% 30% 70% 70%; бацкгроунд-цолор: # Б8Ф0Ф5; 

2. Умножавање лишћа

Будући да ће се маркер означити са пет листова, ми креирамо још четири копије листа у различитим бојама и са апсолутним позиционирањем како би их међусобно слагали.

ХТМЛ

ЦСС

#пинСтарВраппер видтх: 300пк; хеигхт: 300пк; позиција: релативна;  .пинСтарЛеаф ширина: 60пк; хеигхт: 120пк; позиција: апсолутна; полупречник: 50% / 30% 30% 70% 70%; лево: 0; десно: 0; топ: 0; боттом: 0; маргин: ауто; непрозирност: .5;  .пинСтарЛеаф: нтх-оф-типе (1) бацкгроунд-цолор: # Б8Ф0Ф5;  .пинСтарЛеаф: нтх-оф-типе (2) бацкгроунд-цолор: # 9ЦФ3ДЦ;  .пинСтарЛеаф: нтх-оф-типе (3) бацкгроунд-цолор: # 94Ф3Б0;  .пинСтарЛеаф: нтх-оф-типе (4) бацкгроунд-цолор: # Д2Ф8А1;  .пинСтарЛеаф: нтх-оф-типе (5) бацкгроунд-цолор: # Ф3ЕДА2;  

3. Цаптуринг Цлицк Евент и Побољшање естетике

Омогућава додајте потврдни оквир са #пинСтарЦентерЦхкБок идентификатор за снимање догађаја клика. Када је поље за потврду означено, лишће ће се распршити (ротирати). Такође морамо додати а вхите цирцле са #пинСтарЦентер идентификатор за естетику. Она ће бити постављена на врх маркера и биће централни део маркера локације.

ХТМЛ

Стављамо поље за потврду пре, а бели круг иза, оставља:

ЦСС

Прво, постављамо основне стилове за поље за потврду и круг који покрива:

 #пинСтарЦентер, #пинСтарЦентерЦхкБок видтх: 45пк; хеигхт: 50пк; позиција: апсолутна; лево: 0; десно: 0; врх: -60пк; боттом: 0; маргин: ауто; бацкгроунд-цолор: #ффф; радијус границе: 50%; курсор: показивач;  #пинСтарЦентер, .пинСтарЛеаф поинтер-евентс: ноне;  #пинСтарЦентер> инпут [типе = "цхецкбок"] видтх: 100%; висина: 100%; курсор: показивач;  

Како ће се сваки лист ротирати дуж з-оси под различитим угловима, морамо поставити трансформ: ротатез (); према томе, на направите облик звезде. Такође примењујемо прелаз својство за ефекат ротације (прецизније ми користимо транзиција: трансформација 1с линеарна правило за лишће).

 #пинСтарЦентерЦхкБок: цхецк ~ .пинСтарЛеаф транситион: трансформ 1с линеар;  #пинСтарЦентерЦхкБок: цхецк ~ .пинСтарЛеаф: нтх-оф-типе (5) трансформ: ротатез (35дег);  #пинСтарЦентерЦхкБок: цхецк ~ .пинСтарЛеаф: нтх-оф-типе (4) трансформ: ротатез (105дег);  #пинСтарЦентерЦхкБок: цхецк ~ .пинСтарЛеаф: нтх-оф-типе (3) трансформ: ротатез (180дег);  #пинСтарЦентерЦхкБок: цхецк ~ .пинСтарЛеаф: нтх-оф-типе (2) трансформ: ротатез (255дег);  #пинСтарЦентерЦхкБок: цхецк ~ .пинСтарЛеаф: нтх-оф-типе (1) трансформ: ротатез (325дег);  

Ако погледате ЦСС изнад, можете видети из присуства #пинСтарЦентерЦхкБок: цхецк ~ генерал сиблинг селектор који само додајемо прелаз и трансформисати својства када је потврђен избор у пољу за потврду (када је корисник кликнуо на маркер).

4. Измјена центра ротације

По дефаулту, центар ротације је позициониран у средини ротираног елемента, у нашем случају, у средини лишћа. Морамо да померимо центар трансформације на унутрашњи крај листова. То можемо учинити помоћу трансформ-оригин ЦСС својство које мења положај трансформисаних елемената.

Да би ефекат ротације исправно функционисао, додајмо следећа правила .пинСтарЛеаф селектор у ЦСС датотеци:

 .пинСтарЛеаф трансформ-оригин: 30пк 30пк; транзиција: трансформација 1с линеарна;  

Хајде да видимо нашу анимацију у акцији - у овом тренутку, без ефекта одбијања. Кликните на бијели круг, на врху маркера.

Разумевање како убиц-Безиер () ради

Сада, да додамо ефекат одбијања, морамо да заменимо линеарно функција временског усклађивања са кубни-безиер () у прелаз декларације у нашој ЦСС датотеци.

Али прво, хајде да разумемо логика иза кубни-безиер () тиминг фунцтион тако да лако можете смислити ефекат одбијања.

Синтакса за кубни-безиер () функција је следећа, д и т су дистанце и време, и њихове вредности обично се крећу између 0 и 1:

кубни-безиер (т1, д1, т2, д2)

Иако објашњава ЦСС кубни-безиер () у смислу удаљености и времена није тачно, много је лакше схватити на овај начин.

Претпоставимо да постоји кутија која се креће од тачке А до Б за 6 секунди. Хајде да употребимо следеће кубни-безиер () функција времена за прелазак са т1 = 0 и д1 = 1 вредности.

 / * т1 = 0, д1 = 1, т2 = 0, д2 = 0 * / кубни-безиер (0,1,0,0) 

У скоро ниједном тренутку, кутија се креће од тачке А до средине и траје до краја времена.

Хајде да пробамо исту транзицију са вредностима т1 = 1 и д1 = 0.

 / * т1 = 1, д1 = 0, т2 = 0, д2 = 0 * / кубни-безиер (1,0,0,0) 

Прве три секунде, кутија се не помера много, а касније скоро скочи на средњу тачку, и креће равномерно према Б.

Као што видите, д1 контролише удаљеност између А & средња тачка, и т1 тхе време потребно за достизање средине тачке од А.

Хајде да употребимо д2 и т2 Сада. И једно и друго т1 и д1 ће бити 1, и т2 = 1 и д2 = 0.

 / * т1 = 1, д1 = 1, т2 = 0, д2 = 1 * / кубни-безиер (1,1,0,1) 

Кутија се креће скоро на пола пута за 3 секунде (због т1 = 1, д1 = 1), и за кратко време прескаче на тачку Б.

Последњи пример мења претходне вредности т2 и д2:

 / * т1 = 1, д1 = 1, т2 = 1, д2 = 0 * / кубни-безиер (1,1,1,0) 

Кутија се креће скоро на пола пута за 3 секунде (због т1 = 1, д1 = 1), онда се још 3 секунде не помера много пре скока у тачку Б.

Ови примери то показују д2 и т2 контролишите раздаљину и време на које је потребно поље идите од средине до тачке Б.

Мада вам вероватно није требало ово дуго (али ретко) објашњење кубни-безиер () у овом тренутку, мислим да ће вам помоћи да боље разумете ову функцију. Сада, одакле долази све ово?

5. Додавање ефекта одбијања са Цубиц-Безиер ()

Тхе кључни параметри за ефекат одбијања су удаљености, д1 и д2. А д1 Вредност мање од 1 узима кутију иза тачке А прије наставка према Б на почетку анимације.

А д2 Вредност више од 1 узима кутију иза тачке Б пре него што се вратим на одмор на Б на крају анимације. Отуда и повратни и повратни ефекат одбијања.

Сада ћу додати кубни-безиер () вредности директно на наш демо уместо претходног линеарно вредност прелаз имовине, и дозволите да видите резултате.

 #пинСтарЦентерЦхкБок: цхецк ~ .пинСтарЛеаф транситион: трансформ 1с цубиц-безиер (.8, - .5, .2,1.4);  

Ово је коначан резултат, ЦСС-само анимација за фанове са ефектом одбијања:

За поређење и боље разумевање ефекта одбијања, ево како кубни-безиер () вредност анимације се понаша када се примени на наш пример оквир: