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

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

Jeśli chcesz załóż własną stronę internetową , pięknie wyglądające animacje mogą sprawić, że będzie błyszczeć. Istnieje wiele sposobów, aby to osiągnąć, po prostu tworzenie animowanego GIF-a od kawałka istniejącego filmu, po naukę tworzenia własnego od podstaw z oprogramowaniem takim jak Mikser lub Majowie .





Dostępne są również biblioteki do programowego tworzenia animacji. Historycznie, programiści stron internetowych używali jQuery do tworzenia prostych animacji, ale wraz z rozwojem sieci i HTML5 stał się nowym standardem, pojawiły się nowe opcje. Biblioteki CSS do animacji stały się niesamowicie wydajne w ramach nowego frameworka, wraz z bibliotekami JavaScript zaprojektowanymi specjalnie do animacji wektorowych w przeglądarce.



Dzisiaj przyjrzymy się mo.js, jednemu z nowszych dzieci w bloku do tworzenia pięknych obrazów z kodu. Omówimy kilka podstawowych funkcji, zanim stworzymy serię animacji reagujących na użytkownika, która tworzy piękne wzory.





Wpisz Mo.js

Mo.js to biblioteka do łatwego tworzenia ruchomych grafik w sieci. Został zaprojektowany, aby ułatwić tworzenie pięknych rzeczy dla tych, którzy nie są zbyt obeznani z kodem, jednocześnie pozwalając doświadczonym programistom odkryć stronę artystyczną, o której istnieniu nigdy nie wiedzieli. Jak sama nazwa wskazuje, jest oparty na popularnym języku programowania JavaScript , choć jest zaimplementowany w taki sposób, aby każdy mógł łatwo opanować podstawy.

Zanim przejdziemy dalej, spójrzmy, 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 pracować w wybrany przez Ciebie edytor zamiast. Jeśli chcesz pominąć samouczek krok po kroku, pełny kod jest dostępny tutaj .

Skonfiguruj nowe pióro, a zostaniesz przywitany następującym ekranem:



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

Będziemy używać Babel jako nasz preprocesor kodu, więc wybierz tę opcję z rozwijanego menu. Babel sprawia, że ​​JavaScript jest trochę łatwiejszy do zrozumienia, wraz z dostarczaniem ECMAScript 6 wsparcie dla starszych przeglądarek. Jeśli nie wiesz, co to znaczy, nie martw się , to tylko trochę ułatwi nam życie tutaj.



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

Mając te dwie rzeczy na miejscu, 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, wpisując ten kod w CSS chleb.

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

Tworzenie kształtu to prosty proces, a koncepcja stojąca za nim kieruje całą biblioteką. Ustawmy domyślny kształt okręgu. Wprowadź ten kod do JS chleb:

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

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

Do tej pory nie przekazaliśmy żadnych parametrów z wyjątkiem isShowStart: prawda , co oznacza, że ​​pojawi się na ekranie, zanim jeszcze przypiszemy 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 linię do naszego kodu:

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

Aby dodać więcej właściwości do obiektu, oddzielamy go przecinkiem. Tutaj dodaliśmy kształt właściwości i zdefiniował ją jako „prosto” . Zapisz pióro, a zamiast tego zobaczysz, że domyślny kształt zmienia się w kwadrat.

Ten proces przekazywania wartości do Kształt obiekt to sposób, w jaki je dostosowujemy. W tej chwili mamy kwadrat, który tak naprawdę nie robi wiele. Spróbujmy coś animować.

Podstawy ruchu

Aby uzyskać coś, co wygląda trochę bardziej imponująco, ustawmy okrąg 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ż a szerokość wartość skoku, a promień dla koła. Sprawy już zaczynają wyglądać trochę inaczej. Jeśli kształt się nie aktualizuje, upewnij się, że nie pominięto żadnych przecinków ani pojedynczych cudzysłowów 'Internet' 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ę w miejscu kliknięcia przez użytkownika, 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:

radius: {15:30},
opacity: {1:0},
duration:1000

Zmieniając promień nieruchomość i dodawanie nieprzezroczystość oraz Trwanie właściwości, podaliśmy instrukcje dotyczące kształtu, które należy wykonać w miarę upływu czasu. To są Delta obiekty, przechowujące informacje o początku i końcu dla tych właściwości.

Zauważysz, że jeszcze nic się nie dzieje. Dzieje się tak, ponieważ nie dodaliśmy .bawić się() funkcję, aby powiedzieć mu, aby wykonał nasze instrukcje. Dodaj go między nawiasami końcowymi a średnikiem, a powinieneś zobaczyć, jak twoje koło ożywa.

Teraz do czegoś dochodzimy, ale żeby było naprawdę wyjątkowo, przyjrzyjmy się kilku bardziej dogłębnym możliwościom.

Zamawianie i łagodzenie za pomocą Mo.js

W tej chwili, gdy tylko pojawi się krąg, zaczyna zanikać. To będzie działać idealnie, ale byłoby miło mieć trochę więcej kontroli.

Możemy to zrobić za pomocą .następnie() funkcjonować. Zamiast zmieniać promień lub krycie, niech nasz kształt pozostanie tam, gdzie się zaczyna, zanim zmieni się po określonym czasie.

const redCirc = new mojs.Shape({
isShowStart:true,
stroke:'red',
strokeWidth:5,
fill:'none',
radius: 15,
duration:1000
}).then({
//do more stuff here
}).play();

Teraz pojawi się nasz kształt z wartościami, które mu przypisaliśmy, odczekaj 1000 ms, zanim wykonasz cokolwiek, co umieścimy w .następnie() funkcjonować. Dodajmy kilka instrukcji między nawiasami:

//do more stuff here
strokeWidth: 0,
scale: { 1: 2, easing: 'sin.in' },
duration: 500

Ten kod wprowadza kolejną ważną część animacji. Gdzie poinstruowaliśmy skala aby zmienić z 1 na 2, przypisaliśmy również luz oparty na fali sinusoidalnej z sin.in . Mo.js ma wiele wbudowanych krzywych łagodzenia, z możliwością dodawania własnych przez zaawansowanych użytkowników. W tym przypadku skala w czasie przebiega zgodnie z falą sinusoidalną zakrzywiającą się w górę.

Aby zobaczyć wizualnie różne krzywe, sprawdź easings.net . Połącz to z skokSzerokość zmieniając się na 0 w ustalonym czasie, a efekt znikania jest znacznie bardziej dynamiczny.

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

Wybuchające z potencjałem w Mo.js

DO Pękać w Mo.js to zbiór kształtów emanujących z centralnego punktu. Uczynimy z nich podstawę naszej gotowej animacji. Domyślną serię można wywołać w taki sam sposób, jak kształt. Zróbmy kilka iskier:

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

Możesz zobaczyć, po prostu dodając puste Pękać obiektu i każąc mu grać, otrzymujemy domyślny efekt burst. Możemy wpływać na rozmiar i obrót wybuchu, animując jego promień oraz kąt nieruchomości:

const sparks = new mojs.Burst({
radius: {0:30, easing:'cubic.out'},
angle:{0: 90,easing:'quad.out'},
}).play();

Dodaliśmy już niestandardowy promień i obrót do naszej serii:

Aby wyglądały bardziej jak iskry, zmieńmy kształty używane w serii oraz liczbę kształtów generowanych przez serię. Robisz to, odnosząc się do właściwości dzieci serii.

const sparks = new mojs.Burst({
radius: {0:30, easing:'cubic.out'},
angle:{0: 90,easing:'quad.out'},
count:50,
children:{
shape: 'cross',
stroke: 'white',
points: 12,
radius:10,
fill:'none',
angle:{0:360},
duration:300
}
}).play();

Zauważysz, że właściwości podrzędne 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 z tych kształtów ma teraz te same właściwości. Zaczyna wyglądać całkiem nieźle! Jest to pierwsza rzecz, jaką zobaczy użytkownik po kliknięciu myszą.

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

Jeszcze nie skończyliśmy z naszą animacją, ale poświęćmy chwilę, aby była ona reaktywna dla użytkownika.

Główne wydarzenie

Będziemy używać obsługi zdarzeń, aby uruchamiać nasze animacje w miejscu, w którym kliknie użytkownik. Na końcu swojego bloku kodu dodaj to:

document.addEventListener( 'click', function(e) {
});

Ten fragment kodu nasłuchuje kliknięć myszą i wykonuje dla nas instrukcje znajdujące się w nawiasach. Możemy dodać nasze redCirc oraz iskry obiekty do tego odbiornika.

document.addEventListener( 'click', function(e) {
redCirc
.tune({ x: e.pageX, y: e.pageY, })
.replay();
sparks
.tune({ x: e.pageX, y: e.pageY })
.replay();
});

Dwie funkcje, które tutaj nazywamy, to .melodia() oraz .powtórna rozgrywka() . Funkcja odtwarzania jest podobna do funkcji odtwarzania, ale określa, że ​​animacja powinna rozpoczynać się od początku za każdym kliknięciem.

ten melodia funkcja przekazuje wartości do naszego obiektu, dzięki czemu możesz zmieniać rzeczy, gdy jest wywoływana. W tym przypadku przekazujemy współrzędne strony, w której kliknięto myszą i odpowiednio przypisujemy pozycje x i y naszej animacji. Zapisz swój 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 klika. Po drugie, animacja nie jest uruchamiana w punkcie myszy, ale przesunięta w dół i w prawo. Obie te rzeczy możemy łatwo naprawić.

Nasz kształt i pęknięcie mają .bawić się() na końcu odpowiednich bloków kodu. Już tego nie potrzebujemy, ponieważ .powtórna rozgrywka() jest wywoływana w programie obsługi zdarzeń. Możesz usunąć .play() z obu bloków kodu. Z tego samego powodu możesz usunąć isShowStart: prawda również, ponieważ nie potrzebujemy go już pokazywać na początku.

Aby rozwiązać problem z pozycjonowaniem, będziemy musieli ustawić wartości pozycji dla naszych obiektów. Jak pamiętasz z naszego pierwszego kształtu, mo.js domyślnie umieszcza je na środku strony. Gdy te wartości są połączone z pozycją myszy, tworzy przesunięcie. Aby pozbyć się tego przesunięcia, po prostu dodaj te linie do obu redCirc oraz iskry obiekty:

left: 0,
top: 0,

Teraz jedynymi wartościami pozycji, jakie 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 obsługi zdarzeń jest sposobem, w jaki uruchomimy wszystkie nasze animacje, więc pamiętaj, aby od teraz dodawać do niego każdy nowy obiekt! Teraz, gdy mamy podstawy, które działają tak, jak chcemy, dodajmy większe i jaśniejsze wybuchy.

Pierwsze psychedeliki

Zacznijmy od kilku wirujących trójkątów. Pomysł polegał na stworzeniu hipnotycznego efektu stroboskopowego, a ustawienie go jest całkiem łatwe. Dodaj kolejną serię z tymi parametrami:

const triangles = new mojs.Burst({
radius: { 0 : 1000,easing: 'cubic.out'},
angle: {1080 : 0,easing: 'quad.out'},
left: 0, top: 0,
count: 20,
children : {
shape: 'polygon',
points: 3,
radius: { 10 : 100 },
fill: ['red','yellow','blue','green'],
duration: 3000
}
});

Wszystko tutaj powinno być już dość znajome, chociaż pojawiło się kilka nowych punktów. Zauważysz, że zamiast definiować kształt jako trójkąt, nazwaliśmy go a wielokąt przed przypisaniem liczby zwrotnica ma jak 3.

Daliśmy też napełnić funkcja tablica kolorów do pracy, co piąty trójkąt powróci do koloru czerwonego, a wzór będzie kontynuowany. Wysoka wartość kąt ustawienie sprawia, że ​​burst wiruje wystarczająco szybko, aby wywołać efekt stroboskopowy.

Jeśli kod nie działa, upewnij się, że dodałeś obiekt triangles do klasy detektora zdarzeń, tak jak to zrobiliśmy z poprzednimi obiektami.

Całkiem psychodeliczny! Dodajmy kolejną serię, aby ją śledzić.

Tańczące pięciokąty

Możemy użyć czegoś prawie identycznego z naszym trójkąty obiekt, aby wykonać serię, która następuje po nim. Ten nieco zmodyfikowany kod tworzy nakładające się na siebie wirujące sześciokąty w jasnych kolorach:

const pentagons = new mojs.Burst({
radius: { 0 : 1000,easing: 'cubic.out'},
angle: {0 : 720,easing: 'quad.out'},
left: 0, top: 0,
count: 20,
children : {
shape: 'polygon',
radius: { 1 : 300 },
points: 5,
fill: ['purple','pink','yellow','green'],
delay:500,
duration: 3000
}
});

Główną zmianą jest to, że dodaliśmy opóźnienie 500ms, aby seria nie zaczęła się przed trójkątami. Zmieniając kilka wartości, pomysł polegał na tym, aby burst wirował w kierunku przeciwnym do trójkątów. Przez szczęśliwy przypadek, zanim pięciokąty się pojawią, efekt stroboskopowy trójkątów sprawia wrażenie, jakby wirowały razem.

Trochę losowości

Dodajmy efekt wykorzystujący wartości losowe. 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: 'line',
stroke: {'red':'transparent'},
strokeWidth: 5,
scaleX: {0.5:0},
degreeShift: 'rand(-90, 90)',
radius: 'rand(20, 300)',
duration: 500,
delay: 'rand(0, 150)',
}
});

Ten wybuch stworzy linie, które zaczynają się czerwone i zanikają do przezroczystości, kurcząc się z czasem. To, co czyni ten składnik interesującym, to fakt, że do określenia niektórych jego właściwości wykorzystuje się wartości losowe.

ten zmiana stopnia daje obiektowi potomnemu kąt początkowy. Losowo to daje zupełnie inny wybuch przy każdym kliknięciu. Wartości losowe są również używane dla promień oraz opóźnienie funkcje, aby dodać do chaotycznego efektu.

Oto efekt sam w sobie:

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

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

ten Generować() funkcja oblicza świeże wartości losowe przy każdym wywołaniu zdarzenia. Bez tego kształt wybiera losowe wartości przy pierwszym wywołaniu i kontynuuje 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.

darmowe filmy, które mogę oglądać na moim telefonie

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

Oszałamiające linie

Aby pokazać, jak chwiać się na nogach funkcja działa, zrobimy coś w rodzaju koła Katarzyny. Utwórz nową serię z tymi parametrami:

const lines = new mojs.Burst({
radius: { 0 : 1000,easing: 'cubic.out'},
angle: {0 : 1440,easing: 'cubic.out'},
left: 0, top: 0,
count: 50,
children : {
shape: 'line',
radius: { 1 : 100,easing:'elastic.out' },
fill: 'none',
stroke: ['red','orange'],
delay:'stagger(10)',
duration: 1000
}
});

Wszystko tutaj jest już znajome, wybuch tworzy 50 dzieci, które są czerwonymi lub pomarańczowymi liniami. Różnica polega na tym, że mijamy opóźnienie nieruchomość zataczać się(10) funkcjonować. Dodaje to 10ms opóźnienia między emisją każdego dziecka, co daje efekt wirowania, którego szukamy.

Funkcja stagger nie korzysta z żadnych wartości losowych, więc nie będziesz potrzebować Generować tym razem w obsłudze zdarzeń. Zobaczmy, co mamy do tej pory w akcji:

Moglibyśmy na tym spokojnie poprzestać, ale dodajmy jeszcze jedną serię, aby zakończyć ten projekt.

Inteligentne kwadraty

W tej ostatniej serii zróbmy coś z prostokątów. Dodaj ten obiekt do swojego kodu i detektora zdarzeń:

const redSquares = new mojs.Burst({
radius: { 0 : 1000,easing: 'cubic.out'},
angle: {360 : 0,easing: 'quad.out'},
left: 0, top: 0,
count: 20,
children : {
shape: 'rect',
radiusX: { 1 : 1000 },
radiusY:50,
points: 5,
fill: 'none',
stroke: {'red':'orange'},
strokeWidth:{5:15},
delay:1000,
duration: 3000
}
});

Ten obiekt nie wnosi niczego nowego do tego, nad czym już pracowaliśmy dzisiaj, jest zawarty jedynie w celu pokazania, jak skomplikowane wzory geometryczne można łatwo tworzyć za pomocą kodu.

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

Po dodaniu tego ostatniego obiektu, skończyliśmy. Zobaczmy całość 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, w jaki te narzędzia są używane, może stworzyć prawie wszystko, a dla wielu zadań biblioteki internetowe są prostą alternatywą dla używania Photoshop , After Effects lub inne kosztowne oprogramowanie.

Ta biblioteka jest przydatna dla osób pracujących zarówno w programowaniu, jak i tworzeniu stron internetowych , obsługa zdarzeń wykorzystana w projekcie może być z łatwością wykorzystana do tworzenia reaktywnych przycisków i tekstu na stronach internetowych lub w aplikacjach. Baw się z tym: nie ma błędów, tylko szczęśliwe wypadki!

Udział Udział Ćwierkać E-mail Czy warto uaktualnić do systemu Windows 11?

Windows został przeprojektowany. Ale czy to wystarczy, aby przekonać Cię do przejścia z Windows 10 na Windows 11?

Czytaj dalej Powiązane tematy
  • Programowanie
  • JavaScript
O autorze Ian Buckley(216 opublikowanych artykułów)

Ian Buckley jest niezależnym dziennikarzem, muzykiem, performerem i producentem wideo mieszkającym w Berlinie w Niemczech. Kiedy nie pisze ani nie występuje na scenie, majstruje przy elektronice DIY lub kodowaniu w nadziei, że zostanie szalonym naukowcem.

Więcej od Iana Buckleya

Zapisz się do naszego newslettera

Dołącz do naszego newslettera, aby otrzymywać porady techniczne, recenzje, bezpłatne e-booki i ekskluzywne oferty!

Kliknij tutaj, aby zasubskrybować