Path animation on canvas
What is this?
- Includes option to display the path, perhaps useful for development / debugging.
- Includes rotate to path calculation. Angle at current position: °
- Toggle the graphics to see the rotation: dot; line; trails.
- Rotation can be applied to DOM elements. Toggle DOM arrow.
- Auto-play or interactive toggle. If interactive, animation is controlled by mouse.x position over the canvas.
The path is Silverstone racetrack which I drew and exported using Flash, then quickly reformatted the data for this system.
This path is px long.
It is defined by the following string:
This simple example uses a linear progression to animate the dot along the line, but it could easily be eased.
I have written a set of familiar drawing API like methods to contruct the SVG path.
Not strictly necessary for the initial banner purpose, but will be crucial for any interactive line drawing:
Thoughts for development....
- Add option to display path
- Orient to path
- No native method, so...
- Look ahead and calculate line angle
- Make playback interactive
- Make build interactive