Ticker

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

De functie animate is één manier om te animeren. Een andere mogelijkheid is het gebruik van Ticker.

 

De Ticker doet niks anders dan ongeveer 60 keer per seconde het frame updaten (middels window.requestAnimationFrame())

 

In de functie die je eraan toevoegt kun je iets animeren:

 

Ticker.add(laatVallen);

 

In dit geval is de Ticker handig om te gebruiken. Elke keer als de cirkel onder uit beeld is verdwenen verhoog ik de snelheid.

 

Je krijgt maffe optische effecten met deze code. Op een gegeven moment zie je de cirkel helemaal niet meer. Daarom zette ik een knop neer om te resetten.

 

Andere manier om een functie te schrijven

Eerst liet ik je als volgt zien hoe je een functie kan schrijven:

 

function laatVallen (){

}

 

Nu schrijf ik opeens een functie zo:

 

const laatVallen = ()=>{

}

 

Deze laatste is een nieuwe manier van Javascript schrijven die ik je voor de volledigheid wil laten zien.

 

Het nadeel van deze laatste manier is hier dat je de functie alleen kan aanroepen nadat je de functie hebt gedeclareerd. Anders kan het programma hem niet vinden.

 

Opdracht

Roep de functie aan boven de functie.

Bekijk hoe je programma crasht.

 

Opdracht

Voeg een tekstveld toe aan de stage.

Laat dit tekstveld weergeven wat de huidige snelheid is.

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