Animation Loops & requestAnimationFrame()

What is an animation loop?

A repeated process of updating and redrawing a scene to create movement.

What does requestAnimationFrame() do?

Asks the browser to schedule a function for the next animation frame.

What is the purpose of animate() in an animation?

It contains the instructions for updating and drawing each frame.

Why is animate() called at the end of the code?

To start the animation for the first time.

What are the three basic steps in a Canvas animation loop?

Clear the canvas, update the object's state, and draw the scene again.

Why is clearRect() used in an animation loop?

To erase the previous frame before drawing the updated scene.

What does x = x + 2 do in an animation?

Increases the x-position by two, moving the object right.

What happens if x increases but y stays the same?

The object moves horizontally.

What happens if y increases but x stays the same?

The object moves downwards.

What does ctx.arc() do?

Creates a circular or curved path.

What does ctx.fill() do?

Fills the current path with the selected fill colour.

What is a frame in animation?

One individual drawing or image in an animation sequence.

Why must an animation loop repeat?

To continually update and redraw the scene so movement appears continuous.

What is the correct order of a basic animation loop?

Clear, update, draw, then schedule the next frame.

Why can movement based on pixels per frame vary in speed?

The browser's frame rate can change, affecting how far an object moves per second.