[OpenLayers-Dev] Doing animation with OL

[Diez, Matthew]

I've been developing an application to do animation of Untiled layers,
but I'm running across a bit of a design issue.

Snippet #1 - The blinking animation 
===================================

// on timestamp change event

var curLayer = objRef.oLlayers[layerName]				
curLayer.mergeNewParams({"TIME":timestamp.firstChild.nodeValue});

The above calls mergeNewParams, which of course, destroys/erases the
image div, and then draws the new image with the new timestamp.
The problem is, when trying to animate, you get a pattern of:
Draw Frame 1 -> Erase Frame 1 -> Draw Frame 2.

The 'erase' step in between causes for some pretty awful flicker. So I
tried Snippet #2.

Snippet #2 - The memory leak
============================

var curLayer = objRef.oLlayers[layerName]				
curLayer.tile = null;
curLayer.mergeNewParams({"TIME":timestamp.firstChild.nodeValue});

By setting the tile to null, it actually doesn't do destroy the image
div, it merely replaces the contents. 
This yields:
Draw Frame 1 -> Draw Frame 2 -> Draw Frame X

This is, of course, the desired behavior, but it causes two problems:
A) Frame 1's DIV never gets destroyed/erased, causing a memory leak
B) When using transparent images, all are drawn on top of one another.

So, on to Snippet #3 
==============================

/* This is Draw 1, Draw 2, Remove 1 
curLayer.tile = null;
curLayer.mergeNewParams({"TIME":timestamp.firstChild.nodeValue});
var oldImageId = curLayer.tile.imgDiv.id;
				
var commandString = 'removeNode(\"' + oldImageId + '\")';

setTimeout(commandString, 1000);

function removeNode(oldImageId) {
	var olddiv = document.getElementById(oldImageId);
		
	var d = olddiv.parentNode;
	var e = d.parentNode;
	d.removeChild(olddiv);
	e.removeChild(d);			
}


So, here, 
Draws Frame 1, Draws Frame 2, and then removeNode waits a second and
destroys Frame 1. 

This solves Snippet 2, Issue A, but looks hideous for Issue B.
Basically, you can actually see Frame 1 being drawn on top of, and then
removed, which makes for an admittedly awful user experience, even with
only 5 ms of time-delay.

And, then, Snippet #4 - URL substitution
=====================

var oldImageUrl = curLayer.tile.imgDiv.src;
var newImageUrl = oldImageUrl;		
newImageUrl = newImageUrl.replace(/TIME\=.*?\&/,'TIME=' +
timestamp.firstChild.nodeValue + '&');
curLayer.tile.imgDiv.src = newImageUrl;

Okay, so what we're doing here is direct regexp replacement of the URL.
This works, but with some issues.
A) It's somewhat slower than using mergeNewParams (cannot figure out
why)
B) I really don't like doing direct URL pattern substitution like this
(it strikes me as error-prone)
C) Is there a more 'OpenLayers-ish' way to do this?

So, can anyone suggest something that might be better than Snippet #4?

Thanks, 
Matthew D. Diez


IEM CONFIDENTIAL INFORMATION PLEASE READ OUR NOTICE:
http://www.iem.com/e_mail_confidentiality_notice.html

Effective July 15, 2007 IEM Headquarters will have a new physical and mailing address:
8550 United Plaza Blvd, Suite 501
Baton Rouge, LA 70809
If you should have any questions, please feel free to contact us at 225.952.8191