Zero Block: Animacja krok po kroku

Istnieją dwa tryby animacji w Zero Block:

1) Animacja podstawowa to prosta animacja. Są to gotowe, najczęściej używane efekty, takie jak efekt wyglądu (przez krycie, od dołu do góry, od prawej do lewej itp.), paralaksa i utrwalanie. Są one wystarczające w 90% przypadków.

Przewodnik po podstawowej animacji →

2) Animacja krok po kroku pozwala urzeczywistnić jasne, kreatywne pomysły - w sposób, w jaki chcesz.

Sprawdź różne przykłady tego, co można osiągnąć za pomocą animacji krok po kroku.

Narzędzie animacji krok po kroku jest dostępne w Zero Block, edytorze stron internetowych przeznaczonym dla profesjonalnych projektantów. Dodaj stronę Zero Block do strony, wybierając ją w bibliotece bloków (tuż pod kategorią "Inne") lub klikając na Zero Block u dołu strony.

Kliknij Edytuj blok w lewym górnym rogu strony Zero Block , aby go dostosować.

Dodaj nowy element, wybierz go, otwórz panel Ustawienia, przewiń w dół do sekcji "Animacja krok po kroku" i kliknij Dodaj.

Utworzenie animacji krok po kroku dla elementu spowoduje anulowanie wszystkich ustawień animacji podstawowej dla tego elementu.

Tworzenie animacji krok po kroku można rozpocząć od wybrania zdarzenia - warunku rozpoczęcia odtwarzania animacji. Do wyboru jest pięć warunków:

• Element na ekranie - animacja rozpoczyna odtwarzanie, gdy tylko określony element pojawi się na ekranie;
• Blok na ekranie - animacja rozpoczyna się, gdy na ekranie pojawi się cały blok;
• Podczas przewijania - rozpoczyna się odtwarzanie animacji, która jest kontynuowana podczas przewijania;
• Po najechaniu kursorem - animacja zaczyna być odtwarzana po najechaniu kursorem;
• Po kliknięciu - animacja zaczyna być odtwarzana po kliknięciu.

Punkt początkowy animacji ma trzy dodatkowe opcje: Start Trigger, Loop i Trigger Offset.

• Wyzwalacz początkowy to obszar lub element, który uruchomi animację. Do wyboru są trzy obszary: na górze okna, na środku okna lub na dole okna;
• Przesunięcie wyzwalacza to przesunięcie punktu początkowego animacji względem wybranego górnego, środkowego lub dolnego okna;
• Pętla służy do ustawiania animacji do odtwarzania w pętli.

Możesz przetestować animację, wybrany element lub wszystkie elementy w bloku, klikając przycisk Odtwórz element lub Odtwórz wszystko.

Pierwszy krok został ustawiony domyślnie. Nazywa się Start. Dodaj kroki i zmień właściwości elementu na każdym kroku. Spowoduje to zmianę elementu.

Aby dodać krok, kliknij przycisk Dodaj krok.

Można przełączać się między krokami. Obramowanie elementu zmieniające kolor na niebieski oznacza, że element znajduje się w pierwotnym położeniu, natomiast obramowanie elementu zmieniające kolor na zielony oznacza, że krok jest edytowany.

Każdy krok ma zestaw właściwości, takich jakCzas trwania,Przesunięcie , Skala, Krycie, Obrót, Łagodzenie i Opóźnienie.

Czas trwania to czas trwania animacji w sekundach.
Przesunięcie to współrzędne, w których element jest przesuwany względem pierwotnej pozycji. Aby je skonfigurować, możesz przypisać wartości lub przesunąć element.
Scale to stopień zwiększenia lub zmniejszenia elementu do końca kroku.
Opacity to wartość przezroczystości elementu do końca kroku.
Rotate to obrót elementu w stopniach do końca kroku.
Easing to opcja wyboru efektu animacji: Linear (liniowe wykonanie animacji); easeIn, easeOut, easeInOut (spowolnienie na początku, na końcu lub zarówno na początku, jak i na końcu animacji); bounceFin (małe odbicie elementu na końcu animacji).
Delay to czas trwania pauzy przed rozpoczęciem odtwarzania animacji.

Przyjrzyjmy się, jak przesunąć ten żółty kwadrat o 550 pikseli w prawo, przeskalować go w dół podczas ruchu i powrócić do pierwotnej pozycji.

Oto przewodnik krok po kroku z naszymi komentarzami poniżej:

Oprócz przycisków "Odtwórz element" i "Odtwórz wszystko" można również wyświetlić podgląd animacji.

Otwórz dwie karty w przeglądarce: Zero Block i tę samą stronę w trybie podglądu.

Po kliknięciu przycisku Zapisz na stronie Zero Block, zmiany będą widoczne na stronie podglądu po jej odświeżeniu.