The Circle Object will slide a layer in a perfect circle.
Initialization:
The Circle Object is an addon object to the DynLayer. You must make a new property onto the DynLayer and make that the Circle Object:
objectName.circle = new Circle("objectName","circle")
Example:
mylayer = new DynLayer("mylayerDiv") mylayer.circle = new Circle("mylayer","circle")
You must pass the name of the DynLayer and the name of the new circle object (which would usually be "circle") to the Circle Object. These 2 pieces of information are needed in order for the circle object to access the DynLayer.
The play() Method:
The play() method begins the slide along a circular path. You must pass information to the play() method that define the shape and properties of the circle:
objectName.circle.play(radius,angleinc,angle,endangle,speed,fn)
Examples:
A circle, radius 100, increment 5 degrees (clockwise), starting at 0 degrees, ending at 90 degrees, at 20 milliseconds per repetion:
mylayer.circle.play(100,5,0,90,20)
The same except it loops:
mylayer.circle.play(100,5,0,null,20)
The pause() and stop() Methods:
The pause() method will pause the current circular path. The next time a play() method is called it will continue along the same circular path:
objectName.circle.pause()
The stop() method will stop the current circular motion. The next time a play() method is called it will slide along a new circular path.
objectName.circle.stop()
Source Code:
// Circle Object // Copyright 1998 Dan Steinman // Available at the Dynamic Duo (http://www.dansteinman.com/dynduo/) // June 22, 1998. // In order to use this code you must keep this disclaimer function Circle(dynlayer,name) { this.dynlayer = dynlayer.obj this.name = name this.play = CirclePlay this.slide = CircleSlide this.pause = CirclePause this.stop = CircleStop } function CirclePlay(radius,angleinc,angle,endangle,speed,fn) { if (this.active) return if (!this.paused) { this.radius = radius this.angleinc = angleinc this.angle = angle this.endangle = endangle this.speed = speed this.fn = fn this.centerX = eval(this.dynlayer+'.x') - this.radius*Math.cos(this.angle*Math.PI/180) this.centerY = eval(this.dynlayer+'.y') + this.radius*Math.sin(this.angle*Math.PI/180) if (this.endangle!=null) { this.angleinc = Math.abs(this.angleinc) if (this.endangle<this.angle) this.angleinc *= -1 } } this.active = true this.paused = false eval(this.dynlayer+'.'+this.name+'.slide()') } function CircleSlide() { if (this.active && (this.endangle==null || Math.abs(this.angleinc)<Math.abs(this.endangle-this.angle))) { this.angle += this.angleinc var x = this.centerX + this.radius*Math.cos(this.angle*Math.PI/180) var y = this.centerY - this.radius*Math.sin(this.angle*Math.PI/180) eval(this.dynlayer+'.moveTo('+x+','+y+')') setTimeout(this.dynlayer+'.'+this.name+'.slide()',this.speed) } else { if (this.endangle!=null) { var x = Math.round(this.centerX + this.radius*Math.cos(this.endangle*Math.PI/180)) var y = Math.round(this.centerY - this.radius*Math.sin(this.endangle*Math.PI/180)) eval(this.dynlayer+'.moveTo('+x+','+y+')') } if (!this.paused) { this.active = false eval(this.fn) } } } function CirclePause() { if (this.active) { this.active = false this.paused = true } } function CircleStop() { this.active = false this.paused = false }
Demo:
View circle1.html for a circle object demo.
Home | Next Lesson: Path Animation |