Usporava animaciju napredno

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 = 0.08,
    granica = 300,
    prethodnoVremeAnimacije = 0,
    maxFPS = 20,
    vremeIzmedjuDvaFrejma = 0,
    // simulira 1000/60FPS (16.667ms) svaki put kada azurira
    standardnoVremeFrejma = 1000 / 60;

function azuriraj(vremeIzmedjuDvaFrejma) {
    // sto je vreme izmedju frejmova duze, pravi vece korake
    polozaj += brzina * vremeIzmedjuDvaFrejma;
    if (polozaj >= granica || polozaj <= 0) brzina = -brzina;
}

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

function glavniLup(trenutnoVremeAnimacije) {
    // usporava animaciju
    if (trenutnoVremeAnimacije < prethodnoVremeAnimacije + (1000 / maxFPS)) {
        requestAnimationFrame(glavniLup);
        return;
    }

    // prati akumulirano vreme that hasn't been simulated yet
    vremeIzmedjuDvaFrejma += trenutnoVremeAnimacije - prethodnoVremeAnimacije;
    prethodnoVremeAnimacije = trenutnoVremeAnimacije;

    // simulira ukupno proteklo vreme u fiksnim komadima
    // ako sporije radi, crtaj vece korake
    while (vremeIzmedjuDvaFrejma >= standardnoVremeFrejma) {
        azuriraj(standardnoVremeFrejma);
        vremeIzmedjuDvaFrejma -= standardnoVremeFrejma;
    }
    crtaj();
    requestAnimationFrame(glavniLup);
}

requestAnimationFrame(glavniLup);