Mastering React Test-Driven Development

Drawing lines

The Git tag for this section is request-animation-frame.

In order to use the AnimatedLine component, we'll first need to implement the animation logic that helps us divide drawCommands up into previously drawn commands, the current animating command, and future commands to animate.

We'll use the useEffect hook in combination with requestAnimationFrame to move the turtle.

To begin, we need to first change how we determine the position of the turtle. In the existing implementation, the final turtle position is passed into the Drawing component. This works perfectly fine if we aren't animating. But now we need to know where the turtle starts, and move it along each line, recording where it is at every single point, including its ...