CSS3 Animation - Opret en Fan-Out med Bounce Effect ved hjælp af Bezier Curve

Vidste du, at geometriske transformationer tilføjet til HTML-elementer med omdanneCSS-egenskab som skala, skew og rotere kan animeres? De kan animeres ved hjælp af overgang ejendom og @keyframes animationer, men hvad der endda er køligere er, at animerede transformationer kan tages op i hak med tilføjelsen af ​​lidt bounce effekt, bruger cubic-bezier () timing funktion.

I en nøddeskal, cubic-bezier () (i CSS) er en timing funktion for overgange. Det specificerer hastigheden af ​​overgangen, og det kan blandt andet også bruges til skabe hoppende virkning i animationer.

I dette indlæg skal vi først skabe en simpel transformations animation som vi senere Tilføj en cubic-bezier () timing funktion. I slutningen af ​​denne vejledning forstår du, hvordan du opretter en animation, der bruger både en fan-out og en bounce-effekt. Her er det endelige resultat (klik for at se effekten).

Demoen er inspireret af denne smukke Dribbble shot af Christopher Jones om en animeret placeringsmarkør.

1. Opret bladene

Formen på placeringsmarkøren består af fem (lad os kalde dem) blade. At oprette oval form af et blad, lad os bruge border-radius CSS ejendom. Det border-radius af et enkelt hjørne er bestående af to radii, vandret og lodret, som vist nedenfor.

Det border-radius Ejendommen har mange forskellige syntaxer. Vi vil bruge en mere kompliceret en for markørens form:

 grænse-radius: htl htr hbr hbl / vtl vtr vbr vbl; 

I denne syntaks grupperes horisontale og lodrette radier sammen; h & v repræsenterer vandrette og lodrette radier, og t, l, b & r repræsenterer øverste, venstre, nederste og højre hjørner. For eksempel, VBL står for den lodrette radius i nederste venstre hjørne.

Hvis du giver kun en værdi for enten den vandrette eller den lodrette side, vil denne værdi kopieres til alle de andre vandrette eller lodrette radier af browseren.

Til skabe en lodret oval form, hold den vandrette radii på 50% til alle hjørner, og juster de lodrette, indtil den ønskede form ses. Det vandret side vil kun bruge en værdi: 50%.

Det lodrette radier af de øverste venstre og øverste højre hjørner vil være 30%, mens nederste venstre og nederste højre hjørne vil bruge 70% værdi.

HTML

CSS

.pinStarLeaf bredde: 60px; højde: 120px; grænseradius: 50% / 30% 30% 70% 70%; baggrundsfarve: # B8F0F5; 

2. Multiplicere bladene

Da markøren viser fanen med fem blade, skaber vi fire eksemplarer af bladet i forskellige farver og med absolut positionering for at stable dem på hinanden.

HTML

CSS

#pinStarWrapper bredde: 300px; højde: 300px; stilling: relativ;  .pinStarLeaf bredde: 60px; højde: 120px; position: absolut; grænseradius: 50% / 30% 30% 70% 70%; venstre: 0; højre: 0; top: 0; bunden: 0; margen: auto; opacitet: .5;  .pinStarLeaf: nth-of-type (1) baggrundsfarve: # B8F0F5;  .pinStarLeaf: nth-of-type (2) baggrundsfarve: # 9CF3DC;  .pinStarLeaf: nth-of-type (3) baggrundsfarve: # 94F3B0;  .pinStarLeaf: nth-of-type (4) baggrundsfarve: # D2F8A1;  .pinStarLeaf: nth-of-type (5) baggrundsfarve: # F3EDA2;  

3. Capturing Click Event og forbedret æstetik

Lad os Tilføj et afkrydsningsfelt med #pinStarCenterChkBox identifikator til at fange klikhændelsen. Når afkrydsningsfeltet er markeret, vil bladene blæse ud (rotere). Vi skal også tilføje en hvid cirkel med #pinStarCenter identifikator for æstetik. Den vil blive placeret oven på markøren, og det vil være midtpunktet af placeringsmarkøren.

HTML

Vi placerer afkrydsningsfeltet før, og den hvide cirkel efter bladene:

CSS

Først fastsætter vi de grundlæggende stilarter for afkrydsningsfeltet og dækningscirklen:

 #pinStarCenter, #pinStarCenterChkBox bredde: 45px; højde: 50px; position: absolut; venstre: 0; højre: 0; top: -60px; bunden: 0; margen: auto; baggrundsfarve: #fff; grænseradius: 50%; markør: pointer;  #pinStarCenter, .pinStarLeaf pointer-events: none;  #pinStarCenter> input [type = "checkbox"] bredde: 100%; højde: 100%; markør: pointer;  

Som hvert blad vil rotere langs z-aksen i forskellige vinkler, vi skal indstille transformere: rotatez (); ejendom i overensstemmelse hermed til lav en stjerneform. Vi anvender også overgang ejendom til rotationseffekten (mere præcist bruger vi overgang: transform 1s lineær regel for bladene).

 #pinStarCenterChkBox: tjekket ~ .pinStarLeaf overgang: transform 1s lineær;  #pinStarCenterChkBox: tjekket ~ .pinStarLeaf: nth-of-type (5) transform: rotatez (35deg);  #pinStarCenterChkBox: tjekket ~ .pinStarLeaf: nth-of-type (4) transform: rotatez (105deg);  #pinStarCenterChkBox: tjekket ~ .pinStarLeaf: nth-of-type (3) transform: rotatez (180deg);  #pinStarCenterChkBox: tjekket ~ .pinStarLeaf: nth-of-type (2) transform: rotatez (255deg);  #pinStarCenterChkBox: tjekket ~ .pinStarLeaf: nth-of-type (1) transform: rotatez (325deg);  

Hvis du kigger på CSS ovenfor, kan du se fra tilstedeværelsen af #pinStarCenterChkBox: tjekket ~ generel søskende vælger, som vi kun tilføjer overgang og omdanne ejendomme når afkrydsningsfeltet er markeret (når brugeren klikker på markøren).

4. Ændring af rotationscentret

Som standard er midten af ​​rotationen placeret i midten af ​​det roterede element, i vores tilfælde i midten af ​​bladene. Vi er nødt til at flytte midten af ​​transformationen til den indre ende af bladene. Det kan vi gøre ved at bruge transformationsbaseret oprindelse CSS ejendom som Ændrer placeringen af ​​transformerede elementer.

For at få rotationseffekten til at fungere korrekt, lad os tilføje de to følgende regler til .pinStarLeaf vælger i vores CSS-fil:

 .pinStarLeaf transform-oprindelse: 30px 30px; overgang: transformer 1s lineær;  

Lad os se vores fan-out-animation i aktion - på dette tidspunkt uden bounce-effekten endnu. Klik på den hvide cirkel oven på markøren.

Forstå, hvordan ubic-Bezier () Works

For at tilføje bounce-effekten skal vi erstatte lineær timing funktion med cubic-bezier () i overgang erklæringer i vores CSS-fil.

Men først, lad os forstå logik bag cubic-bezier () timing funktion så du nemt kan få mening om bounce-effekten.

Syntaxen for cubic-bezier () funktion er følgende, d og t er afstand og tid, og deres værdier ligger typisk mellem 0 og 1:

kubisk-bezier (t1, d1, t2, d2)

Selvom forklarer CSS cubic-bezier () i forhold til afstand og tid er ikke korrekt, det er meget lettere at forstå det på denne måde.

Antag, at der er en boks, der bevæger sig fra punkt A til B om 6 sekunder. Lad os bruge følgende cubic-bezier () timing funktion for overgangen med t1 = 0 og d1 = 1 værdier.

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

På næsten ingen tid flyttes kassen fra A til midtpunktet, og tager resten af ​​tiden B.

Lad os prøve den samme overgang med værdier t1 = 1 og d1 = 0.

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

I de første tre sekunder flytter kassen ikke meget, og senere hopper det næsten til midtpunktet og begynder at bevæge sig støt mod B.

Som du kan se, d1 styrer afstanden mellem A & midtpunktet, og t1 det Den tid det tager at nå midtpunktet fra A.

Lad os bruge d2 og t2 nu. Begge t1 og d1 bliver 1 og t2 = 1 og d2 = 0.

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

Boksen bevæger sig næsten halvvejs om 3 sekunder (på grund af t1 = 1, d1 = 1), og på ingen tid hopper det til punkt B.

Det sidste eksempel bytter de tidligere værdier af t2 og d2:

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

Boksen bevæger sig næsten halvvejs om 3 sekunder (på grund af t1 = 1, d1 = 1), og derefter i 3 sekunder går det ikke meget før man hopper til punkt B.

Disse eksempler viser det d2 og t2 styre afstanden og den tid, det tager kassen til gå fra midtpunkt til punkt B.

Selvom du sandsynligvis ikke har brug for denne lange (endnu sparsomme) forklaring af cubic-bezier () på dette tidspunkt tror jeg det vil hjælpe dig med at forstå denne funktion bedre. Nu, hvor kommer springer i alt dette?

5. Tilføjelse af bounce-effekten med Cubic-Bezier ()

Det nøgleparametre for bounce-effekten er afstande, d1 og d2. EN d1 Værdi af mindre end 1 tager boksen bag punkt A før du fortsætter mod B i begyndelsen af ​​animationen.

EN d2 Værdi af mere end 1 tager boksen ud over punkt B før vi kommer tilbage til hvile ved B i slutningen af ​​animationen. Dermed frem og tilbage bounce effekt.

Jeg tilføjer nu cubic-bezier () værdier direkte til vores demo i stedet for førstnævnte lineær værdi af overgang ejendom, og lad dig se resultaterne.

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

Her er det endelige resultat, en CSS-only fan-out-animation med en bounce-effekt:

Til sammenligning og for at forstå afvisningseffekten bedre, her er hvordan cubic-bezier () Værdien af ​​animationen opfører sig, når den anvendes til vores eksempelboks: