Basics Of Animations

FPS

Frames Per Second

Devtools -> Rendering -> FPS meter

An Animation Loop

const targetFPS = 60;

function animate() {
    // do stuff

    setTimeout(() => {
        animate();
    }, 1000 / targetFPS);
}
                    

Is This Recommended?

NO

Event Loop & Render/Task/MicroTask Queue ...

Pipeline

What Happens In One Frame

Triggers

So...

What Happens to SetTimeout

Better Pattern

requestAnimationFrame(animate);

function animate() {
    calc();
    paint();
    requestAnimationFrame(animate);
}
                    

Layers

Seperated Layer For Animation

Devtools -> Layers

Animation & Game

Doodle Jump

The end.