Rotate an Image Along a Circular Path

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 }