CSS3 Animasjon - Opprette en fan-out med Bounce Effect ved hjelp av Bezier Curve
Visste du at geometriske transformasjoner lagt til HTML-elementer med forvandleCSS-egenskap som skala, skrå og roter kan animeres? De kan animeres ved hjelp av overgang eiendom og @keyframes animasjoner, men hva er enda kulere er at animerte transformasjoner kan tas opp i hakk med tillegg av litt spretteffekt, bruker kubikk-Bezier-() timing funksjon.
I et nøtteskall, kubikk-Bezier-() (i CSS) er en tidsfunksjon for overganger. Det spesifiserer overgangshastigheten, og blant annet kan den også brukes til skape studsende effekt i animasjoner.
I dette innlegget kommer vi først til Lag en enkel transformasjonsanimasjon som vi senere Legg til en kubikk-Bezier-() timing funksjon. På slutten av denne opplæringen forstår du hvordan du oppretter en animasjon som bruker både en fan-out og en sprett-effekt. Her er sluttresultatet (klikk for å se effekten).
Demoen er inspirert av denne vakre Dribbble-skutt av Christopher Jones om en animert plasseringsmarkør.
1. Opprette bladene
Formen på plasseringsmarkøren består av fem (la oss kalle dem) forlater. Å opprette oval form av et blad, la oss bruke border-radius CSS eiendom. De border-radius av et enkelt hjørne er består av to radius, horisontal og vertikal, som vist nedenfor.
De border-radius Eiendommen har mange forskjellige syntakser. Vi vil bruke en mer komplisert for formen til markøren:
grense-radius: htl htr hbr hbl / vtl vtr vbr vbl;
I denne syntaksen grupperes horisontale og vertikale radier sammen; h & v representerer horisontale og vertikale radier, og t, l, b & r representerer topp, venstre, bunn og høyre hjørner. For eksempel, VBL står for den vertikale radiusen i nederste venstre hjørne.
Hvis du gir bare en verdi for enten den horisontale eller den vertikale siden, vil verdien bli kopiert til alle andre horisontale eller vertikale radier av nettleseren.
Til Lag en vertikal oval form, hold den horisontale radius på 50% for alle hjørner, og juster de vertikale seg, til ønsket form er sett. De horisontal side vil bare bruke en verdi: 50%.
De vertikale radier av topp-venstre og øverste høyre hjørner vil være 30%, mens nederst-venstre og nederste høyre hjørner vil bruke 70% verdi.
HTML
CSS
.pinStarLeaf bredde: 60px; høyde: 120px; grense-radius: 50% / 30% 30% 70% 70%; bakgrunnsfarge: # B8F0F5;
2. Multipliser bladene
Siden markøren vil vifte ut viser fem blader, oppretter vi fire flere kopier av bladet i forskjellige farger, og med absolutt posisjonering for å stable dem på hverandre.
HTML
CSS
#pinStarWrapper bredde: 300px; høyde: 300px; posisjon: relativ; .pinStarLeaf bredde: 60px; høyde: 120px; posisjon: absolutt; grense-radius: 50% / 30% 30% 70% 70%; venstre: 0; høyre: 0; topp: 0; bunn: 0; margin: auto; opacity: .5; .pinStarLeaf: nth-of-type (1) bakgrunnsfarge: # B8F0F5; .pinStarLeaf: nth-of-type (2) bakgrunnsfarge: # 9CF3DC; .pinStarLeaf: nth-of-type (3) bakgrunnsfarge: # 94F3B0; .pinStarLeaf: nth-of-type (4) bakgrunnsfarge: # D2F8A1; .pinStarLeaf: nth-of-type (5) bakgrunnsfarge: # F3EDA2;
3. Capturing Click Event og forbedret estetikk
la oss legg til en avkrysningsboks med #pinStarCenterChkBox identifikator for å fange klikkhendelsen. Når avkryssingsboksen er merket, vil bladene vifte ut (rotere). Vi må også legge til en hvit sirkel med #pinStarCenter identifikator for estetikk. Den vil bli plassert på toppen av markøren, og det vil være midtpunktet av plasseringsmarkøren.
HTML
Vi legger av i boksen før, og den hvite sirkelen etter, bladene:
CSS
Først setter vi de grunnleggende stilene for avmerkingsboksen og dekksirkelen:
#pinStarCenter, #pinStarCenterChkBox width: 45px; høyde: 50px; posisjon: absolutt; venstre: 0; høyre: 0; topp: -60px; bunn: 0; margin: auto; bakgrunnsfarge: #fff; grense-radius: 50%; markør: pointer; #pinStarCenter, .pinStarLeaf peker-hendelser: ingen; #pinStarCenter> input [type = "checkbox"] bredde: 100%; høyde: 100%; markør: pointer;
Som hvert blad vil rotere langs z-aksen i forskjellige vinkler, vi må sette transformere: rotatez (); eiendom tilsvarende, til lag en stjerneform. Vi søker også på overgang eiendom for rotasjonseffekten (mer presist bruker vi overgang: transform 1s lineær styre for bladene).
#pinStarCenterChkBox: sjekket ~ .pinStarLeaf overgang: transform 1s lineær; #pinStarCenterChkBox: sjekket ~ .pinStarLeaf: nth-of-type (5) transform: rotatez (35deg); #pinStarCenterChkBox: sjekket ~ .pinStarLeaf: nth-of-type (4) transform: rotatez (105deg); #pinStarCenterChkBox: sjekket ~ .pinStarLeaf: nth-of-type (3) transform: rotatez (180deg); #pinStarCenterChkBox: sjekket ~ .pinStarLeaf: nth-of-type (2) transform: rotatez (255deg); #pinStarCenterChkBox: sjekket ~ .pinStarLeaf: nth-of-type (1) transform: rotatez (325deg);
Hvis du ser på CSS ovenfor, kan du se fra tilstedeværelsen av #pinStarCenterChkBox: sjekket ~ generell søskenvelger som vi bare legger til overgang og forvandle eiendommer når avkryssingsboksen er merket (når brukeren klikket på markøren).
4. Endre rotasjonssenteret
Som standard er senteret for rotasjonen plassert i midten av det roterte elementet, i vårt tilfelle, i midten av bladene. Vi må flytte sentrum av transformasjonen til den indre enden av bladene. Vi kan gjøre dette ved å bruke forvandle-opprinnelse CSS eiendom som endrer posisjonen til transformerte elementer.
For å få rotasjonseffekten til å fungere skikkelig, la vi legge til de to følgende reglene til .pinStarLeaf velger i vår CSS-fil:
.pinStarLeaf transform-opprinnelse: 30px 30px; overgang: transformer 1s lineær;
La oss se vår fan-animasjon i gang - på dette tidspunktet, uten sprettingseffekten ennå. Klikk på den hvite sirkelen, på toppen av markøren.
Forstå hvordan ubic-Bezier () Fungerer
Nå, for å legge til sprettingseffekten, må vi erstatte lineær tidsfunksjon med kubikk-Bezier-() i overgang erklæringer i vår CSS-fil.
Men først, la oss forstå logikk bak kubikk-Bezier-() timing funksjon slik at du enkelt kan gi mening om sprettingseffekten.
Syntaxen for kubikk-Bezier-() funksjonen er følgende, d og t er avstand og tid, og deres verdier ligger vanligvis mellom 0 og 1:
kubisk-bezier (t1, d1, t2, d2)
Selv om du forklarer CSS kubikk-Bezier-() Når det gjelder avstand og tid er ikke nøyaktig, er det mye lettere å forstå det på denne måten.
Anta at det er en boks som beveger seg fra punkt A til B om 6 sekunder. La oss bruke følgende kubikk-Bezier-() timing funksjon for overgangen med t1 = 0 og d1 = 1 verdier.
/ * t1 = 0, d1 = 1, t2 = 0, d2 = 0 * / kubisk-bezier (0,1,0,0)
På nesten ingen tid flyttes boksen fra A til midtpunkt, og tar resten av tiden når B.
La oss prøve samme overgang med verdier t1 = 1 og d1 = 0.
/ * t1 = 1, d1 = 0, t2 = 0, d2 = 0 * / kubisk bezier (1,0,0,0)
I de første tre sekundene beveger boksen ikke mye, og senere hopper det nesten til midtpunktet, og begynner å bevege seg jevnt mot B.
Som du kan se, d1 kontrollerer avstand mellom a & midtpunktet, og t1 de Tid det tar å nå midtpunktet fra A.
La oss bruke d2 og t2 nå. Både t1 og d1 vil være 1 og t2 = 1 og d2 = 0.
/ * t1 = 1, d1 = 1, t2 = 0, d2 = 1 * / kubisk bezier (1,1,0,1)
Boksen beveger seg nesten halvveis om 3 sekunder (på grunn av t1 = 1, d1 = 1), og på ingen tid hopper det til punkt B.
Det siste eksempelet bytter de tidligere verdiene til t2 og d2:
/ * t1 = 1, d1 = 1, t2 = 1, d2 = 0 * / kubisk bezier (1,1,1,0)
Boksen beveger seg nesten halvveis om 3 sekunder (på grunn av t1 = 1, d1 = 1), så tre sekunder ikke flytte mye før du hopper til punkt B.
Disse eksemplene viser det d2 og t2 Kontroller avstanden og tiden det tar boksen til gå fra midtpunkt til punkt B.
Selv om du sannsynligvis ikke trenger denne lange (men likevel sparsomme) forklaringen av kubikk-Bezier-() på dette punktet tror jeg det vil hjelpe deg å forstå denne funksjonen bedre. Nå, hvor kommer sprettingen i alt dette?
5. Legge til bounce-effekten med Cubic-Bezier ()
De nøkkelparametere for sprettingseffekten er avstandene, d1 og d2. EN d1 verdien av mindre enn 1 tar boksen bak punkt A før du fortsetter mot B i begynnelsen av animasjonen.
EN d2 verdien av mer enn 1 tar boksen utover punkt B før du kommer tilbake til hvile ved B på slutten av animasjonen. Dermed frem og tilbake bounce effekt.
Jeg legger nå til kubikk-Bezier-() verdier direkte til vår demo i stedet for den tidligere lineær verdien av overgang eiendom, og la deg se resultatene.
#pinStarCenterChkBox: sjekket ~ .pinStarLeaf overgang: transform 1s cubic-bezier (.8, - .5, .2,1.4);
Her er det endelige resultatet, en CSS-only fan-out-animasjon med en sprettingseffekt:
For å sammenligne og forstå sprettingseffekten bedre, her er hvordan kubikk-Bezier-() Verdien av animasjonen oppfører seg når den brukes på vår eksempelboks:
