The Glide methods are almost the same as the Slide Methods except they use a different formula for moving the layer. The Slide methods are simple straight-line animations, whereas the Glide methods use trigonometric math to create a subtle acceleration or deceleration effect. The result is some very slick looking animations.
As with the Wipe methods, I've made the Glide library a separate javascript file, dynlayer-glide.js. You must call include this file in any code that uses the glide methods:
<SCRIPT LANGUAGE="JavaScript" SRC="dynlayer.js"></SCRIPT> <SCRIPT LANGUAGE="JavaScript" SRC="dynlayer-glide.js"></SCRIPT>
You can individually assign the glide methods when necessary:
objectName = new DynLayer("objectNameDiv")
objectName.glideInit = DynLayerGlideInit
objectName.glideInit()
Once you've done that you have 2 methods by which to start the glide animation...
Glides the layer to a specific co-ordinate. The parameters are almost the same as in the slideTo() method:
objectName.glideTo(startSpeed,endSpeed,endx,endy,angleinc,speed,fn)
The angleinc parameter is probably the only one which isn't obvious. The glide methods use a Sine wave as the basis for the acceleration, and the angleinc simply determines how many degrees to jump each time. The bigger the angleinc, the bigger the jumps it will make. So it is similar to the inc value in the Slide methods - usually a value from 5 to 10 is good to use.
Example: glides to (50,50), starting slow, ending slow, at 10 degrees, and 20 milliseconds per interval.
mylayer.glideTo("slow","slow",50,50,10,20)
Same as all the others, glideBy() shifts the location by a given number of coordinates:
objectName.glideBy(startSpeed,endSpeed,distx,disty,angleinc,speed,fn)
Where distx and disty, are now the amount it will shift by.
View dynlayer-glide1.html for a glide example.
I have included this in a file named "dynlayer-glide.js"
// Glide Methods
// Copyright 1998 Dan Steinman
// Available at the Dynamic Duo (http://www.dansteinman.com/dynduo/)
// Aug. 7, 1998.
// In order to use this code you must keep this disclaimer
function DynLayerGlideInit() {
this.glideTo = DynLayerGlideTo
this.glideBy = DynLayerGlideBy
this.glideStart = DynLayerGlideStart
this.glide = DynLayerGlide
}
function DynLayerGlideTo(startSpeed,endSpeed,endx,endy,angleinc,speed,fn) {
if (endx==null) endx = this.x
if (endy==null) endy = this.y
var distx = endx-this.x
var disty = endy-this.y
this.glideStart(startSpeed,endSpeed,endx,endy,distx,disty,angleinc,speed,fn)
}
function DynLayerGlideBy(startSpeed,endSpeed,distx,disty,angleinc,speed,fn) {
var endx = this.x + distx
var endy = this.y + disty
this.glideStart(startSpeed,endSpeed,endx,endy,distx,disty,angleinc,speed,fn)
}
function DynLayerGlideStart(startSpeed,endSpeed,endx,endy,distx,disty,angleinc,speed,fn) {
if (this.glideActive) return
var slantangle = Math.abs(Math.atan(disty/distx)*180/Math.PI)
if (endx>=this.x) {
if (endy>this.y) slantangle = 360-slantangle
}
else {
if (endy>this.y) slantangle = 180+slantangle
else slantangle = 180-slantangle
}
slantangle *= Math.PI/180
var amplitude = Math.sqrt(Math.pow(distx,2) + Math.pow(disty,2))
if (!fn) fn = null
this.glideActive = true
if (startSpeed == "fast") {
if (endSpeed=="fast") this.glide(1,amplitude/2,0,90,this.x,this.y,slantangle,endx,endy,distx,disty,angleinc,speed,fn)
else this.glide(0,amplitude,0,90,this.x,this.y,slantangle,endx,endy,distx,disty,angleinc,speed,fn)
}
else {
if (endSpeed=="fast") this.glide(0,amplitude,-90,0,this.x+distx,this.y+disty,slantangle,endx,endy,distx,disty,angleinc,speed,fn)
else this.glide(0,amplitude/2,-90,90,this.x+distx/2,this.y+disty/2,slantangle,endx,endy,distx,disty,angleinc,speed,fn)
}
}
function DynLayerGlide(type,amplitude,angle,endangle,centerX,centerY,slantangle,endx,endy,distx,disty,angleinc,speed,fn) {
if (angle < endangle && this.glideActive) {
angle += angleinc
var u = amplitude*Math.sin(angle*Math.PI/180)
var x = centerX + u*Math.cos(slantangle)
var y = centerY - u*Math.sin(slantangle)
this.moveTo(x,y)
setTimeout(this.obj+'.glide('+type+','+amplitude+','+angle+','+endangle+','+centerX+','+centerY+','+slantangle+','+endx+','+endy+','+distx+','+disty+','+angleinc+','+speed+',\''+fn+'\')',speed)
}
else {
if (type==1) this.glide(0,amplitude,-90,0,this.x+distx/2,this.y+disty/2,slantangle,endx,endy,distx,disty,angleinc,speed,fn)
else {
this.glideActive = false
this.moveTo(endx,endy)
eval(fn)
}
}
}
| Home | Next Lesson: Geometric Objects |