Pure JavaScript animatie snelheid

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Bryan De Baar

Bryan De Baar

29/11/2017 23:43:07
Quote Anchor link
Hallo,

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
 
PHP hulp

PHP hulp

28/02/2020 22:23:35
 
Jacco Engel

Jacco Engel

30/11/2017 09:01:43
Quote Anchor link
Bryan,

In dit stukje code word de snelheid van de animatie op 2 plaatsen bepaald :
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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)
PHP script in nieuw venster Selecteer het PHP script
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)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
/* Uitgeschreven */
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)
PHP script in nieuw venster Selecteer het PHP script
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)
PHP script in nieuw venster Selecteer het PHP script
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
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.