Animeren

See the Pen Animeren by Frank Los (@franklosdus) on CodePen.

Met 4 regels code kun je een rechthoek oneindig laten animeren.

 

Objecten

Als parameter voor de functie animate geef je een object mee als parameter:

 

{

props:{x:800},

rewind:true,

loop:true

}

 

In dit geval is het object een soort let met een aantal lets erin.

Dat is handig en compact.

 

Je kan er zelf één maken. Als voorbeeld geef ik een fiets:

 

let fiets = {

kleur: "geel"

lengte: 2.3

}

 

Je kan er zelfs later nog een eigenschap aan toevoegen:

 

fiets.merk = "Giant";

 

De waarde van het object fiets is nu:

 

let fiets = {

kleur: "geel"

lengte: 2.3,

merk: "Giant"

}

 

Zie je dat je hier niet de operator = gebruikt maar : ?

Bovendien wordt hier elke regel gescheiden met een komma.

 

Indentatie

Ik verschuif het begin van regels naar rechts. Dit is een goede gewoonte.

 

De eigenschappen van de fiets maken onderdeel uit van de fiets. Daarom staan ze naar rechts. Zo kan ik gemakkelijk zien bij welk object ze horen.

Opdracht

Zoek naar animate: https://zimjs.com/docs.html

Experimenteer met wat je allemaal kunt veranderen aan de animatie.

 

Registratiepunt

Om te zien wat het registratiepunt is zet je deze code onder de code van de animatie:

 

const rect2 = new Rectangle(200, 100, "pink");
rect2.center(stage);
rect2.x = 100;

rect2.animate({

props:{

rotation:"360"},

rewind:true,

loop:true

});

 

De rechthoek draait om de linkerbovenhoek.

Dat is het registratiepunt.

 

Het registratiepunt verplaats je als volgt:

 

const rect2 = new Rectangle(200, 100, "blue");
rect2.centerReg(stage);
rect2.x = 100;

 

Zie je centerReg staan in de tweede regel?

Daarmee doe je 2 dingen in één keer.

Je zet de rechthoek in het midden van de stage.

En je zet het registratiepunt in het midden.

 

rect.2.outline()

Dit is ook een handige ingebouwde functie van ZIM. Zo kan ik zien waar het registratiepunt zit.

 

rect2.outline();

 

 

regX en regY

Je kunt het registratiepunt handmatig verschuiven met:

 

rect2.regX = bedenkZelfEenGetal;

 

en

 

rect2.regY = bedenkZelfEenGetal; 

 

Probeer maar eens uit met de animatie met rotatie.

Meer bekijken

Weer een blog van Frank Los

Ik deel graag mijn visie en projecten.
Dit soort berichten maandelijks in je mail?
Meld je dan hier aan.

illustratie kadootje

Ik geef gelijk ook een e-book cadeau met tips over goede uitleg!

Delen is fijn!

Wil je zelf uitblinken met visuele communicatie?

Bekijk dan mijn aanpak.

Wellicht wil je meer weten over mij.

illustratie van Frank Los
Frank Los
frank@weereenlos.nl06 430 466 58

TUSSEN DE OREN

uitleg die aankomt

Goede uitleg
is ontzettend lastig.

Deze tips helpen jou
keer op keer.
Download mijn gratis e-book
met poster!
illustratie van Frank Los
CookiesDisclaimerPrivacystatement