Efekt animacji można dodać do dowolnego elementu Zero Block. Istnieją dwa typy efektów animacji: podstawowe i zaawansowane lub animacja krok po kroku. W tym artykule omówimy najbardziej podstawowe ustawienia animacji.
Podstawowe opcje animacji obejmują:
- Animacja — różne opcje rozpoczęcia efektu animacji;
- Paralaksa — ustawienia efektu paralaksy;
- Naprawianie — stałe ustawienia efektu pozycjonowania.
Animacja
Efekty animacji obejmują zanikanie, zanikanie w prawej, zanikanie w lewo, zanikanie w górę, zanikanie w dół i powiększanie.
Wszystkie efekty animacji mają wiele typowych ustawień, takich jak Czas trwania, Opóźnienie i Przesunięcie wyzwalacza.
Czas trwania to czas trwania efektu animacji w sekundach. Wartość liczbowa to liczba sekund, przez którą będzie miał miejsce efekt animacji.
Opóźnienie to opóźnienie w sekundach przed rozpoczęciem efektu animacji.
Przesunięcie wyzwalacza to przesunięcie w pikselach od dolnej krawędzi kontenera okna, przy której rozpoczyna się odtwarzanie animacji.
W przypadku korzystania z efektów animacji z elementami pojawiającymi się z góry, dołu, prawej lub lewej strony opcja "Odległość" oznacza odległość pokonaną przez blok od miejsca, w którym pojawia się po raz pierwszy.
Efekt powiększenia ma ustawienie Skala. Jeśli jest ustawiony na mniej niż 100%, element zostanie powiększony do pierwotnego rozmiaru. Jeśli jest ustawiony na więcej niż 100%, element pomniejsza się i wydaje się mniejszy.
Czas trwania to czas trwania efektu animacji w sekundach. Wartość liczbowa to liczba sekund, przez którą będzie miał miejsce efekt animacji.
Opóźnienie to opóźnienie w sekundach przed rozpoczęciem efektu animacji.
Przesunięcie wyzwalacza to przesunięcie w pikselach od dolnej krawędzi kontenera okna, przy której rozpoczyna się odtwarzanie animacji.
W przypadku korzystania z efektów animacji z elementami pojawiającymi się z góry, dołu, prawej lub lewej strony opcja "Odległość" oznacza odległość pokonaną przez blok od miejsca, w którym pojawia się po raz pierwszy.
Efekt powiększenia ma ustawienie Skala. Jeśli jest ustawiony na mniej niż 100%, element zostanie powiększony do pierwotnego rozmiaru. Jeśli jest ustawiony na więcej niż 100%, element pomniejsza się i wydaje się mniejszy.
Paralaksa
Animacje paralaksy mają dwa ustawienia — przewijania i przesuwania myszą.
Paralaksa na przewijaniu
Paralaksa przy ruchu myszy
W ustawieniach Paralaksy przy przewijaniu znajdź ustawienie Szybkość. Jeśli prędkość jest mniejsza niż 100%, element będzie poruszał się wolniej niż przewijana strona. Jeśli prędkość jest większa niż 100%, element będzie poruszał się szybciej niż przewijana strona.
W ustawieniach paralaksy podczas ruchu myszy odległość wzdłuż osi X i Y oznacza maksymalny efekt pochylenia paralaksy.
W ustawieniach paralaksy podczas ruchu myszy odległość wzdłuż osi X i Y oznacza maksymalny efekt pochylenia paralaksy.
Ustalenie
Podczas konfigurowania animacji naprawczej możesz wybrać, gdzie element zostanie naprawiony. Jest to obszar ekranu (góra, środek lub dół ekranu), w którym zaczyna się efekt naprawczy. Możesz wybrać jeden z trzech obszarów — na górze okna, środku okna lub na dole okna.
Przesunięcie wyzwalacza to punkt, w którym element zostanie unieruchomiony względem góry okna, środka okna lub dołu okna.
Odległość to odległość w pikselach, którą element powinien pokonać podczas animacji mocowania.
Przesunięcie wyzwalacza to punkt, w którym element zostanie unieruchomiony względem góry okna, środka okna lub dołu okna.
Odległość to odległość w pikselach, którą element powinien pokonać podczas animacji mocowania.
Zalecamy przeczytanie artykułu "Lepkie elementy w Zero Block", aby dowiedzieć się, jak stworzyć efekt naprawy i jak wygląda na stronie.
