Building an animated line component
In this section, we’ll create a new AnimatedLine component.
This component contains no animation logic itself but, instead, draws a line from the start of the line being animated to the current turtle position. Therefore, it needs two props: commandToAnimate, which would be one of the drawLine command structures shown previously, and the turtle prop, containing the position.
Let’s begin:
- Create a new file,
test/AnimatedLine.test.js, and prime it with the following imports anddescribeblock setup. Notice the inclusion of the sample instruction definition forhorizontalLine:import React from "react"; import ReactDOM from "react-dom"; import { initializeReactContainer, render, element, } from "./reactTestExtensions"; import { AnimatedLine } from "../src/AnimatedLine"; import { horizontalLine } from "./sampleInstructions"; const turtle ...