Path Animator
Moves a DOM element along an SVG path (or do whatever along a path...)
DEMO PAGE
Basic use example:
var path = "M150 0 L75 200 L225 200 Z"; // an SVG path pathAnimator, startFromPercent = 10, // start from 10% of the path stopAtPercent = 70; // stop at 70% of the path (which will then call the onDone function callback) // initiate a new pathAnimator object pathAnimator = new PathAnimator( path, { duration : 4, // seconds that will take going through the whole path step : step, easing : function(t){ return t*(2-t) }, onDone : finish(this) }); pathAnimator.start( startFromPercent, stopAtPercent ); function step( point, angle ){ // do something every "frame" with: point.x, point.y & angle } function finish(){ // do something when animation is done }Settings
| Name | Type | Default | Info |
|---|---|---|---|
| duration | Number | undefined | (in seconds) the duration of going through the path |
| step | Function | undefined | a callback function which is called on every frame |
| onDone | Function | undefined | (optional) a callback function which will be called at the end |
| reverse | Boolean | false | go back or forward along the path |
| startPercent | Number | 0 | Where to start on the path, between 0% to 100% |
| easing | Function | 1000/60 | (optional) mathematical function for easing |
| fps | Number | undefined | (optional) frames per second |
