CSS3-animatie - Een uitwaaiering creëren met bounce-effect met Bezier-curve

Wist je dat geometrische transformaties toegevoegd aan HTML-elementen met de transformerenCSS-eigenschappen zoals schaal, skew en roteren kunnen worden geanimeerd? Ze kunnen worden geanimeerd met behulp van de overgang eigendom en @keyframes animaties, maar wat nog cooler is, is dat geanimeerde transformaties met een beetje extra kunnen worden opgenomen stuiterend effect, de ... gebruiken kubieke Bezier () timing functie.

In een notendop, kubieke Bezier () (in CSS) is een timingfunctie voor overgangen. Het specificeert de snelheid van de overgang, en het kan onder andere ook worden gebruikt voor creëer een stuiterend effect in animaties.

In deze post gaan we eerst maak een eenvoudige transformatie-animatie waarnaar we later Voeg een ... toe kubieke Bezier () timing functie. Aan het einde van deze tutorial zul je begrijpen hoe je een animatie maakt die gebruikt zowel een fan-out als een bounce-effect. Hier is het eindresultaat (klik om het effect te zien).

De demo is geïnspireerd op deze prachtige Dribbble-opname van Christopher Jones over een geanimeerde locatiemarkering.

1. De bladeren maken

De vorm van de locatiemarkering bestaat uit vijf (laten we ze noemen) bladeren. Om de te maken ovale vorm van een blad, laten we de border-radius CSS-eigenschap. De border-radius van een enkele hoek is samengesteld uit twee radii, horizontaal en verticaal, zoals hieronder getoond.

De border-radius property heeft veel verschillende syntaxes. We zullen een gecompliceerder exemplaar gebruiken voor de vorm van de marker:

 grensradius: htl htr hbr hbl / vtl vtr vbr vbl; 

In deze syntaxis zijn horizontale en verticale radii gegroepeerd; h & v vertegenwoordigen horizontale en verticale radii, en t, l, b & r vertegenwoordigen de bovenste, linker, onderste en rechter hoeken. Bijvoorbeeld, VBL staat voor de verticale straal van de linkerbenedenhoek.

Als je geeft slechts één waarde voor zowel de horizontale als de verticale zijde, wordt die waarde gekopieerd naar alle andere horizontale of verticale radii door de browser.

Naar maak een verticale ovale vorm, houd de horizontale stralen op 50% voor alle hoeken, en pas de verticale aan, tot de gewenste vorm wordt gezien. De horizontale zijde zal slechts één waarde gebruiken: 50%.

De verticale radii van de linkerbovenhoek en de rechterbovenhoek zal zijn 30%, terwijl de hoeken linksonder en rechtsonder de 70% waarde.

HTML

CSS

.pinStarLeaf width: 60px; hoogte: 120 px; grensradius: 50% / 30% 30% 70% 70%; achtergrondkleur: # B8F0F5; 

2. De bladeren vermenigvuldigen

Omdat de marker uitwaaiert met vijf bladeren, creëren we nog eens vier exemplaren van het blad in verschillende kleuren, en met absolute positionering om ze op elkaar te stapelen.

HTML

CSS

#pinStarWrapper width: 300px; hoogte: 300 px; positie: relatief;  .pinStarLeaf width: 60px; hoogte: 120 px; positie: absoluut; grensradius: 50% / 30% 30% 70% 70%; links: 0; rechts: 0; boven: 0; onderkant: 0; marge: automatisch; dekking: .5;  .pinStarLeaf: nth-van-type (1) achtergrondkleur: # B8F0F5;  .pinStarLeaf: nth-van-type (2) achtergrondkleur: # 9CF3DC;  .pinStarLeaf: nth-type (3) achtergrondkleur: # 94F3B0;  .pinStarLeaf: nth-van-type (4) achtergrondkleur: # D2F8A1;  .pinStarLeaf: nth-of-type (5) achtergrondkleur: # F3EDA2;  

3. Capturing Click Event & Improving Aesthetics

Laten we voeg een selectievakje toe met de #pinStarCenterChkBox ID om de klikgebeurtenis vast te leggen. Wanneer het selectievakje is aangevinkt, zullen de bladeren uitwaaieren (draaien). We moeten ook een toevoegen witte cirkel met de #pinStarCenter ID voor esthetiek. Deze wordt bovenop de markering geplaatst en is het middenstuk van de locatiemarkering.

HTML

We plaatsen het selectievakje eerder, en de witte cirkel erna, de bladeren:

CSS

Eerst stellen we de basisstijlen voor het selectievakje en de dekkingscirkel in:

 #pinStarCenter, #pinStarCenterChkBox width: 45px; hoogte: 50px; positie: absoluut; links: 0; rechts: 0; top: -60px; onderkant: 0; marge: automatisch; achtergrondkleur: #fff; grensradius: 50%; cursor: pointer;  #pinStarCenter, .pinStarLeaf pointer-events: none;  #pinStarCenter> invoer [type = "checkbox"] width: 100%; hoogte: 100%; cursor: pointer;  

Omdat elk blad langs de z-as zal roteren in verschillende hoeken, we moeten de transformeren: rotatez (); eigendom dienovereenkomstig, aan maak een stervorm. We passen ook de overgang eigendom voor het rotatie-effect (meer bepaald gebruiken we de overgang: transformatie 1s lineair regel voor de bladeren).

 #pinStarCenterChkBox: checked ~ .pinStarLeaf transition: transform 1s linear;  #pinStarCenterChkBox: checked ~ .pinStarLeaf: nth-of-type (5) transform: rotatez (35deg);  #pinStarCenterChkBox: checked ~ .pinStarLeaf: nth-of-type (4) transform: rotatez (105deg);  #pinStarCenterChkBox: checked ~ .pinStarLeaf: nth-type (3) transform: rotatez (180deg);  #pinStarCenterChkBox: checked ~ .pinStarLeaf: nth-of-type (2) transform: rotatez (255deg);  #pinStarCenterChkBox: checked ~ .pinStarLeaf: nth-of-type (1) transform: rotatez (325deg);  

Als je de bovenstaande CSS bekijkt, kun je zien aan de hand van de #pinStarCenterChkBox: aangevinkt ~ algemene sibling-selector dat we alleen de overgang en transformeren eigenschappen wanneer het selectievakje is aangevinkt (toen de gebruiker op de markering klikte).

4. Wijziging van het midden van de rotatie

Standaard is het midden van de rotatie gepositioneerd in het midden van het geroteerde element, in ons geval, in het midden van de bladeren. We moeten het midden van de transformatie naar het binnenste uiteinde van de bladeren verplaatsen. We kunnen dit doen door de transformatie-oorsprong CSS-eigenschap die verandert de positie van getransformeerde elementen.

Om het rotatie-effect goed te laten werken, laten we de volgende twee regels toevoegen aan de .pinStarLeaf selector in ons CSS-bestand:

 .pinStarLeaf transform-origin: 30px 30px; overgang: transformatie 1s lineair;  

Laten we onze fan uit animatie in actie zien - op dit moment, zonder het bounce-effect tot nu toe. Klik op de witte cirkel bovenop de markering.

Begrijpen hoe Ubic-Bezier () werkt

Om het bounce-effect toe te voegen, moeten we nu het lineair timingfunctie met kubieke Bezier () in de overgang verklaringen in ons CSS-bestand.

Maar eerst, laten we het begrijpen logica achter de kubieke Bezier () timing functie zodat je gemakkelijk het bounce-effect kunt begrijpen.

De syntaxis voor de kubieke Bezier () functie is de volgende, d en t zijn afstand en tijd, en hun waarden liggen meestal tussen 0 en 1:

kubieke bezier (t1, d1, t2, d2)

Hoewel CSS wordt uitgelegd kubieke Bezier () in termen van afstand en tijd is niet juist, het is een stuk gemakkelijker om het op deze manier te begrijpen.

Neem aan dat er is een doos die van punt A naar B beweegt in 6 seconden. Laten we het volgende gebruiken kubieke Bezier () timingfunctie voor de overgang met de t1 = 0 en d1 = 1 waarden.

 / * t1 = 0, d1 = 1, t2 = 0, d2 = 0 * / cubic-bezier (0,1,0,0) 

In bijna geen tijd beweegt het kader van A naar het midden en neemt de rest van de tijd B.

Laten we dezelfde overgang proberen met waarden t1 = 1 en d1 = 0.

 / * t1 = 1, d1 = 0, t2 = 0, d2 = 0 * / cubic-bezier (1,0,0,0) 

Gedurende de eerste drie seconden beweegt de doos niet veel, en later springt hij bijna naar het midden en begint hij gestaag naar B te bewegen.

Zoals je kunt zien, d1 bestuurt de afstand tussen A & het midden, en t1 de tijd die nodig is om het middelpunt van A te bereiken.

Laten we gebruiken d2 en T2 nu. Beide t1 en d1 zal 1 zijn, en t2 = 1 en d2 = 0.

 / * t1 = 1, d1 = 1, t2 = 0, d2 = 1 * / cubic-bezier (1,1,0,1) 

De doos beweegt bijna halverwege in 3 seconden (vanwege t1 = 1, d1 = 1) en in een mum van tijd springt het naar punt B.

Het laatste voorbeeld wisselt de vorige waarden van T2 en d2:

 / * t1 = 1, d1 = 1, t2 = 1, d2 = 0 * / cubic-bezier (1,1,1,0) 

De doos beweegt bijna halverwege in 3 seconden (vanwege t1 = 1, d1 = 1), beweegt dan nog gedurende 3 seconden niet veel voordat naar punt B wordt gesprongen.

Deze voorbeelden laten dat zien d2 en T2 bepaal de afstand en tijd waarnaar het vakje moet gaan ga van middelpunt naar punt B.

Hoewel je waarschijnlijk deze lange (maar schaarse) uitleg van waarschijnlijk niet nodig had kubieke Bezier () op dit moment denk ik dat het je zal helpen deze functie beter te begrijpen. Nu, waar komt de stuitering in dit alles?

5. Het bounce-effect toevoegen met Cubic-Bezier ()

De belangrijkste parameters voor het bounce-effect zijn de afstanden, d1 en d2. EEN d1 waarde van minder dan 1 neemt de doos achter punt A voordat je naar B gaat aan het begin van de animatie.

EEN d2 waarde van meer dan 1 neemt de doos na punt B voordat je teruggaat om uit te rusten bij B aan het einde van de animatie. Vandaar het heen en weer stuiterende effect.

Ik zal nu het toevoegen kubieke Bezier () waarden rechtstreeks naar onze demo in plaats van de eerste lineair waarde van de overgang eigendom en laat u de resultaten zien.

 #pinStarCenterChkBox: checked ~ .pinStarLeaf transition: transform 1s cubic-bezier (.8, -. 5, .2,1.4);  

Dit is het eindresultaat, een alleen-uitgelichte animatie met CSS en een bounce-effect:

Ter vergelijking en om het bounce-effect beter te begrijpen, hier is hoe het kubieke Bezier () de waarde van de animatie gedraagt ​​zich wanneer deze wordt toegepast op ons voorbeeldvak: