Co to jest animacja JavaScript

Animacje JavaScript są tworzone poprzez wprowadzenie zmian w programowaniu przyrostowym w stylu elementu. Te animacje mają zdolność wykonywania zadania, którego CSS nie może wykonać samodzielnie. DOM jest znany jako Model Object Document, a cały dokument HTML jest reprezentowany przez obiekt dokumentu. Zgodnie z równaniem logicznym lub funkcją możesz przesunąć kilka elementów DOM na stronie za pomocą JavaScript.

W tym poście dowiesz się o podstawach związanych z animacją JavaScript, wykorzystując prosty przykład. A więc zacznijmy!

Funkcje używane do tworzenia animacji JavaScript

W JavaScript istnieją trzy funkcje powszechnie używane do tworzenia animacji.To są:

• Settimeout (funkcja, czas trwania): Global Settimeout () Funkcja ustawia timer, który wykonuje funkcję lub określony kawałek kodu po pewnym opóźnieniu lub czasie trwania.
• cleartimeout (settimeout_variable): cleartimeout () funkcja służy do wyczyszczenia timera ustalonego przez settimeout ().
• setInterval (funkcja, czas trwania): setInterval () Funkcja ustawia timer, który wielokrotnie wykonuje funkcję lub kawałek kodu zgodnie z określonym czasem trwania.

Weźmy prosty przykład tworzenia animacji JavaScript, aby zrozumieć, jak to działa.

Jak stworzyć animację JavaScript

W tym przykładzie utworzymy stronę internetową animacji JavaScript za pomocą HTML. Aby to zrobić, przede wszystkim utworzymy plik HTML o nazwie „Animation_js.html ”.

W tym pliku HTML dodamy przycisk nazwany "Przenosić" i dodaj dwa pojemniki o nazwie „kontener” i „JavaScriptaniMation". Po pierwsze „pojemnik”, Ustawimy jego właściwości, takie jak wysokość, szerokość, pozycja, tło, promień graniczny i wyświetlacz. Ponadto ustawimy to „Pozycja” jako „względna” co wskazuje, że ten pojemnik jest ustawiany normalnie.

Podobnie określamy wartości dla właściwości szerokości, wysokości i koloru tła „JavaScriptaniMation„Pojemnik, jednocześnie ustawiając „Pozycja” jako „absolutna”. Po tym pojemnik zostanie umieszczony do najbliższego przodka:

Następnie wewnątrz etykietka, zdefiniujemy "animacja()" funkcja, która zostanie wywołana, gdy użytkownik kliknie "Przenosić" przycisk. Ten "animacja()" Funkcja najpierw przyniesie „JavaScriptaniMation” Element HTML. Następnie przypisamy „ID” do funkcji „ClearInterval ()”, który wywołuje Funkcja „ramka ()” po „5” milisekund.

w Funkcja „ramka ()”, Liczba ram będzie ustawiona na sekundę. Jeśli pozycja elementu osiągnie 305px, a później „ClearInterval ()” funkcja usuwa to w przeciwnym razie pobierany html „JavaScriptaniMation” Element porusza się na górze i porusza się zgodnie z Wartość „pozycji”:

Oto fragment kodu skryptu:

Wykonanie powyższego programu JavaScript wyświetli następujące dane wyjściowe:

Następnie kliknij „Przenosić”Przycisk, aby wyświetlić utworzoną animację JavaScript:

To były wszystkie istotne informacje związane z animacją JavaScript. Możesz dalej odkrywać zgodnie z wymaganiami.

Wniosek

Animacja jest znana jako symulacja ruchu wykonana przez serię obrazów. Animacje JavaScript są tworzone przez dokonanie małych modyfikacji programowania w stylu elementu. W JavaScript możesz tworzyć animacje za pomocą trzech najczęściej używanych funkcji wymienionych settimeout (), setInterval () i cleartimeout (). W tym poście omówiliśmy animację JavaScript i jej powiązane funkcje za pomocą prostego przykładu.