Usporava animaciju

by Daman Daman

HTML

<div id="kutija" style="position: absolute; top: 10px; left: 10px; height: 50px; width: 50px; background-color: red;"></div>

JavaScript

var kutija = document.getElementById('kutija'),
    polozaj = 10,
    brzina = 2,
    granica = 300,
    poslednjeVremeAnimacije = 0,
    maxFPS = 10;

function azuriraj() {
    polozaj += brzina;
    // menja pravac ako predje granicu
    if (polozaj >= granica || polozaj <= 0) brzina = -brzina;
}

function crtaj() {
    kutija.style.left = polozaj + 'px';
}

function glavniLup(trenutnoVremeAnimacije) {
    // usporava frame rate.    
    if (trenutnoVremeAnimacije < poslednjeVremeAnimacije + (1000 / maxFPS)) {
        requestAnimationFrame(glavniLup);
        //return;
    }
    poslednjeVremeAnimacije = trenutnoVremeAnimacije;

    azuriraj();
    crtaj();
    requestAnimationFrame(glavniLup);
}

requestAnimationFrame(glavniLup);