Homepage » Coding » CSS3 animáció - Fan-Out létrehozása ugráló hatással a Bezier görbe használatával

    CSS3 animáció - Fan-Out létrehozása ugráló hatással a Bezier görbe használatával

    Tudtad, hogy geometriai transzformációk hozzáadva a HTML elemekhez a átalakítA CSS tulajdonságok, mint például a skála, a ferde és a forgatható, animálhatók? A átmenet ingatlan és @keyframes animációk, de ami még hűvösebb, hogy az animált átalakítások egy apró rész hozzáadásával bevághatók ugrálhat, használni a köbös-Bezier () időzítési funkció.

    Dióhéjban, köbös-Bezier () (a CSS-ben) a időzítési funkció az átmenetekhez. Meghatározza az átmenet sebességét, és többek között azt is használhatja hozzon létre pattogó hatást az animációkban.

    Ebben a bejegyzésben először megyünk hozzon létre egy egyszerű transzformációs animációt amelyre később add a köbös-Bezier () időzítési funkció. A bemutató végén megérted, hogyan hozhat létre egy animációt mind a fan-out, mind a ugráló hatás. Itt van a végeredmény (kattintson ide a hatás megtekintéséhez).

    A demót ezt a gyönyörű Dribbble inspirálta, amelyet Christopher Jones készített egy animált helyjelzőről.

    KÉP: Dribble
    1. A levelek létrehozása

    A helyjelölő alakja öt (nevezzük őket) levélnek. A Ovális alakzat egy levél, használja a border-radius CSS tulajdonság. A border-radius egyetlen sarok két sugárból áll, vízszintes és függőleges, mint az alább látható.

    KÉP: W3C

    A border-radius A tulajdonság számos különböző szintaxist tartalmaz. Egy bonyolultabbat fogunk használni a jelölő alakjához:

     határ-sugár: htl htr hbr hbl / vtl vtr vbr vbl; 

    Ebben a szintaxisban a vízszintes és a függőleges sugarak együtt vannak csoportosítva; h & v a vízszintes és függőleges sugarakat képviselik, és t, l, b & r a felső, a bal, az alsó és a jobb sarok. Például, VBL a bal alsó sarok függőleges sugara.

    Ha adsz csak egy érték a vízszintes vagy a függőleges oldal esetében az értéket a böngésző másolja át a többi vízszintes vagy függőleges sugárra.

    Nak nek hozzon létre egy függőleges ovális alakot, tartsa a vízszintes sugarakat 50% minden sarkon, és állítsa be a függőlegeseket, amíg meg nem jelenik a kívánt forma. A vízszintes oldal csak egy értéket fog használni: 50%.

    A függőleges sugarak a bal felső és jobb felső sarok 30%, míg a bal alsó és a jobb alsó sarokban a 70% érték.

    HTML

    CSS

    .pinStarLeaf szélesség: 60px; magasság: 120px; határ-sugár: 50% / 30% 30% 70% 70%; háttérszín: # B8F0F5; 
    KÉP: A marker alakja (függőleges ovális)
    2. A levelek szaporítása

    Mivel a jelölő öt lapot mutat ki, létrehozunk négy további példánya a levélnek különböző színekben és abszolút pozícionálással, hogy egymásra rakják őket.

    HTML

    CSS

    #pinStarWrapper szélesség: 300px; magasság: 300px; pozíció: relatív;  .pinStarLeaf szélesség: 60px; magasság: 120px; pozíció: abszolút; határ-sugár: 50% / 30% 30% 70% 70%; balra: 0; jobb: 0; top: 0; alsó: 0; margó: auto; opacitás: .5;  .pinStarLeaf: nth-of-type (1) háttérszín: # B8F0F5;  .pinStarLeaf: nth-of-type (2) háttérszín: # 9CF3DC;  .pinStarLeaf: nth-of-type (3) háttérszín: # 94F3B0;  .pinStarLeaf: nth-of-type (4) háttérszín: # D2F8A1;  .pinStarLeaf: nth-of-type (5) háttérszín: # F3EDA2;  
    3. Kattintási esemény és esztétika javítása

    Nézzük jelölje be a jelölőnégyzetet a ... val #pinStarCenterChkBox azonosító a kattintási esemény rögzítéséhez. Ha a jelölőnégyzet be van jelölve, a levelek ki fognak fújni (forgatni). Emellett hozzá kell adnunk egy fehér kör a ... val #pinStarCenter esztétikai azonosító. A jelölő tetején lesz elhelyezve, és a helyjelző középső része lesz.

    HTML

    A jelölőnégyzetet korábban elhelyezzük, a fehér kört pedig a levelek:

    CSS

    Először a jelölőnégyzet alapvető stílusait és a körkört állítjuk be:

     #pinStarCenter, #pinStarCenterChkBox szélesség: 45px; magasság: 50px; pozíció: abszolút; balra: 0; jobb: 0; top: -60px; alsó: 0; margó: auto; háttérszín: #fff; határ-sugár: 50%; kurzor: mutató;  #pinStarCenter, .pinStarLeaf pointer-események: nincs;  #pinStarCenter> bemenet [type = "checkbox"] szélesség: 100%; magasság: 100%; kurzor: mutató;  

    Mivel minden levél a z-tengely mentén forog különböző szögben, meg kell állítanunk a átalakítás: rotatez (); ennek megfelelően csillag alakú létrehozása. Mi is alkalmazzuk a átmenet ingatlan a rotációs hatás (pontosabban a átmenet: az 1s lineáris átalakítása szabály a levelek számára).

     #pinStarCenterChkBox: check ~ .pinStarLeaf átmenet: 1s transzformáció lineáris;  #pinStarCenterChkBox: check ~ .pinStarLeaf: nth-of-type (5) transzformálás: rotatez (35deg);  #pinStarCenterChkBox: check ~ .pinStarLeaf: nth-of-type (4) transzformálás: rotatez (105deg);  #pinStarCenterChkBox: check ~ .pinStarLeaf: nth-of-type (3) transzformálás: rotatez (180deg);  #pinStarCenterChkBox: check ~ .pinStarLeaf: nth-of-type (2) transform: rotatez (255deg);  #pinStarCenterChkBox: ellenőrzött ~ .pinStarLeaf: nth-of-type (1) transform: rotatez (325deg);  

    Ha megnézed a fenti CSS-t, akkor a jelenlétből láthatod #pinStarCenterChkBox: ellenőrzött ~ általános testvérválasztó, amit csak hozzáadunk átmenet és átalakít tulajdonságok ha a jelölőnégyzet be van jelölve (ha a felhasználó rákattintott a jelölőre).

    4. A forgatás központjának módosítása

    Alapértelmezés szerint a forgás középpontja el van helyezve az elforgatott elem közepén, a mi esetünkben, a levelek közepén. Az átalakulás középpontját a levelek belső végére kell mozgatnunk. Ezt a transzformációs származási CSS tulajdonság, hogy megváltoztatja az átalakított elemek helyzetét.

    Ahhoz, hogy a rotációs hatás megfelelően működjön, add hozzá a két következő szabályt a .pinStarLeaf CSS fájlunkban a választó:

     .pinStarLeaf transzformációs eredet: 30px 30px; átmenet: 1s transzformáció lineáris;  

    Nézzük meg rajongóink animációját akcióban - ezen a ponton, még a visszapattanás hatása nélkül. Kattintson a fehér körre a jelölő tetején.

    Megértése, hogyan működik az ubic-Bezier ()

    Most, hogy hozzáadjuk a visszapattanó hatást, ki kell cserélnünk a lineáris időzítési funkció köbös-Bezier () ban,-ben átmenet nyilatkozatok a CSS fájlunkban.

    De először megértjük logika mögött köbös-Bezier () időzítési funkció úgy, hogy könnyen érthetővé váljon a ugráló hatás.

    A szintaxis a köbös-Bezier () funkció a következő, d és t vannak távolság és idő, és ezek értéke általában 0 és 1 között van:

    köbméter (t1, d1, t2, d2)

    Annak ellenére, hogy elmagyarázza a CSS-t köbös-Bezier () a távolság és az idő szempontjából nem pontos, így sokkal könnyebb megérteni.

    Tegyük fel, hogy van egy doboz, amely az A-tól B-ig mozog 6 másodperc múlva. Használjuk a következőket köbös-Bezier () időzítési funkció a t1 = 0 és d1 = 1 értékeket.

     / * t1 = 0, d1 = 1, t2 = 0, d2 = 0 * / köbméter (0,1,0,0) 

    Szinte nincs idő, a doboz A-tól középpontig mozog, és az idő hátralevő részét B-re teszi.

    Próbáljuk meg ugyanazt az átmenetet az értékekkel t1 = 1 és d1 = 0.

     / * t1 = 1, d1 = 0, t2 = 0, d2 = 0 * / köbméter (1,0,0,0) 

    Az első három másodpercben a doboz nem mozog sokáig, majd később majdnem középpontra ugrik, és folyamatosan elindul B felé.

    Amint látod, d1 vezérli a A távolság & a középpont, és t1 a az A-tól érkező középpont eléréséhez szükséges idő.

    Használjuk d2 és t2 Most. Mindkét t1 és d1 lesz 1, és t2 = 1 és d2 = 0.

     / * t1 = 1, d1 = 1, t2 = 0, d2 = 1 * / köbméter (1,1,0,1) 

    A doboz 3 másodpercen belül majdnem félúton mozog (miatt t1 = 1, d1 = 1), és semmikor nem ugrik a B pontra.

    Az utolsó példa az t2 és d2:

     / * t1 = 1, d1 = 1, t2 = 1, d2 = 0 * / köbméter (1,1,1,0) 

    A doboz 3 másodpercen belül majdnem félúton mozog (miatt t1 = 1, d1 = 1), majd még 3 másodpercig nem mozog sokáig, mielőtt ugrik a B pontra.

    Ezek a példák azt mutatják d2 és t2 szabályozza a távolságot és az időt, amire a doboz beír menjen középpontból B pontra.

    Bár valószínűleg nem kellett ezt a hosszú (mégis ritka) magyarázatot köbös-Bezier () ebben a pillanatban azt hiszem, ez segít jobban megérteni ezt a funkciót. Most hová jön ez a ugratás?

    5. A Bounce Effect hozzáadása a Cubic-Bezierhez ()

    A kulcsfontosságú paraméterek a visszafordulási hatás a távolságok, d1 és d2. A d1 értéke kevesebb, mint 1 elveszi a dobozt A pont mögött mielőtt az animáció elején B felé haladna.

    A d2 értéke több mint 1 elveszi a dobozt a B ponton túl mielőtt az animáció végén B-re pihenne. Ezért a visszafelé ugráló hatás.

    Most hozzáadom a köbös-Bezier () értékei közvetlenül a demónkhoz az előbbi helyett lineáris értéke átmenet tulajdonságait, és láthatja az eredményeket.

     #pinStarCenterChkBox: check ~ .pinStarLeaf átmenet: 1s cubic-bezier (.8, - .5, .2,1.4);  

    Íme a végeredmény, a CSS-csak rajongó-out animáció, amely ugrálhat:

    Összehasonlítás céljából, és jobban megérthetjük a ugratás hatását, itt van a köbös-Bezier () az animáció értéke akkor jelenik meg, amikor a példánkra vonatkozó példányunkat alkalmazzuk: