Zero Block: animacja krok po kroku

W Zero Block dostępne są dwa tryby animacji:

1) Podstawowa animacja to prosta animacja. Są to gotowe, najczęściej używane efekty, takie jak efekt wyglądu (poprzez 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 podstawowych → animacji

2) Animacja krok po kroku pozwala urzeczywistnić błyskotliwe, kreatywne pomysły — w wybrany sposób.

Zapoznaj się z różnymi przykładami tego, co możesz osiągnąć za pomocą animacji krok po kroku.

Narzędzie do animacji krok po kroku jest dostępne w Zero Block, edytorze internetowym skierowanym do profesjonalnych projektantów. Dodaj Zero Block do strony, wybierając go w Bibliotece bloków (tuż pod kategorią "Inne") lub kliknij Zero Block u dołu strony.

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

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

Utworzenie animacji krok po kroku dla elementu anuluje wszystkie ustawienia podstawowej animacji dla tego elementu.

Rozpocznij tworzenie animacji krok po kroku, wybierając zdarzenie — warunek rozpoczęcia odtwarzania animacji. Do wyboru jest pięć warunków:

• Element na ekranie — animacja rozpoczyna się natychmiast po pojawieniu się określonego elementu na ekranie;
• Blokuj na ekranie — animacja rozpoczyna się po pojawieniu się na ekranie całego bloku;
• Na przewijaniu — animacja rozpoczyna się i 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.

• Start Trigger to obszar lub rzecz, która uruchomi animację. Wybierz jeden z trzech obszarów: na górze okna, na środku okna lub na dole okna;
• Przesunięcie wyzwalacza to przesunięcie punktu początkowego animacji do wybranego Górnego okna, Środkowego okna lub Dolnego okna;
• Pętla służy do ustawiania animacji do odtwarzania w pętli.

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

Pierwszy krok został ustawiony domyślnie. Nazywa się Początek. Dodawaj kroki i zmieniaj właściwości elementów na każdym etapie. Spowoduje to zmianę elementu.

Aby dodać krok, kliknij Dodaj krok.

Możesz przełączać się między krokami. Zmiana koloru obramowania elementu na niebieski oznacza, że element znajduje się w swojej pierwotnej pozycji, a zmiana koloru obramowania elementu na zielony oznacza, że krok jest edytowany.

Każdy krok ma zestaw właściwości, takich jak Czas trwania, Przeniesienie, Skala, Krycie, Obrót, Złagodzenie i Opóźnienie.

Czas trwania to czas trwania animacji w sekundach.
Move to współrzędne, w których element jest przesuwany względem jego pierwotnego położenia. Aby je skonfigurować, możesz przypisać wartości lub przenieść element.
Skala to stopień zwiększenia lub zmniejszenia elementu pod koniec kroku.
Krycie to wartość przezroczystości elementu na końcu kroku.
Obrót to obrót elementu w stopniach pod koniec kroku.
Złagodzenie to opcja wyboru efektu animacji: Liniowy (wykonanie animacji liniowej); easeIn, easeOut, easeInOut (spowolnienie na początku, końcu lub na początku i na końcu animacji); bounceFin (małe odbicie elementu na końcu animacji).
Opóźnienie to czas trwania przerwy przed rozpoczęciem odtwarzania animacji.

Przyjrzyjmy się, jak przesunąć ten żółty kwadrat o 550 pikseli w prawo, zmniejszyć go w 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żesz także wyświetlić podgląd animacji.

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

Więc po kliknięciu Zapisz w Zero Block, zobaczysz zmiany na stronie podglądu po jej odświeżeniu.