CSS3 Animation - Skapa en Fan-Out med studseffekt med Bezier Curve

Visste du att geometriska transformationer läggs till i HTML-element med omvandlaCSS-egenskapen som skala, skev och rotera kan animeras? De kan animeras med hjälp av övergång egendom och @keyframes animationer, men vad som är ännu kallare är att animerade transformationer kan tas upp i hak med tillägg av lite studsseffekt, använda kubisk-bezier () tidsfunktion.

I ett nötskal, kubisk-bezier () (i CSS) är a tidsfunktion för övergångar. Det anger övergångens hastighet och kan bland annat också användas skapa studsande effekt i animationer.

I det här inlägget ska vi först skapa en enkel transformationsanimation till vilken vi senare Lägg till en kubisk-bezier () tidsfunktion. I slutet av denna handledning kommer du att förstå hur man skapar en animering som använder både en fan-out och en studseffekt. Här är det slutliga resultatet (klicka för att se effekten).

Demon är inspirerad av detta vackra Dribbble-skott av Christopher Jones om en animerad platsmarkör.

1. Skapa bladen

Formen på platsmarkören består av fem (låt oss kalla dem) lämnar. För att skapa oval form av ett blad, låt oss använda border-radius CSS-egenskapen. De border-radius av ett enda hörn är bestående av två radier, horisontellt och vertikalt, som visas nedan.

De border-radius egendom har många olika syntaxer. Vi kommer att använda en mer komplicerad för markörens form:

 gränsstråle: htl htr hbr hbl / vtl vtr vbr vbl; 

I denna syntax grupperas horisontella och vertikala radier ihop; h & v representerar horisontella och vertikala radier, och t, l, b & r representerar topp, vänster, botten och höger hörn. Till exempel, VBL står för den vertikala radie i det nedre vänstra hörnet.

Om du ger bara ett värde för antingen den horisontella eller den vertikala sidan kommer detta värde att kopieras till alla andra horisontella eller vertikala radier av webbläsaren.

Till skapa en vertikal oval form, håll den horisontella radien vid 50% för alla hörn och justera de vertikala, tills önskad form ses. De horisontell sida kommer bara att använda ett värde: 50%.

De vertikala radier av de övre vänstra och övre högra hörnen kommer att vara 30%, medan de nedre vänstra och nedre högra hörnen kommer att använda 70% värde.

html

CSS

.pinStarLeaf width: 60px; höjd: 120px; gränsen: 50% / 30% 30% 70% 70%; bakgrundsfärg: # B8F0F5; 

2. Multiplicera bladen

Eftersom markören kommer att blinka ut med fem blad skapar vi fyra fler kopior av bladet i olika färger och med absolut positionering för att stapla dem på varandra.

html

CSS

#pinStarWrapper bredd: 300px; höjd: 300px; position: relativ;  .pinStarLeaf width: 60px; höjd: 120px; position: absolut; gränsen: 50% / 30% 30% 70% 70%; vänster: 0; höger: 0; topp: 0; botten: 0; marginal: auto; opacitet: .5;  .pinStarLeaf: nth-of-type (1) bakgrundsfärg: # B8F0F5;  .pinStarLeaf: nth-of-type (2) bakgrundsfärg: # 9CF3DC;  .pinStarLeaf: nth-of-type (3) bakgrundsfärg: # 94F3B0;  .pinStarLeaf: nth-of-type (4) bakgrundsfärg: # D2F8A1;  .pinStarLeaf: nth-of-type (5) bakgrundsfärg: # F3EDA2;  

3. Capturing Click Event och förbättrad estetik

låt oss lägg till en kryssruta med #pinStarCenterChkBox identifierare för att fånga klickhändelsen. När kryssrutan är markerad kommer bladen att blinka ut (rotera). Vi måste också lägga till en vit cirkel med #pinStarCenter identifierare för estetik. Den kommer att placeras ovanpå markören, och det kommer att vara mittpunkten på platsmarkören.

html

Vi placerar kryssrutan före, och den vita cirkeln efter, bladen:

CSS

Först ställer vi in ​​de grundläggande stilarna för kryssrutan och täckningscirkeln:

 #pinStarCenter, #pinStarCenterChkBox width: 45px; höjd: 50px; position: absolut; vänster: 0; höger: 0; topp: -60px; botten: 0; marginal: auto; bakgrundsfärg: #fff; gränsstråle: 50%; markör: pekare;  #pinStarCenter, .pinStarLeaf pekarehändelser: ingen;  #pinStarCenter> inmatning [typ = "checkbox"] bredd: 100%; höjd: 100%; markör: pekare;  

När varje blad kommer att rotera längs z-axeln i olika vinklar, vi måste ställa in transformera: rotatez (); egendom i enlighet därmed till skapa en stjärnform. Vi tillämpar också övergång fast egendom för rotationseffekten (mer exakt använder vi övergång: transformera 1s linjär regel för bladen).

 #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-of-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);  

Om du tittar på CSS ovan kan du se från närvaron av #pinStarCenterChkBox: checked ~ allmän syskonväljare som vi bara lägger till övergång och omvandla egenskaper när kryssrutan är markerad (när användaren klickade på markören).

4. Ändra rotationscentrumet

Som standard är mittpunkten för rotationen placerad i mitten av det roterade elementet, i vårt fall, i mitten av bladen. Vi måste flytta mitten av omvandlingen till bladets inre ände. Vi kan göra detta genom att använda transform-ursprung CSS egendom som ändrar positionen för transformerade element.

För att rotationseffekten skall fungera korrekt, låt oss lägga till de två följande reglerna på .pinStarLeaf väljare i vår CSS-fil:

 .pinStarLeaf transform-ursprung: 30px 30px; övergång: transformera 1s linjär;  

Låt oss se vår fan-animering i aktion - just nu, utan studsningseffekten ännu. Klicka på den vita cirkeln ovanpå markören.

Förstå hur ubic-Bezier () fungerar

För att lägga till studsningseffekten måste vi ersätta linjär timing funktion med kubisk-bezier () i övergång deklarationer i vår CSS-fil.

Men först, låt oss förstå logik bakom kubisk-bezier () tidsfunktion så att du enkelt kan känna av studseffekten.

Syntaxen för kubisk-bezier () funktionen är följande, d och t är distans och tid, och deras värden ligger vanligtvis mellan 0 och 1:

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

Även om man förklarar CSS kubisk-bezier () När det gäller avstånd och tid är inte korrekt, är det mycket lättare att förstå det på så sätt.

Antag att det finns en låda som flyttar från punkt A till B på 6 sekunder. Låt oss använda följande kubisk-bezier () tidsfunktion för övergången med t1 = 0 och d1 = 1 värden.

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

På nästan ingen tid flyttar lådan från A till mitten, och tar resten av tiden att nå B.

Låt oss försöka samma övergång med värden t1 = 1 och d1 = 0.

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

För de första tre sekunderna flytta rutan inte mycket, och senare hoppar det nästan till mitten, och börjar ständigt gå mot B.

Som du kan se, d1 kontrollerar Avståndet mellan A & mittpunkten, och t1 de Den tid det tar att nå mittpunkten från A.

Låt oss använda d2 och t2 nu. Både t1 och d1 kommer att vara 1 och t2 = 1 och d2 = 0.

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

Lådan går nästan halvvägs om 3 sekunder (på grund av t1 = 1, d1 = 1), och på nolltid hoppar det till punkt B.

Det sista exemplet byter tidigare värden på t2 och d2:

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

Lådan går nästan halvvägs om 3 sekunder (på grund av t1 = 1, d1 = 1), för tre sekunder fortsätter inte mycket innan hoppa till punkt B.

Dessa exempel visar att d2 och t2 kontrollera avståndet och tiden det tar boxen till gå från mitten till punkt B.

Även om du förmodligen inte behövde denna långa (men ändå gles) förklaring av kubisk-bezier () Vid denna tidpunkt tror jag att det kommer att hjälpa dig att förstå denna funktion bättre. Nu, var kommer studsen i allt detta?

5. Lägga till studsningseffekten med Cubic-Bezier ()

De nyckelparametrar för studseffekten är avstånden, d1 och d2. en d1 värdet av mindre än 1 tar lådan bakom punkt A innan du går vidare mot B i början av animationen.

en d2 värdet av mer än 1 tar lådan bortom punkt B innan du kommer tillbaka till vila vid B i slutet av animationen. Därför fram och tillbaka studsa effekten.

Jag lägger nu till kubisk-bezier () värderar direkt till vår demo i stället för den tidigare linjär värdet av övergång egendom, och låt dig se resultaten.

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

Här är det slutliga resultatet, en CSS-only fan-out-animering med en studseffekt:

För jämförelse och för att förstå studsningseffekten bättre, här är hur kubisk-bezier () Animationens värde uppför sig när det tillämpas på vår exempelruta: