Rotate an Image Along a Circular Path
From Unofficial Konfabulator Wiki
This code snippit demonstrates how to use Konfabulator's CustomAnimation object to rotate an image in a circular motion around a point. You can adjust the radius and speed to suit your needs.
Note that the animation will run indefinitely if used exactly as shown. To stop the animation you must return a value of false from the updateCircularAnimation function at the time you want it to stop.
a = new CustomAnimation(25, updateCircularAnimation);
a.currentFrame = 0;
a.totalFrames = 50; // Change this value to adjust speed
a.image = myImage; // Assign the image you want to rotate here
a.hCenter = 100; // hOffset of the rotation center point
a.vCenter = 100; // vOffset of the rotation center point
a.radius = 50; // Radius of the circular motion path
// Set the registration point of the image to its center so
// that the image will be properly positioned
myImage.hRegistrationPoint = (myImage.width / 2);
myImage.vRegistrationPoint = (myImage.height / 2);
function updateCircularAnimation() {
intAngle = Math.floor((this.currentFrame / this.totalFrames) * 360);
this.image.hOffset = this.hCenter + (this.radius * Math.cos(intAngle * Math.PI / 180));
this.image.vOffset = this.vCenter + (this.radius * Math.sin(intAngle * Math.PI / 180));
if (this.currentFrame < this.totalFrames) this.currentFrame++;
else this.currentFrame = 0;
return true; // Return false when you want the animation to stop
}
