Hoe maak je mooie gecodeerde web-animaties met Mo.JS

Als u op zoek bent om uw eigen website te starten, kunnen mooi ogende animaties het laten schijnen. Er zijn meerdere manieren om dit te bereiken, van simpelweg een geanimeerde GIF maken van een stuk van de bestaande film, tot het leren om je eigen kras te maken met software zoals Blender of Maya.

Er zijn ook bibliotheken beschikbaar om programmatisch animaties te maken. Historisch gebruikten web-coders jQuery om eenvoudige animaties te maken, maar terwijl het web zich ontwikkelde en HTML5 de nieuwe standaard werd, verschenen nieuwe opties. CSS-bibliotheken voor animatie werden ongelooflijk krachtig in het nieuwe kader, samen met JavaScript-bibliotheken die speciaal zijn ontworpen voor vectoranimatie in de browser.

Vandaag zullen we kijken naar mo.js, een van de nieuwere kinderen in de buurt voor het maken van prachtige beelden uit de code. We bespreken een paar basisfuncties voordat we een reactieve animatieserie maken voor gebruikers die prachtige patronen maakt.

Voer Mo.js in

Mo.js is een bibliotheek voor het maken van bewegende beelden voor het web met gemak. Het is ontworpen om het maken van mooie dingen eenvoudig te maken voor degenen die niet te veel coderen, terwijl veteranen programmeurs een artistieke kant kunnen laten ontdekken waarvan ze nooit wisten dat ze het hadden. Zoals de naam al doet vermoeden, is het gebaseerd op de populaire JavaScript-programmeertaal, hoewel het zo is geïmplementeerd dat iedereen de basis gemakkelijk kan oppikken.

Voordat we verder gaan, laten we eens kijken naar wat we vandaag gaan creëren:

We zullen CodePen gebruiken voor het project van vandaag, omdat het ons in staat stelt alles in hetzelfde browservenster te bewerken. Als u wilt, kunt u in plaats daarvan werken in een editor van uw keuze. Als u de stapsgewijze zelfstudie wilt overslaan, is de volledige code hier beschikbaar.

Stel een nieuwe pen in en u wordt begroet met dit scherm:

Voordat we van start gaan, moet u een paar wijzigingen aanbrengen. Klik op de instellingen pictogram in de rechterbovenhoek en navigeer naar de JavaScript tab.

We gaan gebruiken Babel als onze code pre-processor, dus selecteer deze in het vervolgkeuzemenu. Babel maakt JavaScript een beetje makkelijker te begrijpen, samen met het bieden van ECMAScript 6 Wat is ES6 en wat Javascript-programmeurs moeten weten Wat ES6 is en wat Javascript-programmeurs moeten weten ES6 verwijst naar versie 6 van de ECMA Script (Javascript) -taal. Laten we nu eens kijken naar enkele belangrijke wijzigingen die ES6 aan JavaScript toevoegt. Meer ondersteuning voor oudere browsers. Als je niet weet wat dat betekent, Maak je geen zorgen, het gaat ons leven hier wat makkelijker maken.

We moeten ook de bibliotheek mo.js importeren in het project. Doe dit door te zoeken naar mo.js in de Externe scripts / pennen toevoegen tekstprompt en selecteren.

Klik met deze twee dingen op zijn plaats Opslaan en sluiten. We zijn klaar om te beginnen!

Basisvormen met Mo.js

Voordat we aan de slag gaan met de afbeeldingen, laten we iets doen aan die verblindende witte achtergrond in het weergavevenster. Wijzig de achtergrondkleur door deze code te schrijven in de CSS paneel.

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

Een vorm maken is een eenvoudig proces en het concept erachter drijft de hele bibliotheek aan. Laten we een standaardcirkelvorm opzetten. Voer deze code in in JS ruit:

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

Hier hebben we een gemaakt const waarde met de naam redCirc en toegewezen aan een nieuwe mojs.Shape. Als je helemaal nieuw bent in het coderen, let dan op de volgorde van de haakjes en vergeet de puntkomma aan het einde niet!

Tot nu toe hebben we geen parameters doorgegeven behalve isShowStart: true, wat betekent dat het op het scherm verschijnt nog voordat we het een beweging hebben toegewezen. Je zult zien dat het een roze cirkel in het midden van het scherm heeft geplaatst:

Deze cirkel is de standaard Vorm voor mo.js. We kunnen deze vorm eenvoudig wijzigen door een regel toe te voegen aan onze code:

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

Om meer eigenschappen aan een object toe te voegen, gebruiken we een komma om het te scheiden. Hier hebben we een toegevoegd vorm eigendom, en definieerde het als een 'Rect'. Sla je pen op en je ziet dat de standaardvorm verandert in een vierkant.

Dit proces van het doorgeven van waarden aan de Vorm object is hoe we ze aanpassen. Op dit moment hebben we een vierkant dat niet echt veel doet. Laten we iets proberen te animeren.

Basisprincipes van beweging

Om iets te krijgen dat er iets indrukwekkender uitziet, stellen we een cirkel op, met een rode streep eromheen en geen vulling erin.

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

Zoals je kunt zien, hebben we ook een breedte waarde voor de streek en a radius voor de cirkel. Het begint er al een beetje anders uit te zien. Als uw vorm niet wordt bijgewerkt, zorg dan dat u geen komma's of enkele aanhalingstekens in de buurt hebt gemist 'rood' of 'geen', en zorg ervoor dat je hebt geklikt opslaan bovenaan de pagina.

Laten we hier een animatie aan toevoegen. In het bovenstaande voorbeeld wordt deze rode cirkel weergegeven waar de gebruiker klikt, voordat deze naar buiten vervaagt. Een manier om dit te realiseren is door de straal en de dekking in de loop van de tijd te veranderen. Laten we de code aanpassen:

 straal: 15:30, dekking: 1: 0, duur: 1000

Door de radius eigendom en toevoegen ondoorzichtigheid en looptijd eigenschappen, hebben we de vorminstructies gegeven om in de loop van de tijd uit te voeren. Dit zijn Delta objecten, met start- en eindinformatie voor deze eigenschappen.

Je zult merken dat er nog niets gebeurt. Dit komt omdat we het niet hebben toegevoegd .spelen() functie om het te vertellen om onze instructies uit te voeren. Voeg het toe tussen de eindhaken en de puntkomma, en je zou je cirkel tot leven zien komen.

Nu komen we ergens, maar om het echt speciaal te maken, laten we eens naar een paar meer diepgaande mogelijkheden kijken.

Bestellen en versoepelen met Mo.js

Op dit moment, zodra de cirkel verschijnt, begint deze uit te faden. Dit werkt prima, maar het zou leuk zijn om wat meer controle te hebben.

We kunnen dit doen met de .dan() functie. In plaats van dat onze straal of opaciteit wordt gewijzigd, laten we onze vorm behouden waar deze begint, voordat deze na een bepaalde tijd wordt gewijzigd.

const redCirc = nieuwe mojs.Shape (isShowStart: true, stroke: 'red', strokeWidth: 5, fill: 'none', radius: 15, duration: 1000). then (// doe hier meer dingen) .spelen();

Nu zal onze vorm verschijnen met de waarden die we hebben toegewezen, wacht 1000 ms, voordat we iets uitvoeren dat we in de .dan() functie. Laten we wat instructies toevoegen tussen de haakjes:

 // doe meer dingen hier strokeWidth: 0, scale: 1: 2, easing: 'sin.in', duration: 500

Deze code introduceert een ander belangrijk onderdeel van animatie. Waar hebben we de schaal om van 1 naar 2 te veranderen, hebben we ook op sinusgolf gebaseerde versoepeling toegewezen met sin.in. Mo.js heeft een verscheidenheid aan versnellingscurven ingebouwd, met de mogelijkheid voor gevorderde gebruikers om hun eigen curven toe te voegen. In dit geval gebeurt de schaal in de loop van de tijd volgens een naar boven gebogen sinusgolf.

Voor een visueel overzicht van verschillende curves, kijk op easings.net. Combineer dit met de streekbreedte veranderen naar 0 over onze ingestelde duur, en je hebt een veel dynamischer verdwijnend effect.

Vormen vormen de basis voor alles in Mo.js, maar ze zijn slechts het begin van het verhaal. Laten we eens kijken uitbarstingen.

Barstensvol potentieel in Mo.js

EEN Uitbarsting in Mo.js is een verzameling vormen afkomstig van een centraal punt. We gaan deze de basis maken van onze voltooide animatie. U kunt een standaard burst op dezelfde manier noemen als een shape. Laten we wat vonken maken:

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

U kunt zien, gewoon door een leegte toe te voegen Uitbarsting object en vertel het om te spelen, we krijgen het standaard burst-effect. We kunnen de grootte en rotatie van de burst beïnvloeden door de burst te animeren radius en hoek eigenschappen:

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

We hebben al een aangepaste straal toegevoegd en draaien naar onze burst:

Om ervoor te zorgen dat ze meer op vonken lijken, laten we de vormen wijzigen die de burst gebruikt en hoeveel vormen de burst genereert. U doet dit door de eigenschappen van de kinderen van de burst aan te spreken.

const sparks = nieuwe mojs.Burst (radius: 0:30, easing: 'cubic.out', hoek: 0: 90, easing: 'quad.out', count: 50, children: shape: 'kruis', streek: 'wit', punten: 12, straal: 10, opvulling: 'geen', hoek: 0: 360, duur: 300). play ();

U zult merken dat de kindeigenschappen hetzelfde zijn als de vormeigenschappen waarmee we al hebben gewerkt. Deze keer hebben we een kruis gekozen als de vorm. Alle 50 van deze vormen hebben nu dezelfde eigenschappen. Het begint er best goed uit te zien! Dit is het eerste dat de gebruiker te zien krijgt wanneer ze met de muis klikken.

Al hoewel we kunnen zien dat de rode streek van onze initiaal redCirc vorm blijft te lang rond. Probeer de duur ervan te wijzigen zodat beide animaties bij elkaar passen. Het zou er ongeveer zo uit moeten zien:

We zijn nog lang niet klaar met onze animatie, maar laten we een moment nemen om het reactief te maken voor de gebruiker.

De hoofdact

We zullen een gebeurtenishandler gebruiken om onze animaties te activeren op de positie waarop de gebruiker klikt. Voeg aan het einde van uw codeblok dit toe:

document.addEventListener ('klik', functie (e) );

Dit codefragment luistert naar muisklikken en voert alle instructies tussen haakjes voor ons uit. We kunnen onze toevoegen redCirc en vonken objecten naar deze luisteraar.

document.addEventListener ('klik', functie (e) redCirc. tune (x: e.pageX, y: e.pageY,) .replay (); sparks .tune (x: e.pageX, y: e.pageY) .replay (););

De twee functies die we hier noemen zijn .afstemmen() en .herhaling(). De herhalingsfunctie lijkt op de afspeelfunctie, maar geeft aan dat de animatie opnieuw moet beginnen vanaf het begin telkens wanneer erop wordt geklikt.

De afstemmen functie geeft waarden door aan ons object zodat u dingen kunt veranderen wanneer het wordt geactiveerd. In dit geval geven we de paginacoördinaten door waar op de muis is geklikt en worden de x- en y-positie van onze animatie dienovereenkomstig toegewezen. Sla uw code op en probeer op het scherm te klikken. Je zult een aantal problemen opmerken.

Ten eerste verschijnt onze initiële animatie nog steeds in het midden van het scherm, zelfs als de gebruiker niets klikt. Ten tweede wordt de animatie niet op het muispunt geactiveerd, maar naar beneden en naar rechts. We kunnen beide dingen gemakkelijk oplossen.

Onze vorm en burst hebben de .spelen() aan het einde van hun respectieve codeblokken. We hebben dit niet meer nodig zoals .herhaling() wordt gebeld in de gebeurtenishandler. U kunt .play () uit beide codeblokken verwijderen. Om dezelfde reden kunt u verwijderen isShowStart: waar omdat we het niet langer nodig hebben om aan het begin te laten zien.

Om het positioneringsprobleem te verhelpen, moeten we positiewaarden voor onze objecten instellen. Zoals u zich herinnert van onze allereerste vorm, zet mo.js ze standaard in het midden van de pagina. Wanneer deze waarden worden gecombineerd met de positie van de muis, wordt de offset gemaakt. Om deze offset kwijt te raken, voegt u deze regels toe aan beide redCirc en vonken voorwerpen:

links: 0, boven: 0,

Nu zijn de enige positiewaarden die onze objecten aannemen de muispositiewaarden die door de gebeurtenislistener zijn doorgegeven. Nu zouden de dingen veel beter moeten werken.

Dit proces van het toevoegen van objecten aan de gebeurtenishandler is hoe we al onze animaties activeren, dus Vergeet niet om vanaf nu elk nieuw object eraan toe te voegen! Nu we de basis hebben die werkt zoals we ze willen, laten we wat grotere en helderdere bursts toevoegen.

Psychedelic worden

Laten we beginnen met enkele draaiende driehoeken. Het idee hier was om een ​​hypnotiserend stroboscopisch effect te creëren en het opzetten ervan is eigenlijk vrij eenvoudig. Voeg nog een burst toe met deze parameters:

const driehoeken = nieuwe mojs.Burst (radius: 0: 1000, easing: 'cubic.out', hoek: 1080: 0, easing: 'quad.out', links: 0, top: 0, tel : 20, kinderen: shape: 'polygon', punten: 3, radius: 10: 100, vul in: ['rood', 'geel', 'blauw', 'groen'], duur: 3000) ;

Alles hier zou nu redelijk bekend moeten zijn, maar er zijn een paar nieuwe punten. Je zult merken dat we de vorm niet als een driehoek hebben gedefinieerd, maar een a veelhoek voordat u het nummer toewijst points het heeft als 3.

We hebben ook gegeven vullen functie een reeks kleuren om mee te werken, elke vijfde driehoek keert terug naar rood en het patroon zal doorgaan. De hoge waarde van de hoek instelling maakt de burst snel genoeg om het stroboscopische effect te produceren.

Als de code niet werkt, zorg dan dat je het triangles-object hebt toegevoegd aan de listener-klasse van de gebeurtenis, zoals we deden met de vorige objecten.

Behoorlijk psychedelisch! Laten we nog een burst toevoegen om het te volgen.

Pentagons dansen

We kunnen iets gebruiken dat bijna identiek is aan ons driehoeken object om de burst te maken die erop volgt. Deze licht gewijzigde code produceert felgekleurde overlappende draaiende zeshoeken:

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

De belangrijkste verandering is hier dat we een hebben toegevoegd vertraging van 500 ms, zodat de burst pas na de driehoeken begint. Door een paar waarden te veranderen, was het idee hier om de burst in de tegenovergestelde richting van de driehoeken te laten draaien. Door een gelukkig toeval, tegen de tijd dat de vijfhoeken verschijnen, lijkt het alsof de stroboscopische effecten van de driehoeken samen draaien.

Een beetje willekeur

Laten we een effect toevoegen dat gebruik maakt van willekeurige waarden. Maak een burst met deze eigenschappen:

const redSparks = nieuwe mojs.Burst (links: 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)' , duur: 500, delay: 'rand (0, 150)',);

Deze burst zal lijnen creëren die rood beginnen te worden en vervagen tot transparantie, en in de loop van de tijd kleiner worden. Wat deze component interessant maakt, is dat willekeurige waarden worden gebruikt om enkele van zijn eigenschappen te bepalen.

De degreeShift geeft het onderliggende object een beginhoek. Door dit willekeurig te maken, geeft het een totaal verschillende burst bij elke klik. Willekeurige waarden worden ook gebruikt voor de radius en vertraging functies om toe te voegen aan het chaotische effect.

Dit is het effect zelf:

Omdat we hier willekeurige waarden gebruiken, moeten we een extra methode toevoegen aan onze gebeurtenishandler voor het object:

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

De genereren () functie berekent nieuwe willekeurige waarden telkens wanneer de gebeurtenis wordt aangeroepen. Zonder dit zou de vorm willekeurige waarden kiezen bij de eerste keer dat deze wordt aangeroepen, en deze waarden blijven gebruiken voor elke volgende oproep. Dit zou het effect volledig verpesten, dus zorg ervoor dat je dit toevoegt!

U kunt willekeurige waarden gebruiken voor bijna elk element van mo.js-objecten en ze zijn een eenvoudige manier om unieke animaties te maken.

Willekeurigheid is echter niet de enige manier om dynamische bewegingen aan animaties toe te voegen. Laten we naar de wankelen functie.

Verbluffende lijnen

Om te laten zien hoe het wankelen de functie werkt, we gaan iets maken als een Catherine Wheel. Maak een nieuwe burst met deze parameters:

const lines = new mojs.Burst (straal: 0: 1000, easing: 'cubic.out', hoek: 0: 1440, easing: 'cubic.out', links: 0, top: 0, tel : 50, kinderen: shape: 'line', radius: 1: 100, easing: 'elastic.out', fill: 'none', stroke: ['red', 'orange'], delay: 'strompelen (10) ', duur: 1000);

Alles hier is nu bekend, een uitbarsting creëert 50 kinderen die rode of oranje lijnen hebben. Het verschil is dat we de vertraging eigendom a verspringing (10) functie. Dit voegt 10ms vertraging toe tussen de emissie van elk kind, waardoor het het draaiende effect krijgt waarnaar we op zoek zijn.

De zigzagfunctie maakt geen gebruik van willekeurige waarden, u heeft dus geen a nodig voortbrengen functie deze keer in de gebeurtenishandler. Laten we alles zien wat we tot nu toe in actie hebben:

We kunnen hier gemakkelijk stoppen, maar laten we nog een burst toevoegen om dit project af te ronden.

Slimme vierkanten

Laten we voor deze laatste burst iets maken met rechthoeken. Voeg dit object toe aan uw code en gebeurtenislistener:

const redSquares = new mojs.Burst (straal: 0: 1000, easing: 'cubic.out', hoek: 360: 0, easing: 'quad.out', links: 0, top: 0, tel : 20, kinderen: shape: 'rect', radiusX: 1: 1000, radiusY: 50, points: 5, fill: 'none', stroke: 'red': 'orange', strokeWidth: 5 : 15, vertraging: 1000, duur: 3000);

Dit object voegt niets nieuws toe aan wat we vandaag al hebben bewerkt, het is alleen opgenomen om te laten zien hoe ingewikkelde geometrische patronen eenvoudig kunnen worden gemaakt door middel van code.

Dit was niet de beoogde uitkomst van dit object toen het werd gemaakt in de testfasen van het schrijven van deze tutorial. Toen de code eenmaal liep, werd het duidelijk dat ik op iets veel mooiers was gestuit dat ik met opzet had kunnen maken!

Nu dit laatste object is toegevoegd, zijn we klaar. Laten we het hele ding in actie zien.

Mo.js: een krachtige tool voor webanimaties

Deze eenvoudige inleiding tot mo.js behandelt de basisgereedschappen die nodig zijn om prachtige animaties te maken. De manier waarop deze hulpmiddelen worden gebruikt, kan bijna alles maken en voor veel taken zijn webbibliotheken een eenvoudig alternatief voor het gebruik van Photoshop, After Effects of andere kostbare software..

Deze bibliotheek is handig voor mensen die zowel in programmeren als webontwikkeling werken. Programmeren versus Webontwikkeling: wat is het verschil? Programmeren versus Webontwikkeling: wat is het verschil? Je zou kunnen denken dat applicatieprogrammeurs en webontwikkelaars hetzelfde doen, maar dat is verre van waar. Hier zijn de belangrijkste verschillen tussen programmeurs en webontwikkelaars. Meer informatie, de gebeurtenisafhandeling die in het project wordt gebruikt, kan gemakkelijk worden gebruikt voor het maken van reactieve knoppen en tekst op websites of in apps. Veel plezier ermee: er zijn geen fouten, alleen gelukkige ongelukken!

Ontdek meer over: JavaScript.