jQuery SVG animation tutorial and example

Before this tutorial, please access and download latest jQuery SVG framework [http://keith-wood.name/svg.html] and the jQuery framework itself.

The reference documentation is available on the website as well.

Now, we are going to create a blue fish and track your mouse movement animation. [DEMO]

Sept One: Draw SVG Container

Prepare a div: <div id=”svgintro”></div>

$(document).ready(function(){

$(‘#svgintro’).svg();
var svg = $(‘#svgintro’).svg(‘get’);

});

Step Two: Draw Coordination

function drawCoordinator(svg) {
var width = 850;
var height = 500;
var coordinator = svg.group({stroke: ‘gray’, strokeWidth: 1}); //return a new group, set any coordination drawing into this group, it will be easier to mamange
var x = 0;
for(i = 0; i <= width/10; i++){
svg.line(coordinator, x, 0, x, height);
x+=10;
}
var y=0;
for(i = 0; i <= height/10; i++){
svg.line(coordinator, 0, y, width, y);
y+=10;
}
}

Step Three: Draw a single blue fish

function drawFish(svg, startXPoint, startYPoint){
var fishWidth = 55;
var fishHeight = 15;
var fishTail = 20;
var fishTailHeight = 30;
var fishBodyWidth = fishWidth – fishTail

var fishGroup = svg.group(null, ‘fishGroup’, {fill: ‘blue’});
svg.ellipse(fishGroup, startXPoint, startYPoint, fishBodyWidth, fishHeight);

var fishTailStartX = startXPoint – fishBodyWidth/2;
var fishTailStartY = startYPoint;

var fishTailUpX = fishTailStartX – fishTail;
var fishTailUpY = startYPoint – fishTailHeight/2;

var fishTailDownX = fishTailStartX – fishTail;
var fishTailDownY = startYPoint + fishTailHeight/2;

svg.polyline(fishGroup, [
[fishTailStartX, fishTailStartY],
[fishTailUpX, fishTailUpY],
[fishTailDownX, fishTailDownY]
]);
}

Step Four: Create move fish function

function moveFish(svg, event){
var destinationX = event.pageX – $(‘#svgintro’).position().left;
var destinationY = event.pageY – $(‘#svgintro’).position().top;
setTimeout(function(){
var g = svg.getElementById(‘fishGroup’);
if(g != null){
svg.remove(g);
}//By each step, we have to remove the previous movement, otherwise, it will keep previous fish position.

if(startX < destinationX){
startX += 10;
}else if(startX > destinationX){
startX -= 10;
}
if(startY < destinationY){
startY += 10;
}else if(startY > destinationY){
startY -= 10;
}//setup movement and new position

drawFish(svg, startX, startY);
}, 1000);
}

Step Five: Wrap up

$(document).ready(function(){

$(‘#svgintro’).svg();
var svg = $(‘#svgintro’).svg(‘get’);
drawCoordinator(svg);
$(‘#svgintro’).mousemove(function(event) {
var g = svg.getElementById(‘fishGroup’);
if(g == null){
drawFish(svg, startX, startY);
}
moveFish(svg, event);
//svg.remove(g);
});

Advertisements

2 Comments

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s