Ajax and Ajax Frameworks

I have been a developer for nearly 20 years and a web developer for about 10 years. Over the years, I have considered creating a blog to share the things I have learned (and am learning) about web design and development, but I never seemed to have the time. When I began learning about web development using Ajax and Ajax Frameworks, I decided to take the time to create this blog.

My intention for this blog is to focus primarily on Ajax Frameworks, but since web development requires knowledge of many technologies, I will occasionally write about things such as CSS, Javascript, PHP, MySQL, Flash, etc.

Lately, I have been using JQuery as my primary Ajax tool. Although I have used other Ajax Frameworks in the past (Dojo Toolkit, Yahoo! User Interface Library, Scriptaculous/Prototype), JQuery has thus far been the easiest to learn. In my first few posts I will discuss some of the JQuery Plugins that I have created. Some of these include: a plugin for Google Maps (jquery.imGoogleMaps), Form validation and submission (jquery.imValidateForm), Page Populater (jquery.imPagePopulate), and a plugin to create lists (jquery.imList).

While I am still learning about some of the other Ajax Frameworks, I hope that what I have learned will be helpful to others. Just remember, “When you can pull the pebbles from my hand…”

Moving From Flash to Ajax, Javascript Animation Class

Wednesday, January 7th, 2009

After many years of creating Flash-enabled websites (and writing a lot of ActionScript), I decided to explore the use of Ajax. I had grown so accustom to developing websites where page refreshes weren’t required that I rarely created websites using HTML only. From everything that I read prior creating website using Ajax, I thought that it had the promise to replace Flash. My primary reason for exploring the use of Ajax to create websites was because, as I learned more about marketing a website (and how most search engines don’t/can’t index Flash-only sites), I decided that it was better to appear in a search engine’s listing than to have cool navigation (and animation!).

When I first began developing ajax-enabled sites, I did not use an Ajax Framework. I was working on a shopping cart site that was originally created using Flash. I first created a Javascript class (Class??) to handle the XMLHttpRequest. This Javascript object was based upon code that I got from a Sitepoint book entitled, Build Your Own AJAX Web Applications
. I modified it a bit so that it could handle scope issues, but most of the object remained unchanged.

I then created a Javascript animation object that was based upon functions that I found on shiriru.blogspot.com which are based upon equations by Robert Penner. The effects that I am able to create with this class do not compete with the types of effects that I can do using Flash or SwishMax, but it was good enough.

First I instantiate the object:

^?View Code JAVASCRIPT

var imAnimate = new imAnimate();

To move an element, I call the following function:

^?View Code JAVASCRIPT

imAnimate.animate(element, motion_type, property, easing, end);

Element: The element to be animated.

Motion type: (high, low, slow, fast, fadeIn, fadeout, sizeInc, sizeDec).

Property To Be changed: (width, height, top, left, opacity, font size).

Easing: (easeInBounce, linear, easeInOutBounce, easeOutBounce, easeInOutBack, easeOutBack, easeInBack, easeInOutElastic, easeOutElastic, easeInElastic, easeInOutCirc, easeOutCirc, easeInCirc, easeInOutExpo, easeOutExpo, easeInExpo, easeInOutSine, easeOutSine, easeInSine, easeInOutQuint, easeOutQuint, easeInQuint, easeInOutQuart, easeOutQuart, easeInQuart, easeOutCubic, easeInCubic).

End: The end state of the element. For example if you are changing the “Left” property of the element, this value is the x-coordinate (in pixels) of where you want to the element to stop.

In the shopping cart website, my client wanted the menus to move similar to the menus on Gucci’s site. So I created a menu object (Javascript “class”) and called the following method in order to animate the movement:

^?View Code JAVASCRIPT

this.moveMenus = function(dir) {
		var type='high';
		var prop='left';
		var easing='easeOutExpo';
		var end = (dir == 'next') ? '-235' : '235';
		thisMenu.imAnimate.animate(thisMenu.menuParent, type, prop, easing, end);
};

While I suppose that creating animation with Javascript Frameworks like JQuery or Dojo Toolkit may be more sophisticated, but I would not be surprised if Robert Penner’s equations form the basis of their animation.

Here’s the Code:

^?Download imAnimate.js

//http://shiriru.blogspot.com/2007/10/javascript-animation-make-things-move.html
//based on equations by Robert Penner http://robertpenner.com/
 
function imAnimate() {
	this.begin = null;
	this.end = null;
	this.startX = null;
	this.startY = null;
	this.startW = null;
	this.startH = null;
	this.startF = null;
	this.duration = 1000;
	this.fps = 35;
	this.obj = null;
	this.prop = null;
	this.easing = null;
 
	this.init = function(elm) {
		this.startX = elm.style.left;
		this.startY = elm.style.top;
		this.startW = elm.style.width;
		this.startH = elm.style.height;
		this.startF = elm.style.fontSize;
	};
 
	this.resetObj = function () {
		this.obj.style.left=this.startX;
		this.obj.style.top=this.startX;
		this.obj.style.width=this.startW;
		this.obj.style.height=this.startH;
		this.obj.style.fontSize=this.startF;
		if(!window.attachEvent) this.obj.style.opacity=1;
		else  this.obj.style.filter = "alpha(opacity=100)";
	}
 
	this.animate = function (elm, type, prop, easing, end) {
		this.obj = elm;
		this.init(elm);
		this.prop=prop;
		if (type=='high') this.fps=35;
		if (type=='med') this.fps=21;
		if (type=='low')  this.fps=6;
		if (type=='slow') this.duration=6000;
		if (type=='fast')  this.duration=600;
		if (type=='fadeIn')  {this.begin=0; this.end=1; }
		if (type=='fadeOut')  {this.begin=1; this.end=0;}
		if (type=='sizeInc')  {this.begin=0; this.end=end; }
		if (type=='sizeDec')  {
			if (prop=="width") {
				this.begin=elm.style.width; 
			} else if (prop=="height") {
				this.begin=elm.style.height; 
			}
			this.end=0;
		}
		if (prop=="left") {
			if ((BrowserDetect.browser == "Explorer") && (parseInt(BrowserDetect.version) >= 6) && (BrowserDetect.OS == "Windows")) {
				this.begin=elm.style.pixelLeft;	
			} else {
				this.begin=elm.offsetLeft;	
			}
			this.end=end;
		}
		if (prop=="top") {
			if ((BrowserDetect.browser == "Explorer") && (parseInt(BrowserDetect.version) >= 6) && (BrowserDetect.OS == "Windows")) {
				this.begin=elm.style.top;
			} else {
				this.begin=elm.offsetTop;
			}
			this.end=end;
		}
		if (prop=='fontSize')  {this.begin=15; this.end=30;}
		this.easing=easing;
		this.doAnimation();
	};
 
	this.doAnimation = function () {
		var begin 		= parseInt(this.begin);
		var end 		= parseInt(this.end);
		var change = (begin>=0) ? end-begin : end;
		var interval    = Math.ceil(1000/this.fps);
    	var totalframes = Math.ceil(this.duration/interval);
    	var step        = change/totalframes;
		var self = this;
		for(i=1;i <= totalframes;i++) {
     		(function() {
         		var frame=i;
         		function innerChangeWidth() {
             		var functionName=eval("self."+self.easing);
             		var increase=functionName(frame,begin,change,totalframes);
             		var slope=increase-begin;
 
             		unit=(self.prop=='opacity') ? '' : 'px';
             		if(window.attachEvent && !unit) { 
                  		increase*=100; 
                  		self.obj.style.zoom = 1;
                  		self.obj.style.filter = "alpha(opacity=" + increase + ")";
              		} else {
                     	self.obj.style[self.prop] = increase+unit; 
              		}
    			}
    			timer = setTimeout(innerChangeWidth,interval*frame);
              })();
 		}
	};
 
	this.linear = function (t, b, c, d) {
 		var m=c/d;
 		var a =t/d;
 		return m*t + b;
	};
 
	this.easeInQuad = function (t, b, c, d) {
 		return c*(t/=d)*t + b;
	};
 
	this.easeOutQuad = function (t, b, c, d) {
 		return -c *(t/=d)*(t-2) + b;
	};
 
	this.easeInOutQuad = function (t, b, c, d) {
 		if ((t/=d/2) < 1) return c/2*t*t + b;
 		return -c/2 * ((--t)*(t-2) - 1) + b;
	};
 
	this.easeInCubic = function (t, b, c, d) {
 		return c*(t/=d)*t*t + b;
	};
 
	this.easeOutCubic = function (t, b, c, d) {
 		return c*((t=t/d-1)*t*t + 1) + b;
	};
 
	this.easeInOutCubic = function (t, b, c, d) {
 		if ((t/=d/2) < 1) return c/2*t*t*t + b;
 		return c/2*((t-=2)*t*t + 2) + b;
	};
 
	this.easeInQuart = function (t, b, c, d) {
 		return c*(t/=d)*t*t*t + b;
	};
 
	this.easeOutQuart = function (t, b, c, d) {
 
 		return -c * ((t=t/d-1)*t*t*t - 1) + b;
	};
 
	this.easeInOutQuart = function (t, b, c, d) {
 		if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
 		return -c/2 * ((t-=2)*t*t*t - 2) + b;
	};
 
	this.easeInQuint = function (t, b, c, d) {
 		return c*(t/=d)*t*t*t*t + b;
	};
 
	this.easeOutQuint = function (t, b, c, d) {
 		return c*((t=t/d-1)*t*t*t*t + 1) + b;
	};
 
	this.easeInOutQuint = function (t, b, c, d) {
 		if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
 		return c/2*((t-=2)*t*t*t*t + 2) + b;
	};
 
	this.easeInSine = function (t, b, c, d) {
		return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
	};
 
	this.easeOutSine = function (t, b, c, d) {
 		return c * Math.sin(t/d * (Math.PI/2)) + b;
	};
 
	this.easeInOutSine = function (t, b, c, d) {
 		return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
	};
 
	this.easeInExpo = function (t, b, c, d) {
 		return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
	};
 
	this.easeOutExpo = function (t, b, c, d) {
 		return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
	};
 
	this.easeInOutExpo = function (t, b, c, d) {
 		if (t==0) return b;
 		if (t==d) return b+c;
 		if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
 		return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
	};
 
	this.easeInCirc = function (t, b, c, d) {
 		return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
	};
 
	this.easeOutCirc = function (t, b, c, d) {
		return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
	};
 
	this.easeInOutCirc = function (t, b, c, d) {
 		if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
 		return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
	};
 
	//a: amplitude (optional), p: period (optional)
	this.easeInElastic = function (t, b, c, d, a, p) {
 		if (t==0) {
  			return b; 
 		} 
 		if ((t/=d)==1) {
  			return b+c;  
 		}
 		if (!p) {
  			p=d*.3;
 		}
 		if (a < Math.abs(c)) {
   			a=c; 
   			s=p/4; 
 		} else {
  			a=Math.abs(c);
  			s = p/(2*Math.PI) * Math.asin(c/a);
 		}
 
 		return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
	};
 
	this.easeOutElastic = function (t, b, c, d, a, p) {
 		if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
 		if (a < Math.abs(c)) { a=c; var s=p/4; }
 		else {   a=Math.abs(c); var s = p/(2*Math.PI) * Math.asin (c/a);}
 		return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
 
	};
 
	this.easeInOutElastic = function (t, b, c, d, a, p) {
 		if (t==0) return b;  
 		if ((t/=d/2)==2) return b+c;  
 		if (!p) p=d*(.3*1.5);
 		if (a < Math.abs(c)) { 
  			a=c; var s=p/4; 
 		} else {
  			a=Math.abs(c);
  			var s = p/(2*Math.PI) * Math.asin (c/a);
 		}
 		if (t < 1) {
  			return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
 		}
 		return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
	};
 
	this.easeInBack = function (t, b, c, d, s) {
 		if (s == undefined) s = 1.70158;
 		return c*(t/=d)*t*((s+1)*t - s) + b;
	};
 
	this.easeOutBack = function (t, b, c, d, s) {
 		if (s == undefined) s = 1.70158;
 		return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
	};
 
	this.easeInOutBack = function (t, b, c, d, s) {
 		if (s == undefined) s = 1.70158; 
 		if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
 		return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
	};
 
	this.easeInBounce = function (t, b, c, d) {
 		return c - easeOutBounce (d-t, 0, c, d) + b;
	};
 
	this.easeOutBounce = function (t, b, c, d) {
 		if ((t/=d) < (1/2.75)) {
  			return c*(7.5625*t*t) + b;
 		} else if (t < (2/2.75)) {
  			return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
 		} else if (t < (2.5/2.75)) {
  			return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
 		} else {
  			return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
 		}
	};
 
	this.easeInOutBounce = function (t, b, c, d) {
 		if (t < d/2) return easeInBounce (t*2, 0, c, d) * .5 + b;
 		return easeOutBounce (t*2-d, 0, c, d) * .5 + c*.5 + b;
	};
}
 
//===========================
//Motion Types
//() - no value
//high
//low
//slow
//fast
//fadeIn
//fadeOut
//sizeInc
//sizeDec
 
//============================
// Ease Types
//easeInBounce
//linear
//easeInOutBounce
//easeOutBounce
//easeInOutBack
//easeOutBack
//easeInBack
//easeInOutElastic
//easeOutElastic
//easeInElastic
//easeInOutCirc
//easeOutCirc
//easeInCirc
//easeInOutExpo
//easeOutExpo
//easeInExpo
//easeInOutSine
//easeOutSine
//easeInSine
//easeInOutQuint
//easeOutQuint
//easeInQuint
//easeInOutQuart
//easeOutQuart
//easeInQuart
//easeOutCubic
//easeInCubic
 
//============================
//Prop Types
 
//width
//height
//left
//top
//opacity
//fontSize

Thisis a test

Categories: Ajax, Javascript
You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.

Moving From Flash to Ajax, Javascript Animation Class

Related posts

Home Business Ads

Categories

Archives

Tags

Comments

Blogroll