Animacja CSS3 - Tworzenie Fan-Out z efektem odbicia przy użyciu krzywej Beziera

Czy wiedziałeś, że przekształcenia geometryczne dodany do elementów HTML za pomocą przekształcaćWłasność CSS, taka jak skala, pochylenie i obrót, może być animowana? Mogą być animowane za pomocą przejście własność i @klucze animacje, ale jeszcze ciekawsze jest to, że animowane transformacje mogą być zrobione z niewielkim dodatkiem efekt odbicia, używając cubic-bezier () funkcja pomiaru czasu.

W skrócie, cubic-bezier () (w CSS) to funkcja czasowa dla przejść. Określa szybkość przejścia, a między innymi można go również wykorzystać tworzyć efekt odbijania w animacjach.

W tym poście najpierw idziemy stwórz prostą animację transformacji do którego później dodać cubic-bezier () funkcja pomiaru czasu. Pod koniec tego samouczka dowiesz się, jak utworzyć animację, która używa zarówno fan-out, jak i efekt odbicia. Oto wynik końcowy (kliknij, aby zobaczyć efekt).

Demo jest zainspirowane tym pięknym strzałem Dribbble Christophera Jonesa o animowanym znaczniku lokalizacji.

1. Tworzenie liści

Kształt znacznika lokalizacji składa się z pięciu liści (nazwijmy je). Aby utworzyć owalny kształt liścia, użyjmy promień graniczny Właściwość CSS. The promień graniczny jednego rogu składa się z dwóch promieni, poziomo i pionowo, jak pokazano poniżej.

The promień graniczny właściwość ma wiele różnych składni. Dla kształtu znacznika użyjemy bardziej skomplikowanego:

 border-radius: htl htr hbr hbl / vtl vtr vbr vbl; 

W tej składni promienie poziome i pionowe są zgrupowane razem; h & v reprezentują promienie poziome i pionowe oraz t, l, b & r reprezentują górne, lewe, dolne i prawe rogi. Na przykład, vbl oznacza pionowy promień lewego dolnego rogu.

Jeśli dasz tylko jedna wartość dla strony poziomej lub pionowej ta wartość zostanie skopiowana przez przeglądarkę na wszystkie inne poziome lub pionowe promienie.

Do stworzyć pionowy owalny kształt, zachowaj promienie poziome przy 50% dla wszystkich rogów i dopasuj pionowe, aż zobaczysz pożądany kształt. The strona pozioma użyje tylko jednej wartości: 50%.

The promienie pionowe górnego lewego i prawego górnego rogu będą 30%, podczas gdy dolny lewy i dolny prawy róg będą używać 70% wartość.

HTML

CSS

.pinStarLeaf width: 60px; wysokość: 120px; granica-promień: 50% / 30% 30% 70% 70%; kolor tła: # B8F0F5; 

2. Pomnożenie liści

Ponieważ znacznik rozwinie się pokazując pięć liści, tworzymy cztery kolejne kopie liścia w różnych kolorach iz pozycjonowaniem bezwzględnym, aby układać je jeden na drugim.

HTML

CSS

#pinStarWrapper width: 300px; wysokość: 300px; pozycja: względna;  .pinStarLeaf width: 60px; wysokość: 120px; pozycja: absolutna; granica-promień: 50% / 30% 30% 70% 70%; po lewej: 0; po prawej: 0; top: 0; bottom: 0; margin: auto; krycie: .5;  .pinStarLeaf: nth-of-type (1) background-color: # B8F0F5;  .pinStarLeaf: nth-of-type (2) background-color: # 9CF3DC;  .pinStarLeaf: nth-of-type (3) background-color: # 94F3B0;  .pinStarLeaf: nth-of-type (4) background-color: # D2F8A1;  .pinStarLeaf: nth-of-type (5) background-color: # F3EDA2;  

3. Przechwytywanie Kliknij Zdarzenie i Popraw estetykę

Chodźmy dodaj pole wyboru z #pinStarCenterChkBox identyfikator do przechwytywania zdarzenia kliknięcia. Gdy pole wyboru jest zaznaczone, liście rozchodzą się (obracają). Musimy także dodać białe kółko z #pinStarCenter identyfikator estetyki. Będzie on umieszczony na górze znacznika i będzie środkowym elementem znacznika lokalizacji.

HTML

Zaznaczamy pole wyboru przed, a białe kółko po, liście:

CSS

Najpierw ustawiamy podstawowe style dla pola wyboru i okręgu obejmującego:

 #pinStarCenter, #pinStarCenterChkBox width: 45px; wysokość: 50px; pozycja: absolutna; po lewej: 0; po prawej: 0; top: -60px; bottom: 0; margin: auto; background-color: #fff; granica-promień: 50%; cursor: pointer;  #pinStarCenter, .pinStarLeaf pointer-events: none;  #pinStarCenter> input [type = "checkbox"] width: 100%; wysokość: 100%; cursor: pointer;  

Ponieważ każdy liść będzie się obracał wzdłuż osi Z. pod różnymi kątami, musimy ustawić transform: rotatez (); właściwość odpowiednio do stworzyć kształt gwiazdy. Stosujemy również przejście własność dla efektu obrotu (dokładniej używamy przejście: transformacja liniowa 1s reguła dla liści).

 #pinStarCenterChkBox: checked ~ .pinStarLeaf transition: transform 1s linear;  #pinStarCenterChkBox: zaznaczone ~ .pinStarLeaf: nth-of-type (5) transform: rotatez (35deg);  #pinStarCenterChkBox: zaznaczone ~ .pinStarLeaf: nth-of-type (4) transform: rotatez (105deg);  #pinStarCenterChkBox: zaznaczone ~ .pinStarLeaf: nth-of-type (3) transform: rotatez (180deg);  #pinStarCenterChkBox: zaznaczone ~ .pinStarLeaf: nth-of-type (2) transform: rotatez (255deg);  #pinStarCenterChkBox: zaznaczone ~ .pinStarLeaf: nth-of-type (1) transform: rotatez (325deg);  

Jeśli spojrzysz na powyższy CSS, możesz zobaczyć po obecności #pinStarCenterChkBox: checked ~ ogólny selektor rodzeństwa, który dodajemy tylko przejście i przekształcać nieruchomości gdy pole wyboru jest zaznaczone (gdy użytkownik kliknął znacznik).

4. Modyfikowanie środka obrotu

Domyślnie środek obrotu jest ustawiony w środku obróconego elementu, w naszym przypadku na środku liści. Musimy przesunąć środek transformacji na wewnętrzny koniec liści. Możemy to zrobić za pomocą początek transformacji Właściwość CSS, która zmienia pozycję transformowanych elementów.

Aby efekt obrotu działał poprawnie, dodajmy dwie następujące reguły do .pinStarLeaf selektor w naszym pliku CSS:

 .pinStarLeaf transform-origin: 30px 30px; przejście: transformacja 1s liniowa;  

Zobaczmy naszą animację fan-out w akcji - w tym momencie, bez efektu odbicia. Kliknij biały okrąg na górze znacznika.

Zrozumienie Jak działa ubic-Bezier ()

Aby dodać efekt odbicia, musimy zastąpić efekt liniowy funkcja synchronizacji z cubic-bezier () w przejście deklaracje w naszym pliku CSS.

Ale najpierw zrozummy logika za cubic-bezier () funkcja pomiaru czasu abyś mógł łatwo zrozumieć efekt odbicia.

Składnia dla cubic-bezier () funkcja jest następująca, re i t są dystans i czas, a ich wartości zazwyczaj mieszczą się w zakresie od 0 do 1:

sześcienny bezier (t1, d1, t2, d2)

Mimo wyjaśnienia CSS cubic-bezier () pod względem odległości i czasu nie jest dokładne, o wiele łatwiej jest to zrozumieć w ten sposób.

Załóżmy, że jest pudełko, które przesuwa się z punktu A do B za 6 sekund. Użyjmy następujących cubic-bezier () funkcja pomiaru czasu dla przejścia z t1 = 0 i d1 = 1 wartości.

 / * t1 = 0, d1 = 1, t2 = 0, d2 = 0 * / sześcienny bezier (0,1,0,0) 

Niemal w żadnym momencie pudełko przesuwa się z punktu A do punktu środkowego, a resztę czasu zajmuje B.

Spróbujmy tego samego przejścia z wartościami t1 = 1 i d1 = 0.

 / * t1 = 1, d1 = 0, t2 = 0, d2 = 0 * / sześcienny bezier (1,0,0,0) 

Przez pierwsze trzy sekundy pudełko nie porusza się zbytnio, a później prawie przeskakuje do punktu środkowego i zaczyna przesuwać się stopniowo w kierunku B.

Jak widzisz, d1 kontroluje odległość między A & środkowy punkt, i t1 czas potrzebny do osiągnięcia punktu środkowego z punktu A.

Użyjmy d2 i t2 teraz. Obie t1 i d1 będzie 1 i t2 = 1 i d2 = 0.

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

Pudełko porusza się prawie w połowie w ciągu 3 sekund (z powodu t1 = 1, d1 = 1) iw żadnym momencie nie przeskakuje do punktu B.

Ostatni przykład zamienia poprzednie wartości t2 i d2:

 / * t1 = 1, d1 = 1, t2 = 1, d2 = 0 * / sześcienny bezier (1,1,1,0) 

Pudełko porusza się prawie w połowie w ciągu 3 sekund (z powodu t1 = 1, d1 = 1), a następnie przez 3 kolejne sekundy nie porusza się zbyt wiele przed skokiem do punktu B.

Te przykłady pokazują to d2 i t2 kontroluj odległość i czas, w jakim zajmuje to pudełko przejść z punktu środkowego do punktu B.

Chociaż prawdopodobnie nie potrzebujesz tego długiego (ale rzadkiego) wyjaśnienia cubic-bezier () w tym momencie myślę, że pomoże ci lepiej zrozumieć tę funkcję. Teraz, gdzie to wszystko odbija?

5. Dodawanie efektu odbicia za pomocą Cubic-Bezier ()

The kluczowe parametry dla efektu odbicia są odległości, d1 i d2. ZA d1 wartość mniej niż 1 bierze pudełko za punktem A przed przejściem do B na początku animacji.

ZA d2 wartość więcej niż 1 bierze pudełko poza punktem B przed powrotem do spoczynku w B pod koniec animacji. Stąd efekt odbicia w przód iw tył.

Teraz dodam cubic-bezier () wartości bezpośrednio do naszego demo zamiast poprzedniego liniowy wartość przejście właściwość i pozwala zobaczyć wyniki.

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

Oto wynik końcowy, animacja typu fan-out dla CSS z efektem odbicia:

Dla porównania i lepszego zrozumienia efektu odbicia, oto jak cubic-bezier () wartość animacji zachowuje się, gdy zostanie zastosowana do naszego przykładowego pola: