Pure JavaScript animatie snelheid
Is het mogelijk de snelheid van en animatie op te schroeven?
Het betreft een style.width animatie met een intervaltijd, echter krijg ik deze niet versneld :(
Codepen
Code is afkomstig van w3school.com (1 kleine aanpassing)
Gr. Bryan
In dit stukje code word de snelheid van de animatie op 2 plaatsen bepaald :
Code (php)
1
var id = setInterval(frame,5);
De 5 geeft in dit geval aan dat de actie elke 5 miliseconden word uitgevoerd. Dit is redelijk snel en hier is dan in dit geval ook niet echt een merkbaar verschil als je hem aanpast (lager is sneller).
Echter kun je hem voor de test even op 100 zetten en dan zul je zien dat het merkbaar langzamer is.
Dit is hoe snel de animatie word geupdate.
Dan is er nog :
Code (php)
1
pos++;
Dit bepaalt hoe groot de update is. In dit geval 1 pixel elke 5 Miliseconden tot hij 250 pixels lang is. Dit houd dus in dat je animatie in totaal 1250 miliseconden lang is.
Stel we zouden dit vervangen door:
Code (php)
1
2
3
4
2
3
4
/* Uitgeschreven */
pos = pos + 5;
/* Kort */
pos += 5
pos = pos + 5;
/* Kort */
pos += 5
Dan worden er elke 5 miliseconden 5 pixel bij opgeteld tot je op 250px zit. Dit brengt je op een totale animatie duur van 250 miliseconden, en dat is dan ook in dit geval de manier om de animatie snelheid te verhogen.
LOET OP:
Bij het aanpassen van het aantal pixels moet je er wel op letten dat er altijd 250 uit moet kunnen komen. Dus bijvoorbeeld 5,10 of 25.
Dit komt door :
Code (php)
1
if (pos == 250) {
Als je niet precies op 250 uit komt zal je loop nooit stoppen. Dit is op te lossen door dit te vervangen door :
Code (php)
1
if (pos < 250) {
Dit heeft echter als grote nadeel dat je balk dan niet gegarandeerd 250px lang word
Gewijzigd op 30/11/2017 09:19:15 door Jacco Engel