Jak tworzyć piękne animowane animacje internetowe za pomocą Mo.JS

Jeśli chcesz założyć własną stronę internetową, piękne animacje mogą ją zabłysnąć. Istnieje wiele sposobów na osiągnięcie tego, od zwykłego tworzenia animowanego GIF-a z fragmentu istniejącego filmu, po naukę samodzielnego tworzenia od podstaw za pomocą oprogramowania takiego jak Blender lub Maya.

Dostępne są również biblioteki do programowego tworzenia animacji. Historycznie, kodery WWW używały jQuery do tworzenia prostych animacji, ale w miarę rozwoju sieci i HTML5 stał się nowym standardem, pojawiły się nowe opcje. Biblioteki CSS do animacji stały się niesamowicie potężne w nowej strukturze, a także biblioteki JavaScript zaprojektowane specjalnie do animacji wektorowych w przeglądarce.

Dzisiaj przyjrzymy się mo.js, jednemu z nowszych dzieciaków w bloku do tworzenia pięknych zdjęć z kodu. Omówimy kilka podstawowych funkcji, zanim stworzymy reaktywną serię animacji tworzącą piękne wzory.

Wpisz Mo.js

Mo.js to biblioteka do łatwego tworzenia grafiki ruchu w Internecie. Zaprojektowano go tak, aby tworzenie pięknych rzeczy było proste dla tych, którzy nie znają się na kodowaniu, a jednocześnie pozwalając doświadczonym programistom odkryć stronę artystyczną, o której istnieniu nie mieli pojęcia. Jak sama nazwa wskazuje, jest oparty na popularnym języku programowania JavaScript, chociaż jest zaimplementowany w taki sposób, że każdy może łatwo poznać podstawy.

Zanim przejdziemy dalej, rzućmy okiem na to, co dzisiaj stworzymy:

Będziemy używać CodePen do dzisiejszego projektu, ponieważ pozwala nam pracować nad wszystkim w tym samym oknie przeglądarki. Jeśli wolisz, możesz zamiast tego pracować w wybranym edytorze. Jeśli chcesz pominąć samouczek krok po kroku, pełny kod jest dostępny tutaj.

Skonfiguruj nowe pióro, a powitamy Cię tym ekranem:

Zanim zaczniemy, musisz wprowadzić kilka zmian. Kliknij na Ustawienia ikonę w prawym górnym rogu i przejdź do JavaScript patka.

Będziemy używać Babel jako nasz wstępny procesor kodu, wybierz go z menu rozwijanego. Babel sprawia, że ​​JavaScript jest nieco łatwiejszy do zrozumienia, wraz z udostępnianiem ECMAScript 6 Co to jest ES6 i co programiści Javascript muszą wiedzieć, co to jest ES6 i co programiści Javascript muszą wiedzieć ES6 odnosi się do wersji 6 języka programowania ECMA Script (Javascript). Spójrzmy teraz na kilka głównych zmian, które ES6 wprowadza do JavaScript. obsługa starszych przeglądarek. Jeśli nie wiesz co to znaczy, nie martw się, to tylko ułatwi nam życie.

Musimy również zaimportować bibliotekę mo.js do projektu. Zrób to, szukając mo.js w Dodaj zewnętrzne skrypty / pióra monit tekstowy i wybranie go.

Po ustawieniu tych dwóch rzeczy kliknij Zapisz i zamknij. Jesteśmy gotowi, aby zacząć!

Podstawowe kształty z Mo.js

Zanim zaczniemy z grafiką, zróbmy coś z tym oślepiającym białym tłem w okienku widoku. Zmień właściwość koloru tła, pisząc ten kod w CSS szkło.

body background: rgba (11,11,11,1); 

Tworzenie kształtu jest prostym procesem, a koncepcja leżąca u jego podstaw napędza całą bibliotekę. Ustawmy domyślny kształt koła. Wpisz ten kod w JS szkło:

const redCirc = new mojs.Shape (isShowStart: true);

Tutaj stworzyliśmy const wartość z nazwą redCirc i przypisał go do nowe mojs.Shape. Jeśli jesteś zupełnie nowy w kodowaniu, zwróć uwagę na kolejność nawiasów tutaj i nie zapomnij o średniku na końcu!

Do tej pory nie przekazaliśmy żadnych parametrów oprócz isShowStart: true, co oznacza, że ​​pojawi się na ekranie, nawet zanim przypisamy mu jakikolwiek ruch. Zobaczysz, że umieścił różowy okrąg na środku ekranu:

Ten krąg jest domyślny Kształt dla mo.js. Możemy łatwo zmienić ten kształt, dodając wiersz do naszego kodu:

const redCirc = new mojs.Shape (isShowStart: true, shape: 'rect');

Aby dodać więcej właściwości do obiektu, używamy przecinka, aby go rozdzielić. Tutaj dodaliśmy kształt i zdefiniował ją jako „rect”. Zapisz pióro, a zobaczysz, że domyślny kształt zmienia się w kwadrat.

Ten proces przekazywania wartości do Kształt celem jest to, jak je dostosowujemy. W tej chwili mamy kwadrat, który tak naprawdę niewiele robi. Spróbujmy coś animować.

Podstawy ruchu

Aby uzyskać coś, co wygląda nieco bardziej imponująco, ustawmy koło z czerwonym obrysem wokół niego i bez wypełnienia w środku.

const redCirc = new mojs.Shape (isShowStart: true, stroke: 'red', strokeWidth: 5, fill: 'none', radius: 15);

Jak widać, przypisaliśmy również szerokość wartość obrysu oraz promień dla koła. Sprawy już zaczynają wyglądać trochę inaczej. Jeśli Twój kształt nie jest aktualizowany, upewnij się, że nie przegapiłeś żadnych przecinków ani pojedynczych cudzysłowów 'czerwony' lub 'Żaden', i upewnij się, że kliknąłeś zapisać na górze strony.

Dodajmy do tego animację. W powyższym przykładzie to czerwone kółko pojawia się tam, gdzie użytkownik klika, zanim zniknie na zewnątrz. Jednym ze sposobów, w jaki możemy to osiągnąć, jest zmiana promienia i krycia w czasie. Zmodyfikujmy kod:

 promień: 15:30, krycie: 1: 0, czas trwania: 1000

Zmieniając promień właściwość i dodawanie nieprzezroczystość i Trwanie właściwości, podaliśmy instrukcje kształtu do wykonania w miarę upływu czasu. To są Delta obiekty, przechowujące informacje o początku i końcu tych właściwości.

Zauważysz, że nic się jeszcze nie dzieje. Jest tak, ponieważ nie dodaliśmy .grać() funkcja, aby nakazać wykonanie naszych instrukcji. Dodaj go między nawiasami końcowymi a średnikiem, a zobaczysz, że twoje koło ożywa.

Teraz gdzieś się znajdujemy, ale aby było naprawdę wyjątkowe, spójrzmy na kilka bardziej szczegółowych możliwości.

Zamawianie i ułatwianie dzięki Mo.js

W tej chwili, gdy tylko koło się pojawi, zaczyna znikać. Będzie to działać idealnie dobrze, ale byłoby miło mieć trochę więcej kontroli.

Możemy to zrobić za pomocą .następnie() funkcjonować. Zamiast zmieniać nasz promień lub krycie, sprawmy, by nasz kształt pozostał na początku, zanim zmieni się po określonym czasie.

const redCirc = new mojs.Shape (isShowStart: true, stroke: 'red', strokeWidth: 5, fill: 'none', promień: 15, czas trwania: 1000). następnie (// tutaj więcej rzeczy) .grać();

Teraz nasz kształt pojawi się z przypisanymi mu wartościami, odczekaj 1000 ms, zanim wykonasz cokolwiek, co wstawimy do .następnie() funkcjonować. Dodajmy instrukcje między nawiasami:

 // zrób więcej rzeczy tutaj strokeWidth: 0, scale: 1: 2, easing: 'sin.in', czas trwania: 500

Ten kod wprowadza kolejną ważną część animacji. Gdzie poinstruowaliśmy skala aby zmienić z 1 na 2, przypisaliśmy również łagodzenie oparte na fali sinusoidalnej za pomocą sin.in. Mo.js ma wbudowane różne krzywe łagodzenia, z możliwością dodawania własnych przez zaawansowanych użytkowników. W tym przypadku skala w czasie zachodzi zgodnie z falą sinusoidalną zakrzywioną do góry.

Aby zobaczyć wizualnie zestawienie różnych krzywych, odwiedź easings.net. Połącz to z strokeWidth zmienia się na 0 w ciągu naszego ustawionego czasu, a ty masz znacznie bardziej dynamiczny efekt znikania.

Kształty są podstawą wszystkiego w Mo.js, ale to dopiero początek historii. Spójrzmy na Wybuchy.

Rozerwanie z potencjałem w Mo.js

ZA Rozerwanie w Mo.js to zbiór kształtów emanujących z centralnego punktu. Zamierzamy uczynić z nich podstawę naszej ukończonej animacji. Możesz wywołać domyślną serię w taki sam sposób, jak robisz kształt. Zróbmy kilka iskier:

const sparks = new mojs.Burst (). play ();

Możesz to zobaczyć, dodając pusty Rozerwanie obiekt i każąc mu grać, otrzymujemy domyślny efekt serii. Możemy wpływać na rozmiar i rotację serii poprzez jej animację promień i kąt nieruchomości:

const sparks = new mojs.Burst (promień: 0:30, easing: 'cubic.out', kąt: 0: 90, easing: 'quad.out',). play ();

Już dodaliśmy niestandardowy promień i obrót do naszej serii:

Aby wyglądały bardziej jak iskry, zmieńmy kształty, których używa seria, i ile kształtów generuje seria. Robisz to, zwracając uwagę na właściwości dzieci wybuchu.

const sparks = new mojs.Burst (promień: 0:30, easing: 'cubic.out', kąt: 0: 90, easing: 'quad.out', liczba: 50, dzieci: shape: „krzyż”, obrys: „biały”, punkty: 12, promień: 10, wypełnienie: „brak”, kąt: 0: 360, czas trwania: 300). play ();

Zauważysz, że właściwości potomne są takie same jak właściwości kształtu, z którymi już pracowaliśmy. Tym razem jako kształt wybraliśmy krzyż. Wszystkie 50 tych kształtów ma teraz te same właściwości. Zaczyna wyglądać całkiem nieźle! To pierwsza rzecz, którą zobaczy użytkownik po kliknięciu myszą.

Już widzimy, że czerwony skok naszego inicjału redCirc kształt pozostaje zbyt długo. Spróbuj zmienić czas jego trwania, aby obie animacje pasowały do ​​siebie. Powinno to wyglądać mniej więcej tak:

Nasza animacja nie jest jeszcze skończona, ale poświęćmy chwilę, aby uczynić ją reaktywną dla użytkownika.

Główne wydarzenie

Będziemy używać modułu obsługi zdarzeń do uruchamiania naszych animacji w miejscu klikniętym przez użytkownika. Na końcu bloku kodu dodaj:

document.addEventListener („kliknięcie”, funkcja (e) );

Ten fragment kodu nasłuchuje kliknięć myszą i wykonuje instrukcje podane w nawiasach. Możemy dodać nasz redCirc i iskry obiekty do tego odbiornika.

document.addEventListener („kliknięcie”, funkcja (e) redCirc .tune (x: e.pageX, y: e.pageY,) .replay (); iskier .tune (x: e.pageX, y: e.pageY) .replay (););

Dwie funkcje, które tu nazywamy, to: .melodia() i .powtórna rozgrywka(). Funkcja powtórzenia jest podobna do funkcji odtwarzania, ale określa, że ​​animacja powinna zaczynać się od początku za każdym razem, gdy zostanie kliknięta.

The melodia funkcja przekazuje wartości do naszego obiektu, dzięki czemu można zmieniać rzeczy po uruchomieniu. W tym przypadku przekazujemy współrzędne strony, w której kliknięto myszą, i odpowiednio przypisujemy pozycję xiy naszej animacji. Zapisz kod i spróbuj kliknąć na ekranie. Zauważysz kilka problemów.

Po pierwsze, nasza początkowa animacja nadal pojawia się na środku ekranu, nawet jeśli użytkownik niczego nie kliknie. Po drugie, animacja nie jest uruchamiana w punkcie myszy, lecz przesunięta w dół i w prawo. Możemy łatwo naprawić obie te rzeczy.

Nasz kształt i seria mają .grać() na końcu odpowiednich bloków kodu. Nie potrzebujemy tego już jako .powtórna rozgrywka() jest wywoływany w module obsługi zdarzeń. Możesz usunąć .play () z obu bloków kodu. Z tego samego powodu możesz usunąć isShowStart: true też, ponieważ nie musimy już tego pokazywać na początku.

Aby rozwiązać problem z pozycjonowaniem, musimy ustawić wartości pozycji dla naszych obiektów. Jak pamiętacie z pierwszego kształtu, mo.js domyślnie umieszcza je na środku strony. Po połączeniu tych wartości z pozycją myszy tworzy przesunięcie. Aby pozbyć się tego przesunięcia, po prostu dodaj te linie do obu redCirc i iskry obiekty:

po lewej: 0, u góry: 0,

Teraz jedynymi wartościami pozycji, które przyjmują nasze obiekty, są wartości pozycji myszy przekazywane przez detektor zdarzeń. Teraz wszystko powinno działać znacznie lepiej.

Ten proces dodawania obiektów do modułu obsługi zdarzeń jest sposobem, w jaki wyzwalamy wszystkie nasze animacje, więc pamiętaj, aby od teraz dodawać do niego każdy nowy obiekt! Teraz, gdy mamy podstawy działające tak, jak chcemy, dodajmy kilka większych i jaśniejszych serii.

Pierwsze psychodeliczne

Zacznijmy od wirujących trójkątów. Pomysł polegał na stworzeniu hipnotycznego efektu stroboskopowego, a konfiguracja tego jest naprawdę łatwa. Dodaj kolejną serię z tymi parametrami:

const triangles = new mojs.Burst (promień: 0: 1000, easing: 'cubic.out', kąt: 1080: 0, easing: 'quad.out', po lewej: 0, góra: 0, liczba : 20, dzieci: kształt: „wielokąt”, punkty: 3, promień: 10: 100, wypełnienie: [„czerwony”, „żółty”, „niebieski”, „zielony”], czas trwania: 3000) ;

Wszystko tutaj powinno być już dość znane, choć jest kilka nowych punktów. Zauważysz, że zamiast definiować kształt jako trójkąt, nazwaliśmy go wielokąt przed przypisaniem liczby zwrotnica ma jako 3.

Daliśmy również napełnić funkcja tablicy kolorów do pracy, co piąty trójkąt zmieni się z powrotem w czerwony, a wzór będzie kontynuowany. Wysoka wartość kąt Ustawienie powoduje, że seria wiruje wystarczająco szybko, aby uzyskać efekt stroboskopowy.

Jeśli kod nie działa dla Ciebie, upewnij się, że dodałeś obiekt trójkątów do klasy detektora zdarzeń, tak jak to zrobiliśmy z poprzednimi obiektami.

Całkiem psychodeliczny! Dodajmy kolejną serię, aby za nią podążać.

Tańczące Pentagony

Możemy użyć czegoś prawie identycznego z naszym trójkąty obiekt, aby wykonać serię, która następuje po nim. Ten nieznacznie zmodyfikowany kod wytwarza jaskrawo kolorowe zachodzące na siebie sześciokąty:

const pentagons = new mojs.Burst (promień: 0: 1000, easing: 'cubic.out', kąt: 0: 720, easing: 'quad.out', po lewej: 0, góra: 0, liczba : 20, dzieci: kształt: „wielokąt”, promień: 1: 300, punkty: 5, wypełnienie: [„fioletowy”, „różowy”, „żółty”, „zielony”], opóźnienie: 500, czas trwania: 3000);

Główną zmianą tutaj jest to, że dodaliśmy opóźnienie 500ms, aby seria nie rozpoczęła się po trójkącie. Zmieniając kilka wartości, chodziło tutaj o to, aby seria obracała się w kierunku przeciwnym do trójkątów. Przez szczęśliwy przypadek, zanim pojawią się pięciokąty, efekt stroboskopowy trójkątów sprawia, że ​​wygląda na to, że wirują razem.

Trochę przypadkowości

Dodajmy efekt, który wykorzystuje losowe wartości. Utwórz serię z tymi właściwościami:

const redSparks = new mojs.Burst (left: 0, top: 0, count: 8, radius: 150: 350, angle: 0:90, easing: 'cubic.out', children: shape: „linia”, obrys: „czerwony”: „przezroczysty”, obrys Szerokość: 5, skala X: 0,5: 0, stopień Przesunięcie: „rand (-90, 90)”, promień: „rand (20, 300)” , czas trwania: 500, opóźnienie: „rand (0, 150)”,);

Ta seria utworzy linie, które zaczynają się na czerwono i blakną do przezroczystości, zmniejszając się z czasem. Co sprawia, że ​​ten komponent jest interesujący, to że losowe wartości są używane do określenia niektórych jego właściwości.

The shiftShift daje obiektowi dzieckiem kąt początkowy. Losując to, daje zupełnie inną serię przy każdym kliknięciu. Wartości losowe są również używane dla promień i opóźnienie funkcje zwiększające efekt chaosu.

Oto efekt sam w sobie:

Ponieważ używamy tutaj losowych wartości, musimy dodać dodatkową metodę do naszego modułu obsługi zdarzeń dla obiektu:

redSparks .tune (x: e.pageX, y: e.pageY) .replay () .generate ();

The Generować() funkcja oblicza świeże losowe wartości przy każdym wywołaniu zdarzenia. Bez tego kształt wybierałby losowe wartości przy pierwszym wywołaniu i kontynuowałby używanie tych wartości przy każdym kolejnym wywołaniu. To całkowicie zrujnowałoby efekt, więc upewnij się, że to dodasz!

Możesz użyć losowych wartości dla prawie każdego elementu obiektów mo.js i są one prostym sposobem na tworzenie unikalnych animacji.

Losowość nie jest jednak jedynym sposobem na dodanie dynamicznych ruchów do animacji. Spójrzmy na zataczać się funkcjonować.

Zataczające się linie

Aby pokazać, jak zataczać się funkcja działa, zrobimy coś trochę jak Catherine Wheel. Utwórz nową serię z tymi parametrami:

const lines = new mojs.Burst (promień: 0: 1000, easing: 'cubic.out', kąt: 0: 1440, easing: 'cubic.out', po lewej: 0, góra: 0, liczba : 50, dzieci: kształt: „linia”, promień: 1: 100, wygładzanie: „elastic.out”, wypełnienie: „brak”, obrys: [„czerwony”, „pomarańczowy”], opóźnienie: „przestawienie (10) ”, czas trwania: 1000);

Wszystko tutaj jest już znane, wybuch powoduje 50 dzieci, które są czerwonymi lub pomarańczowymi liniami. Różnica polega na tym, że mijamy opóźnienie właściwość a zataczanie się (10) funkcjonować. Dodaje to 10 ms opóźnienia między emisją każdego dziecka, nadając mu efekt wirowania, którego szukamy.

Funkcja przestawiania nie korzysta z żadnych losowych wartości, więc nie będziesz jej potrzebować Generować Tym razem funkcja w module obsługi zdarzeń. Zobaczmy, co mamy do tej pory w akcji:

Z łatwością moglibyśmy się tutaj zatrzymać, ale dodajmy jeszcze jedną serię, aby zakończyć ten projekt.

Inteligentne kwadraty

Dla tej ostatniej serii zróbmy coś przy użyciu prostokątów. Dodaj ten obiekt do detektora kodów i zdarzeń:

const redSquares = new mojs.Burst (promień: 0: 1000, easing: 'cubic.out', kąt: 360: 0, easing: 'quad.out', po lewej: 0, góra: 0, liczba : 20, dzieci: kształt: „prostokąt”, promień X: 1: 1000, promień Y: 50, punkty: 5, wypełnienie: „brak”, obrys: „czerwony”: „pomarańczowy”, strokeWidth: 5 : 15, opóźnienie: 1000, czas trwania: 3000);

Ten obiekt nie dodaje nic nowego do tego, nad czym już dzisiaj pracowaliśmy, jest tylko pokazany, jak można łatwo tworzyć złożone wzory geometryczne za pomocą kodu.

Nie był to zamierzony wynik tego obiektu, gdy został on utworzony na etapie testowania pisania tego samouczka. Po uruchomieniu kodu stało się jasne, że natknąłem się na coś znacznie piękniejszego, niż mogłem celowo zrobić!

Po dodaniu tego ostatniego obiektu jesteśmy skończeni. Zobaczmy wszystko w akcji.

Mo.js: Potężne narzędzie do animacji internetowych

To proste wprowadzenie do mo.js obejmuje podstawowe narzędzia potrzebne do tworzenia pięknych animacji. Sposób użycia tych narzędzi może tworzyć prawie wszystko, a dla wielu zadań biblioteki internetowe są prostą alternatywą do korzystania z Photoshopa, After Effects lub innego kosztownego oprogramowania.

Ta biblioteka jest przydatna dla osób pracujących zarówno w programowaniu, jak i tworzeniu stron internetowych. Programowanie a tworzenie stron internetowych: jaka jest różnica? Programowanie a tworzenie stron internetowych: jaka jest różnica? Można by pomyśleć, że programiści aplikacji i programiści wykonują tę samą pracę, ale nie jest to prawdą. Oto kluczowe różnice między programistami i twórcami stron internetowych. , obsługa zdarzeń zastosowana w projekcie może być łatwo wykorzystana do tworzenia reaktywnych przycisków i tekstu na stronach internetowych lub w aplikacjach. Baw się dobrze: nie ma błędów, tylko szczęśliwe wypadki!