Monday, December 17, 2007 @ 5:19 PM

Basic AJAX Scroll Animation w/YUI

Going through someone else's code is an art, you have to get into the developers mind and discover what he or she was thinking when writing the piece. While scavenging the Internet for an AJAX scroll animation, similar to that of the iPhone, I was so disgusted by the code I saw that I just wrote my own.

Some key things I had to keep in mind while writing this javascript code were, "How can I dynamically make one object slide off the screen while a second object slides onto the screen?" And "How can I keep users from going psychotic with my slider?"

To make the code dynamic, that was the easy part, I created a function calling out to the Yahoo UI Library (an AJAX source library). But to restrict when they user could slide the objects, that was the tricky part.

The YUI Library has three animation events that would allow me to limit when the slider would, well, slide...

onComplete

onStart

onTween

It was actually rather interesting how these three events functioned together. Checking if the animation is active (ie. isAnimated();) proved to be a thought provoking process. The onStart function would always return false while checking isAnimated, because onStart does a check right when you start the animation, not yet animated but almost animated. The onComplete function did exactly the same thing while checking isAnimated, it's done being animated. While the onTween function checks for every single tween or frame, it always returns true.

You can download the following YUI files from the Yahoo Developer Site (http://developer.yahoo.com/yui/):

yui/build/yahoo/yahoo.js
yui/build/event/event.js
yui/build/dom/dom.js
yui/build/animation/animation-min.js

<script type="JavaScript">
var movethis,target,x,y,goodToGo=true;

var waitForIt = function() {
 var onTheMove = this.isAnimated();
 if (onTheMove == true) {
  goodToGo=false;
 } else {
  goodToGo=true;
 }
}

function slide(moveThis, x, y) {
 if (goodToGo == true) {
  moveThis = document.getElementById(moveThis);
  if (x != null && y != null) {
   var anim = new YAHOO.util.Motion(moveThis, { 
points: { by: [x, y] } });
  }
  anim.onTween.subscribe(waitForIt);
  anim.onComplete.subscribe(waitForIt);
  anim.animate();
 }
}
</script>

// Jay, aka W3prodigy

Labels: ajax, how to, iphone development, javascript, yui

MindComet at 5:19 PM - View Post