Circle Object

circle

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.

Geometric Objects

Home Next Lesson: Path Animation
copyright 1998 Dan Steinman