Columpia.me, experimenting with SVG and jQuery Rotate

It was about time I programming something meaningless, just for fun.
It all started in one of those afternoons as normal. You know, looking for a free domains for the new web application you have thought.

Well, I didn’t find the domain that I was searching. In fact I’m still seeking (damn domain’s speculation!). However, I bought columpia.me. I don’t know, I guess I was amused and at that moment I was sure that it will be useful someday.

What was clear is that should appear some sort of swing, so I opened Photoshop and used pen like a pro.

Then with Illustrator I ended the character and the scene and started to search a library of jQuery to animate the character rotations. The idea I had in mind was drag&drop the character to start the swing movement.

I found jQuery Transit. It is an interesting library. It allows to create animations of transformations on a jQuery selectors using CSS. I tested and despite the transitions were very soft, but it didn’t incorporate a method of controlling the stop of the animations.

Seeking alternatives I found jQuery Rotate, it seemed much less elaborate but it worked perfectly to control the stop of the animation.

Is also simple to use, for example, to move the swing portion simply use this code:

$(foo).rotate({
        angle: $(this).getRotateAngle(),
	animateTo: angleDest,
	easing: transition,
	duration: time
});

Where angle is the start angle, animateTo is the end angle, easing the movement / acceleration function, acceleration and duration the duration of the transition.

And most importantly, to stop that transition (useful when interacting with the character), it’s necessary to invoke stopRotate.

The result was:

This entry was tagged as ,

Leave a Reply

Your email address will not be published.