I have an image (red, below), that I want to make travel along a circular path. The red image should always end in the same spot as it started.
Notes:
Do you really need a library, it's not that hard to do
$(document).ready(function (e) {
var startAngle = 0;
var unit = 215;
var animate = function () {
var rad = startAngle * (Math.PI / 180);
$('.circle').css({
left: 250 + Math.cos(rad) * unit + 'px',
top: unit * (1 - Math.sin(rad)) + 'px'
});
startAngle--;
}
var timer = setInterval(animate, 10);
});
FIDDLE
Here's one that does one loop, stops at the same place etc.
$(document).ready(function (e) {
var startAngle = 180;
var unit = 215;
var animate = function () {
if (startAngle > -180) {
var rad = startAngle * (Math.PI / 180);
$('.circle').css({
left: 250 + Math.cos(rad) * unit + 'px',
top: unit * (1 - Math.sin(rad)) + 'px'
});
startAngle--;
setTimeout(animate, 10);
}
}
$('.circle').on('click', function() {
startAngle = 180;
animate();
});
});
FIDDLE