The Dynamic Duo - Hover Object

Hover Object

hover

The Hover Object will hover a layer in a straight-line.

Initialization:


objectName.hover = new Hover("objectName","hover")

Example:


mylayer = new DynLayer("mylayerDiv")

mylayer.hover = new Hover("mylayer","hover")

The play() Method:

The play() method begins the hover motion:


objectName.hover.play(amplitude,angleinc,angle,cycles,orientation,speed,fn)

amplitude - the amplitude of the hover motion
angleinc - angle incremention
angle - starting angle
cycles - the number of cycles to move before stopping
orientation - 'v' for vertical, 'h' for horizontal
speed - speed of repetition
fn - (optional) function or statement to execute when complete

If you want the hover to keep looping then pass null for the cycles value.

Examples:


mylayer.hover.play(60,8,0,1,'v',10)

The pause() and stop() Methods:

Work the same as in the circle() method.


objectName.hover.pause()

objectName.hover.stop()

Source Code:


// Hover 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 Hover(dynlayer,name) {

	this.dynlayer = dynlayer.obj

	this.name = name

	this.play = HoverPlay

	this.slide = HoverSlide

	this.pause = HoverPause

	this.stop = HoverStop

}

function HoverPlay(amplitude,angleinc,angle,cycles,orientation,speed,fn) {

	if (this.active) return

	if (!this.paused) {

		this.amplitude = amplitude

		this.angleinc = angleinc

		this.angle = angle

		this.cycles = cycles

		this.orientation = orientation

		this.speed = speed

		this.active = false

		this.centerX = eval(this.dynlayer+'.x') - this.amplitude*Math.sin(this.angle*Math.PI/180)

		this.centerY = eval(this.dynlayer+'.y') + this.amplitude*Math.sin(this.angle*Math.PI/180)

	}

	this.active = true

	this.paused = false

	eval(this.dynlayer+'.'+this.name+'.slide()')

}

function HoverSlide() {

	if (this.active && (this.cycles==null || Math.abs(this.angleinc)<Math.abs(this.cycles*360-this.angle))) {

		this.angle += this.angleinc

		var x = (this.orientation=="h")? this.centerX + this.amplitude*Math.sin(this.angle*Math.PI/180) : null

		var y = (this.orientation=="v")? this.centerY - this.amplitude*Math.sin(this.angle*Math.PI/180) : null

		eval(this.dynlayer+'.moveTo('+x+','+y+')')

		setTimeout(this.dynlayer+'.'+this.name+'.slide()',this.speed)

	}

	else if (!this.paused) {

		this.active = false

		eval(this.fn)

	}

}

function HoverPause() {

	if (this.active) {

		this.active = false

		this.paused = true

	}

}

function HoverStop() {

	this.active = false

	this.paused = false

}

Demo:

View hover1.html for a hover example.

Geometric Objects