Animacja artykułu badawczego w JavaScript. Obiecujące biblioteki JavaScript i wtyczki do animacji
Pod pojęciem „animacja” mamy na myśli najczęściej filmy animowane – czyli „kreskówki”, które kochamy od dzieciństwa. Ale jeśli się przyjrzysz Słownik, wówczas dowiadujemy się, że w tłumaczeniu z francuskiego oznacza „odrodzenie”, „animację”. I tutaj okazuje się, że to znaczenie zaskakująco trafnie pasuje nie tylko do branży filmowej, ale także technologii internetowych.
Zastosowanie różnorodnych efektów animacyjnych (przejścia, ruchy, transformacje itp.) znacząco „ożywia” stronę internetową, pozwala zapanować nad uwagą użytkownika, przesunąć ją na żądany element i nadać określone wskazówki wizualne.
Mówiąc o animacji, nie sposób nie wspomnieć o dobrze znanych 12 zasadach sformułowanych przez animatorów studia Disneya, których stosowanie jest niezwykle ważne dla rozsądnego i jakość użytkowania efekty animacji.
Mówiąc o technologiach umożliwiających wykorzystanie animacji na stronach internetowych, możemy wyróżnić kilka, ale być może żadna z nich nie jest tak potężna jak . Jeszcze kilka lat temu technologia animacji Flash była poważnym konkurentem i bardzo popularna. Ale teraz wygląda na to, że ona najlepsze lata pozostaje w tyle i jest stopniowo zastępowany na stronach internetowych przez wydajniejsze i bardziej elastyczne skrypty Java. A jeśli zdecydujesz się na poważne wykorzystanie animacji na swojej stronie internetowej, warto postawić na JavaScript. Aby dokonać mądrego wyboru biblioteki, dokonałem dzisiejszej recenzji.
Dynamics.jsZacznę od Dynamics.js. Jest to poważna i potężna biblioteka, która pozwala tworzyć fizycznie dokładne animacje (takie jak harmoniczne tłumione oscylacje wskazuje na strona główna strona). Biblioteka jest w stanie zarządzać właściwościami dowolnego elementu DOM. Dynamics.js służy do tworzenia menu, przycisków, wskaźników procesów, znaczników. W tym przypadku dostępna jest szeroka gama parametrów, takich jak częstotliwość, ubytek tłumienia, parametry charakteryzujące sprężystość czy czas trwania procesu, itp.
Cześć wszystkim! Tym artykułem otwieram serię publikacji na temat tworzenia animacji w czystym JavaScript.
Po co w ogóle animacje w czystym js?możesz być przerażony. Przecież bibliotek jest mnóstwo, na przykład nasza ulubiona jQuery. Tak właśnie jest, ale w takich sytuacjach przydaje się umiejętność pisania czystych animacji.
Dlatego zrozumienie sposobu organizacji animacji elementów z pewnością nie będzie zbyteczne. W tym artykule przyjrzymy się podstawowym technikom i najprostszy przykład- napiszmy funkcję, która płynnie ukryje element DOM, zmniejszając jego przezroczystość.
Prawdę mówiąc, takie podejście do proste animacje można już uznać za przestarzałe. Lepiej jest tworzyć animacje za pomocą CSS i za pomocą JavaScriptu kontroluj początek i koniec animacji.
Będziemy mieć dwa pliki: indeks.html i skrypt.js. Dokument HTML jest bardzo prosty:
JS #item (szerokość: 300 pikseli; wysokość: 200 pikseli; tło: #f9b; margines: 20 pikseli; )
Zrobiliśmy div 300x200 pikseli, wypełniliśmy go kolorem, nadaliśmy mu mały rozmiar margines i przypisany identyfikator=przedmiot. Na razie nic więcej nie potrzebujemy.
Organizacja animacji w JavaScript.Teraz zorganizujmy pracę w js. Najpierw dołączmy jakieś wydarzenie do naszego div:
// Po załadowaniu dokumentu window.onload = funkcja())( // Po kliknięciu elementu o id=item document.getElementById("item").onclick = funkcja())( // wyświetl alert alert( 1); ) )
Kilka komentarzy na temat tego projektu. Tradycyjnie umieszczamy cały kod JavaScript w funkcji ustawionej na zdarzenie window.onload. Czekamy zatem na ostateczne załadowanie dokumentu i utworzenie DOM - model obiektowy dokument.
Następnie za pomocą document.getElementById otrzymujemy div z id=item i ustawiamy zdarzenie onclick, które wywoła alert weryfikacyjny. Tak naprawdę zamiast alertu nieco później umieścimy tutaj wywołanie funkcji zanikania, nad którą teraz zaczniemy się zastanawiać.
Czego więc potrzebujemy do animacji? Spróbujmy od razu wymyślić interfejs dla funkcji, który w przyszłości sprawi, że będzie ona naprawdę wygodna! Otrzymasz coś takiego:
// Funkcja rozpuszczania elementu: // elem - obiekt DOM // t - czas animacji // f - liczba klatek na sekundę funkcja fade(elem, t, f)( // code)
Rzeczywiście każda animacja ma element, na którym jest tworzona, i czas, w którym widzimy płynne zmiany. Ale co z liczbami klatek na sekundę?
Tutaj najpierw musisz zrozumieć, jak ogólnie przebiega animacja. Animacja to po prostu skokowa zmiana zauważalnej wizualnie wartości w określonym przedziale czasu. Tą wartością jest dla nas właściwość opacity – przezroczystość elementu. I tworzymy przedział za pomocą standardu funkcje JavaScriptu- ustawinterwał.
Zatem ta funkcja przyjmuje jako drugi parametr czas w milisekundach, po którym musi powtórzyć wykonanie. Okazuje się, że jeśli napiszemy:
SetInterval(funkcja())(alarm(1); ), 20);
wtedy będziemy widzieć alert co 20 milisekund. A co jeśli napiszemy
SetInterval(funkcja())(alarm(1); ), 50);
następnie co 50 ms.
Bardzo łatwo odnosi się to do klatek na sekundę. W jednej sekundzie jest tysiąc milisekund, co oznacza, że jeśli chcemy pokazać osobie 50 klatek na sekundę, to 1000 / 50 = 20 ms – co 20 milisekund musimy powtarzać czynności w odstępie.
Bazując na powyższym możemy już zobrazować podstawowy kręgosłup naszej funkcji:
Funkcja fade(elem, t, f)( // klatek na sekundę (domyślnie 50) var fps = f || 50; // czas trwania animacji (domyślnie 500ms) var time = t || 500; var timer = setInterval (funkcja ())( // zmień krycie // jeśli animacja się zakończyła if(/* sprawdź */)( // usuń interwał wykonania clearInterval(timer); // i usuń element z obiegu dokumentu elem.style.display = „brak” ; ) ), (1000 / fps)); )
Konstrukcje var fps = f || 50 i var czas = t || 500 deklaruje parametry domyślne. Oznacza to, że jeśli podczas wywoływania nie przekażemy do funkcji drugiego i trzeciego elementu, to ich wartości będą wynosić odpowiednio 50 i 500.
Sam projekt organizacji setInterval jest również logiczny. Ustawiamy interwał z częstotliwością 1000/fps. Po zakończeniu animacji musimy usunąć ten interwał.
Zwróć uwagę na linię elem.style.display = "none"! Ta instrukcja jest konieczna, aby po zresetowaniu krycia elementu do zera zwolniło się miejsce. Jeśli tego nie zrobisz, element nie będzie widoczny, ale jego miejsce pozostanie puste - dolne elementy nie będą się tam przesuwać.
To prawie gotowe! Pozostaje nam tylko dodać zmianę do widocznej właściwości i sprawdzić zakończenie animacji.
Jak prawidłowo zorganizować zmianę właściwości nieprzezroczystości. Matematyka jest tutaj podstawowa. Mamy czas i klatki na sekundę. Przykładowo czas = 2000 i ilość klatek na sekundę fps = 50. fps = 50 oznacza, że będziemy wyświetlać klatkę co 1000/fps milisekund, czyli: 1000 / 50 = 20.
Oznacza to, że w sumie pokażemy użytkownikowi n = czas / (1000 / fps) = 2000 / (1000 / 50) = 1000 klatek. Okazuje się, że musimy także zmienić wartość właściwości opacity 1000 razy. Przypomnijmy, że nieprzezroczystość zmienia się od x0 = 0 do x1 = 1. Ogólny wzór to dx = (x1 - x0) / (czas / (1000 / fps)). Mówiąc prościej, dzielimy 1 przez 1000 i otrzymujemy 0,001.
Umieśćmy to wszystko w kodzie:
Funkcja fade(elem, t, f)( // klatek na sekundę (domyślnie 50) var fps = f || 50; // czas trwania animacji (domyślnie 500ms) var time = t || 500; // ile łącznie pokaż klatki var kroki = czas / (1000 / fps); // bieżąca wartość krycia - początkowo 0 var op = 1; // zmień przezroczystość na klatkę var d0 = op / kroki; // ustaw interwał (1000 / fps) / / na przykład 50fps -> 1000 / 50 = 20 ms var timer = setInterval(function())( // zmniejsz bieżącą wartość krycia op -= d0; // ustaw krycie elementu DOM elem.style.opacity = op; // zmniejsz liczbę pozostałych kroków animacji--; // jeśli animacja się zakończy if(steps