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)

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

Home Next Lesson: Path Animation
copyright 1998 Dan Steinman