Having said that, even with switching out div tags, you still get the issue of: Set a div A to visible, set div A to hidden, set set B to visible, which yields flicker.
OR, Set div A to visible, set div B to visible, set div A to hidden, which yield a sort of 2 steps forward, 1 step back form on animation, which is particularly nasty on transparent/alpha channel images. Matthew D. Diez -----Original Message----- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Diez, Matthew Sent: Monday, July 30, 2007 9:47 AM To: Mike Adair Cc: [email protected] Subject: Re: [Mapbuilder-devel] Doing animation with OL Mike: I had given that a fair amount of thought to it, and was discouraged earlier, as URL substituion seemed the cleaner/faster way to do it. Let me put together a brief test and see how that works out. Matthew D. Diez -----Original Message----- From: Mike Adair [mailto:[EMAIL PROTECTED] Sent: Monday, July 30, 2007 8:07 AM To: Diez, Matthew Cc: [email protected] Subject: Re: [Mapbuilder-devel] Doing animation with OL Matt, Have you tried pre-loading all layers in the animation and then just cycling through them with the timer loop setting their visibility? i.e. instead of using just one layer, use many layers, mostly hidden. That is the approach that was used pre-OL days. Mike Diez, Matthew wrote: > > Crossposted to the OL dev list. No luck over there. > > > > 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 > > _______________________________________________ > Dev mailing list > [EMAIL PROTECTED] > http://openlayers.org/mailman/listinfo/dev > > 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 > > ---------------------------------------------------------------------- > -- > > ---------------------------------------------------------------------- > --- This SF.net email is sponsored by: Splunk Inc. > Still grepping through log files to find problems? Stop. > Now Search log events and configuration files using AJAX and a browser. > Download your FREE copy of Splunk now >> http://get.splunk.com/ > ---------------------------------------------------------------------- > -- > > _______________________________________________ > mapbuilder-devel mailing list > [email protected] > https://lists.sourceforge.net/lists/listinfo/mapbuilder-devel > ------------------------------------------------------------------------ - This SF.net email is sponsored by: Splunk Inc. Still grepping through log files to find problems? Stop. Now Search log events and configuration files using AJAX and a browser. Download your FREE copy of Splunk now >> http://get.splunk.com/ _______________________________________________ mapbuilder-devel mailing list [email protected] https://lists.sourceforge.net/lists/listinfo/mapbuilder-devel ------------------------------------------------------------------------- This SF.net email is sponsored by: Splunk Inc. Still grepping through log files to find problems? Stop. Now Search log events and configuration files using AJAX and a browser. Download your FREE copy of Splunk now >> http://get.splunk.com/ _______________________________________________ mapbuilder-devel mailing list [email protected] https://lists.sourceforge.net/lists/listinfo/mapbuilder-devel
