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 |