About: Rotate an Image Along a Circular Path   Sponge Permalink

An Entity of Type : owl:Thing, within Data Space : 134.155.108.49:8890 associated with source dataset(s)

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.

AttributesValues
rdfs:label
  • Rotate an Image Along a Circular Path
rdfs:comment
  • 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.
dcterms:subject
abstract
  • 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 }
Alternative Linked Data Views: ODE     Raw Data in: CXML | CSV | RDF ( N-Triples N3/Turtle JSON XML ) | OData ( Atom JSON ) | Microdata ( JSON HTML) | JSON-LD    About   
This material is Open Knowledge   W3C Semantic Web Technology [RDF Data] Valid XHTML + RDFa
OpenLink Virtuoso version 07.20.3217, on Linux (x86_64-pc-linux-gnu), Standard Edition
Data on this page belongs to its respective rights holders.
Virtuoso Faceted Browser Copyright © 2009-2012 OpenLink Software