⚡
✌️
Tworzenie efektu utrwalenia
Naszym celem jest zastosowanie fiksacji do dwóch obiektów, tak aby pierwszy z nich natychmiast przylgnął do środka strony, podczas gdy drugi zamarł w momencie dotknięcia pierwszego. Coś takiego:
1
Przegląd ustawień
NAPRAWA
Ustawia obszar fiksacji obiektu. Odnosi się to do obszaru ekranu (góra, środek lub dół), względem którego rozpoczyna się efekt fiksacji. Należy zauważyć, że kształty w przykładzie są ustalone na środku ekranu.
PRZESUNIĘCIE WYZWALACZA
Jest to punkt początkowy fiksacji obiektu względem wybranego ustawienia: Góra okna / Środek okna / Dół okna.
ODLEGŁOŚĆ
Odnosi się to do odległości w pikselach, jaką obiekt musi pokonać w trybie stałym.
Jak stworzyć efekt
1
Konfigurowanie parametrów elementu
1. Dodaj Zero Block do strony z biblioteki bloków i przejdź do ustawień bloku. Umieść 2 obiekty w obszarze roboczym, pionowo, jeden za drugim.
2. Ustaw obiekty tak, aby miały ten sam obszar fiksacji - w naszym przypadku WINDOW CENTER. Oba obiekty pozostaną unieruchomione na środku ekranu.
3. Lepiej jest wybrać ostateczny rozmiar wszystkich elementów i odległość między nimi za jednym razem. Rozmiar każdego elementu wpłynie na parametry animacji.
Rozmiar kształtów to 100x100 px. Odległość między nimi wynosi 300px. Odległość = Wcięcie drugiego obiektu - Wysokość pierwszego obiektu
Wskazówka: Jeśli nie masz jasnego celu rozmiaru, użyj wartości całkowitych lub dziesiętnych podczas wprowadzania rozmiaru elementu i odstępów, aby uprościć obliczenia.
2
Konfigurowanie parametrów animacji
1. Zacznijmy odustawienia przesunięcia wyzwalacza / punktu początkowego animacji.
Punkt jest liczony względem wybranego obszaru, Centrum okna.
Zacznij od górnego obiektu, ponieważ ułatwi to obliczenie punktów początkowych animacji pozostałych kształtów. Jego punkt początkowy to 0px, co oznacza, że pierwszy obiekt będzie przylegał dokładnie do środka ekranu.
Dolny obiekt powinien zatrzymać się, gdy dotknie górnego obiektu. Oznacza to, że jego punkt początkowy animacji będzie niższy dokładnie o wysokość pierwszego obiektu. Ustawmy tutaj wcięcie na 100px.
Punkt jest liczony względem wybranego obszaru, Centrum okna.
Zacznij od górnego obiektu, ponieważ ułatwi to obliczenie punktów początkowych animacji pozostałych kształtów. Jego punkt początkowy to 0px, co oznacza, że pierwszy obiekt będzie przylegał dokładnie do środka ekranu.
Dolny obiekt powinien zatrzymać się, gdy dotknie górnego obiektu. Oznacza to, że jego punkt początkowy animacji będzie niższy dokładnie o wysokość pierwszego obiektu. Ustawmy tutaj wcięcie na 100px.
2. Ustaw odległość.
Jest to odległość, jaką obiekt powinien pokonać w trybie stałym. Dostosuj ustawienia animacji, zaczynając od dolnego obiektu. Ułatwi to obliczenie odległości "przyklejenia".
Jest to odległość, jaką obiekt powinien pokonać w trybie stałym. Dostosuj ustawienia animacji, zaczynając od dolnego obiektu. Ułatwi to obliczenie odległości "przyklejenia".
Kwadrat. Jeśli ponownie spojrzysz na przykład, zauważysz, że kwadrat nie pokrywa żadnej odległości w trybie stałym - pozostaje zamrożony pod okręgiem. Oznacza to, że musimy ustawić odległość na 0px.
Okrąg. Okrąg pokonuje odległość do kwadratu w trybie stałym. Po tym efekt fiksacji znika, a oba kształty przewijają się jak zwykle.
Zasadniczo okrąg musi dotrzeć do pozycji kwadratu i zatrzymać się wyżej, aby zatrzymać się obok niego.
Oznacza to 400px - 100px (wysokość kwadratu) = 300px.
Zasadniczo okrąg musi dotrzeć do pozycji kwadratu i zatrzymać się wyżej, aby zatrzymać się obok niego.
Oznacza to 400px - 100px (wysokość kwadratu) = 300px.
Zapisz ustawienia i opublikuj stronę. Zmiany będą widoczne w trybie podglądu lub po opublikowaniu strony.
Czy ten przewodnik był pomocny w zrozumieniu, jak działa efekt lepkości?
