This plugin for jQuery.Keyframes generates complex movement paths.
$.keyframe.bezierPath( rules, [startX,startY], [endX,endY], [pullX,pullY] );
Super simple example:
var rules = $.keyframe.bezierPath( { name: 'curvy' } , [1,1], [400,1], [200,300] );
$.keyframe.define([rules]);
$(window).load(function(){
$('.block').playKeyframe('curvey 5000 ease 0 1 normal forwards');
});
$.keyframe.bezierPath( rules, [startX,startY], [endX,endY], [pull1X,pull1Y], [pull2X,pull2Y] );
Simple example:
var rules = $.keyframe.bezierPath( { name: 'curvyplus' }, [1,100], [800,100], [400,-100], [50, 600]);
$.keyframe.define([rules]);
$(window).load(function()
$('.block').playKeyframe('curveyplus 5000 ease 0 1 normal forwards');
});
$.keyframe.circlePath( rules, [centerX, centerY], radius);
Simple Example:
var rules = $.keyframe.circlePath( { name: 'circular' }, [100, 100], 40);
$.keyframe.define([rules]);
$(window).load(function()
$('.block').playKeyframe('circular 5000 linear 0 infinite normal forwards');
});By default the paths are set to 100 steps, but you can change them to suit your needs...
$.keyframe.pathfinderOpts.bezierSteps = 100;
$.keyframe.pathfinderOpts.circleSteps = 100;http://jsfiddle.net/krazyjakee/N652c/ - Bubbles in space game.