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ít
A 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.
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ó.
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;
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: