Home-theater-designers
Als u op zoek bent naar start je eigen website , kunnen mooi ogende animaties het laten schitteren. Er zijn meerdere manieren om dit te bereiken, van eenvoudig: een geanimeerde GIF maken van een stukje bestaande film, tot het leren om je eigen film te maken vanaf het begin met software zoals Blender of Maya .
Er zijn ook bibliotheken beschikbaar om animaties programmatisch te maken. Vroeger gebruikten webprogrammeurs jQuery om eenvoudige animaties te maken, maar naarmate het web zich ontwikkelde en HTML5 de nieuwe standaard werd, verschenen er nieuwe opties. CSS-bibliotheken voor animatie werden ongelooflijk krachtig onder het nieuwe raamwerk, 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 afbeeldingen van code. We bespreken een paar basisfuncties voordat we een gebruikersreactieve animatieserie maken die prachtige patronen creëert.
Voer Mo.js . in
Mo.js is een bibliotheek waarmee u eenvoudig bewegende beelden voor het web kunt maken. Het is ontworpen om het creëren van mooie dingen eenvoudig te maken voor degenen die niet al te veel kennis hebben van code, terwijl ervaren programmeurs een artistieke kant kunnen ontdekken waarvan ze nooit wisten dat ze die hadden. Zoals de naam al doet vermoeden, is het gebaseerd op de populaire programmeertaal JavaScript, hoewel het op zo'n manier is geïmplementeerd dat iedereen de basis gemakkelijk kan oppikken.
Voordat we verder gaan, laten we eens kijken naar wat we vandaag gaan maken:
We zullen gebruiken CodePen voor het project van vandaag, omdat het ons in staat stelt om aan alles in hetzelfde browservenster te werken. Als je wilt, kun je werken in een redacteur naar keuze in plaats daarvan. Als je de stapsgewijze zelfstudie wilt overslaan, is de volledige code hier beschikbaar.
Stel een nieuwe pen in en je wordt begroet met dit scherm:
Voordat we beginnen, moet u een aantal wijzigingen aanbrengen. Klik op de Instellingen pictogram in de rechterbovenhoek en navigeer naar de JavaScript tabblad.
We gaan gebruiken Babel als onze code-pre-processor, dus selecteer dit in het vervolgkeuzemenu. Babel maakt JavaScript een beetje gemakkelijker te begrijpen, samen met het verstrekken van ECMAScript 6 ondersteuning voor oudere browsers. Als je niet weet wat dat betekent, maak je geen zorgen , het gaat ons leven hier een beetje gemakkelijker maken.
We moeten ook de mo.js-bibliotheek in het project importeren. Doe dit door te zoeken naar mo.js in de Externe scripts/pennen toevoegen tekstprompt en deze te selecteren.
Klik met deze twee dingen op Opslaan en afsluiten . We zijn klaar om aan de slag te gaan!
Basisvormen met Mo.js
Laten we, voordat we aan de slag gaan met de graphics, iets doen aan die verblindende witte achtergrond in het weergavevenster. Wijzig de eigenschap van de achtergrondkleur door deze code te schrijven in de CSS brood.
body{
background: rgba(11,11,11,1);
}Het maken van een vorm is een eenvoudig proces en het concept erachter drijft de hele bibliotheek aan. Laten we een standaard cirkelvorm instellen. Voer deze code in de JS brood:
const redCirc = new mojs.Shape({
isShowStart:true
});Hier hebben we een gemaakt const waarde met de naam roodCirc en toegewezen aan een nieuwe mojs.Shape . Als coderen helemaal nieuw voor u is, let dan hier 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 er een roze cirkel in het midden van het scherm is geplaatst:
Deze cirkel is de standaard Vorm voor mo.js. We kunnen deze vorm eenvoudig wijzigen door een regel aan onze code toe te voegen:
const redCirc = new 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 eigenschap, en definieerde het als a 'rect' . Sla uw pen op en u zult zien dat de standaardvorm in plaats daarvan 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 proberen iets te animeren.
Basisprincipes van beweging
Om iets te krijgen dat er een beetje indrukwekkender uitziet, laten we een cirkel maken, met een rode lijn eromheen en geen vulling erin.
const redCirc = new mojs.Shape({
isShowStart:true,
stroke:'red',
strokeWidth:5,
fill:'none',
radius:15
});Zoals je kunt zien, hebben we ook een breedte waarde voor de slag, en a straal voor de cirkel. Dingen beginnen er al een beetje anders uit te zien. Als je vorm niet wordt bijgewerkt, zorg er dan voor dat je geen komma's of enkele aanhalingstekens hebt gemist 'netto' of 'geen' , en zorg ervoor dat je hebt geklikt opslaan bovenaan de pagina.
Laten we hier een animatie aan toevoegen. In het bovenstaande voorbeeld verschijnt deze rode cirkel waar de gebruiker klikt, voordat hij naar buiten vervaagt. Een manier waarop we dit kunnen realiseren, is door de straal en de dekking in de loop van de tijd te wijzigen. Laten we de code aanpassen:
radius: {15:30},
opacity: {1:0},
duration:1000Door het veranderen van de straal eigendom, en het toevoegen van ondoorzichtigheid en looptijd eigenschappen hebben we de vorminstructies gegeven om in de loop van de tijd uit te voeren. Dit zijn Delta objecten, met begin- en eindinformatie voor deze eigenschappen.
U zult merken dat er nog niets gebeurt. Dit komt omdat we de . niet hebben toegevoegd .Speel() 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 moeten zien komen.
Nu komen we ergens, maar om het echt speciaal te maken, laten we eens kijken naar een paar meer diepgaande mogelijkheden.
Bestellen en versoepelen met Mo.js
Op dit moment, zodra de cirkel verschijnt, begint deze te vervagen. Dit zal prima werken, maar het zou leuk zijn om wat meer controle te hebben.
Dit kunnen we doen met de .dan() functie. In plaats van onze straal of dekking te laten veranderen, laten we onze vorm blijven waar hij begint, voordat we na een bepaalde tijd veranderen.
const redCirc = new mojs.Shape({
isShowStart:true,
stroke:'red',
strokeWidth:5,
fill:'none',
radius: 15,
duration:1000
}).then({
//do more stuff here
}).play();Nu zal onze vorm verschijnen met de waarden die we eraan hebben toegewezen, wacht 1000 ms, voordat u iets uitvoert dat we in de .dan() functie. Laten we enkele instructies tussen de haakjes toevoegen:
//do more stuff here
strokeWidth: 0,
scale: { 1: 2, easing: 'sin.in' },
duration: 500Deze code introduceert een ander belangrijk onderdeel van animatie. Waar we de hebben geïnstrueerd schaal om van 1 naar 2 te veranderen, hebben we ook een op sinusgolf gebaseerde versoepeling toegewezen met zonde.in . Mo.js heeft verschillende ingebouwde versnellingscurves, met de mogelijkheid voor gevorderde gebruikers om hun eigen curves toe te voegen. In dit geval gebeurt de schaal in de tijd volgens een sinusgolf die naar boven buigt.
Voor een visuele weergave van verschillende rondingen, bekijk easings.net . Combineer dit met de streekbreedte verandert naar 0 gedurende onze ingestelde duur, en je hebt een veel dynamischer verdwijnend effect.
Vormen zijn de basis voor alles in Mo.js, maar ze zijn slechts het begin van het verhaal. Laten we eens kijken naar uitbarstingen .
Barstensvol potentieel in Mo.js
TOT Uitbarsting in Mo.js is een verzameling vormen die uit een centraal punt komen. We gaan deze de basis maken van onze voltooide animatie. U kunt een standaardburst op dezelfde manier aanroepen als een vorm. Laten we wat vonken maken:
const sparks = new mojs.Burst({
}).play();U kunt het zien, gewoon door een lege . toe te voegen Uitbarsting object en het vertellen om te spelen, krijgen we het standaard burst-effect. We kunnen de grootte en rotatie van de burst beïnvloeden door de animatie ervan te animeren straal en hoek eigendommen:
const sparks = new mojs.Burst({
radius: {0:30, easing:'cubic.out'},
angle:{0: 90,easing:'quad.out'},
}).play();We hebben al een aangepaste radius en spin toegevoegd aan onze burst:
Om ze meer op vonken te laten lijken, veranderen we de vormen die de burst gebruikt en hoeveel vormen de burst genereert. Dit doe je door de eigenschappen van de kinderen van de burst aan te pakken.
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();U zult merken dat de onderliggende eigenschappen hetzelfde zijn als de vormeigenschappen waarmee we al hebben gewerkt. Dit keer hebben we als vorm een kruis gekozen. Alle 50 van deze vormen hebben nu dezelfde eigenschappen. Het begint er al goed uit te zien! Dit is het eerste wat de gebruiker ziet als hij met de muis klikt.
Hoewel we al kunnen zien dat de rode lijn van onze initiaal roodCirc vorm blijft te lang hangen. 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 even de tijd nemen om deze gebruikersreactief te maken.
De hoofdact
We zullen een gebeurtenishandler gebruiken om onze animaties te activeren op de positie waarop de gebruiker klikt. Voeg dit toe aan het einde van je codeblok:
document.addEventListener( 'click', function(e) {
});Dit stukje code luistert naar muisklikken en voert de instructies tussen haakjes voor ons uit. We kunnen onze . toevoegen roodCirc en vonken bezwaar tegen deze luisteraar.
document.addEventListener( 'click', function(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 replay-functie is vergelijkbaar met de play-functie, hoewel het specificeert dat de animatie elke keer dat erop wordt geklikt opnieuw moet beginnen.
De afstemmen functie geeft waarden door aan ons object, zodat u dingen kunt wijzigen wanneer deze wordt geactiveerd. In dit geval geven we de paginacoördinaten door waar met de muis is geklikt en wijzen we de x- en y-positie van onze animatie dienovereenkomstig toe. Sla uw code op en probeer op het scherm te klikken. U zult een aantal problemen opmerken.
Ten eerste verschijnt onze eerste animatie nog steeds in het midden van het scherm, zelfs als de gebruiker nergens op klikt. Ten tweede wordt de animatie niet geactiveerd op de muispunt, maar naar beneden en naar rechts verschoven. We kunnen beide dingen gemakkelijk oplossen.
Onze vorm en burst hebben de .Speel() aan het einde van hun respectieve codeblokken. We hebben dit niet meer nodig als .herhaling() wordt aangeroepen in de gebeurtenishandler. U kunt .play() uit beide codeblokken verwijderen. Om dezelfde reden kunt u verwijderen: isShowStart: waar ook, omdat we het niet meer nodig hebben om aan het begin te laten zien.
Om het positioneringsprobleem op te lossen, moeten we positiewaarden voor onze objecten instellen. Zoals je je herinnert van onze allereerste vorm, plaatst mo.js ze standaard in het midden van de pagina. Wanneer deze waarden worden gecombineerd met de muispositie, wordt de offset gecreëerd. Om van deze offset af te komen, voegt u deze regels toe aan zowel de roodCirc en vonken voorwerpen:
left: 0,
top: 0,Nu zijn de enige positiewaarden die onze objecten aannemen de muispositiewaarden die zijn doorgegeven door de gebeurtenislistener. Nu zou alles veel beter moeten werken.
Dit proces van het toevoegen van objecten aan de gebeurtenishandler is hoe we al onze animaties zullen activeren, dus vergeet niet om vanaf nu elk nieuw object eraan toe te voegen! Nu we de basis hebben zoals we ze willen, laten we wat grotere en helderdere bursts toevoegen.
Psychedelisch worden
Laten we beginnen met enkele draaiende driehoeken. Het idee hier was om een hypnotiserend stroboscopisch effect te creëren, en het opzetten hiervan is eigenlijk vrij eenvoudig. Voeg nog een burst toe met deze parameters:
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
}
});Alles hier zou nu redelijk bekend moeten zijn, hoewel er een paar nieuwe punten zijn. U zult merken dat in plaats van de vorm te definiëren als een driehoek, we het a . hebben genoemd veelhoek voordat u het nummer van punten het heeft als 3.
We hebben ook gegeven vullen functie een reeks kleuren om mee te werken, elke vijfde driehoek zal teruggaan naar rood en het patroon zal doorgaan. De hoge waarde van de hoek instelling zorgt ervoor dat de burst snel genoeg ronddraait om het stroboscopische effect te produceren.
Als de code niet voor u werkt, zorg er dan voor dat u het object triangles hebt toegevoegd aan de event listener-klasse zoals we deden met de vorige objecten.
Lekker psychedelisch! Laten we nog een burst toevoegen om het te volgen.
Dansende vijfhoeken
We kunnen iets gebruiken dat bijna identiek is aan onze driehoeken object om de burst te maken die erop volgt. Deze licht gewijzigde code produceert felgekleurde overlappende draaiende zeshoeken:
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
}
});De belangrijkste verandering hier is 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, zorgt het stroboscopische effect van de driehoeken ervoor dat het lijkt alsof ze samen ronddraaien.
Een beetje willekeur
Laten we een effect toevoegen dat gebruikmaakt van willekeurige waarden. Maak een burst met deze eigenschappen:
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)',
}
});Deze burst zorgt voor lijnen die rood beginnen en vervagen tot transparantie, die na verloop van tijd krimpen. Wat deze component interessant maakt, is dat willekeurige waarden worden gebruikt om enkele van zijn eigenschappen te bepalen.
De gradenShift geeft het onderliggende object een starthoek. Door dit willekeurig te maken, geeft het bij elke klik een totaal andere burst. Willekeurige waarden worden ook gebruikt voor de straal en vertraging functies toe te voegen aan het chaotische effect.
Hier is het effect op zich:
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 elke keer dat de gebeurtenis wordt aangeroepen nieuwe willekeurige waarden. Zonder dit zou de vorm de eerste keer dat hij wordt aangeroepen willekeurige waarden kiezen en die waarden blijven gebruiken voor elke volgende aanroep. 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.
waarom heet het een smurfenaccount?
Willekeurigheid is echter niet de enige manier om dynamische bewegingen aan animaties toe te voegen. Laten we eens kijken naar de wankelen functie.
Duizelingwekkende lijnen
Om te laten zien hoe de wankelen functie werkt, gaan we iets maken dat lijkt op een Catherine Wheel. Maak een nieuwe burst met deze parameters:
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
}
});Alles is hier inmiddels bekend, een uitbarsting creëert 50 kinderen die rode of oranje lijnen zijn. Het verschil hier is dat we de . passeren vertraging eigendom a wankelen(10) functie. Dit voegt 10 ms vertraging toe tussen de emissie van elk kind, waardoor het het draaiende effect krijgt waarnaar we op zoek zijn.
De stagger-functie maakt geen gebruik van willekeurige waarden, dus je hebt geen genereren functie in de gebeurtenishandler deze keer. Laten we eens kijken wat we tot nu toe in actie hebben:
We zouden hier gemakkelijk kunnen 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({
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
}
});Dit object voegt niets nieuws toe aan waar we vandaag al aan hebben gewerkt, het is alleen opgenomen om te laten zien hoe complexe geometrische patronen eenvoudig kunnen worden gemaakt door middel van code.
Dit was niet het beoogde resultaat van dit object toen het werd gemaakt in de testfasen van het schrijven van deze zelfstudie. Toen de code eenmaal liep, werd het duidelijk dat ik iets veel mooiers was tegengekomen dan ik expres had kunnen maken!
Met dit laatste object toegevoegd, zijn we klaar. Laten we het hele ding in actie zien.
Mo.js: een krachtig hulpmiddel voor webanimaties
Deze eenvoudige introductie tot mo.js behandelt de basishulpmiddelen die nodig zijn om prachtige animaties te maken. De manier waarop die tools worden gebruikt, kan bijna alles creëren, en voor veel taken zijn webbibliotheken een eenvoudig alternatief voor het gebruik Photoshop , After Effects of andere dure software.
Deze bibliotheek is handig voor degenen die werken in zowel programmeren als webontwikkeling, 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: fouten bestaan niet, alleen gelukkige ongelukken!
Deel Deel Tweeten E-mail Is het de moeite waard om te upgraden naar Windows 11?Windows is opnieuw ontworpen. Maar is dat genoeg om u te overtuigen om over te stappen van Windows 10 naar Windows 11?
Lees volgende Gerelateerde onderwerpen- Programmeren
- JavaScript
Ian Buckley is een freelance journalist, muzikant, performer en videoproducent die in Berlijn, Duitsland woont. Als hij niet aan het schrijven of op het podium staat, sleutelt hij aan doe-het-zelf-elektronica of code in de hoop een gekke wetenschapper te worden.
Meer van Ian BuckleyAbonneer op onze nieuwsbrief
Word lid van onze nieuwsbrief voor technische tips, recensies, gratis e-boeken en exclusieve deals!
Klik hier om je te abonneren