1 / 18

DOM Animation

DOM Animation. Changing the DOM objects over time. How do I animate DOM?. setTimeOut() and setInterval() the ONLY way for you to loop with a time delay each function call the function does 1 change in the animation CSS3 animations have DOM events set CSS Class with DOM

grant
Download Presentation

DOM Animation

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. DOM Animation • Changing the DOM objects over time

  2. How do I animate DOM? • setTimeOut() and setInterval() • the ONLY way for you to loop with a time delay • each function call the function does 1 change in the animation • CSS3 animations have DOM events • set CSS Class with DOM • CSS3 triggers DOM events when it starts and stops

  3. The Image Object • Image object is not the <img> tag • var myImage = new Image(); • Javascript can make new Image() independent of the HTML document • JavaScript can change images’ src (tag or object) • myImage.src="url to image file";

  4. src Property • Dynamically change images (even on old browsers) • More efficient than loading a new document each time an image must be altered • Unfortunately, src URLs must be coded in javascript • file/folder naming conventions + building on the HTML coded URL can minimize issues

  5. Animate by changing images • <img id="sprite" src="frame1.jpg" /> • setTimeout( function(){ • var x= document.getElementById("sprite"); • x.src="frame2.jpg"; • } , 100);

  6. Image Caching / Pre-load • Create a new object using the Image() constructor • Assign graphic file to SRC property of new Image object • Assign SRC property of new Image object to SRC property of an <img> tag

  7. Tricks of the Trade • Prepare/Setup before animating AND preload too • Employ some time saving naming conventions: • Naming format for IDs • Naming format for Classes • Preload in document: place <img> for each graphic inside a visually hidden <div> or iFrame • iFrame works best: set size to 0 make a simple html page with everything the site will use.

  8. Example • var kick = new Array(); • kick[0] = "roundhouse1.gif"; • kick[1] = "roundhouse2.gif"; • kick[2] = "roundhouse3.gif"; • kick[3] = "roundhouse4.gif";

  9. <html><head><title>Fighter</title> <script>var kick = new Array();kick[0] = "roundhouse1.gif"; // Should be a loop since the files are numberedkick[1] = "roundhouse2.gif";kick[2] = "roundhouse3.gif";kick[3] = "roundhouse4.gif"; var animationFrame = 0;var currentAnimation= kick; function animateLoop() { if( animationFrame == currentAnimation.length ) { animationFrame = 0; }else{ ++ animationFrame; } document.getElementById("sprite").src = kick[ animationFrame ];}</script></head><body onload=”setInterval( 'animateLoop()', 100);”><p><img id="sprite" src="roundhouse1.gif" /> </p> </body></html>

  10. Animation Loops • Generally 1 loop handles all animations for the sprite • Most common is 1 loop for ALL animation • Games usually have 1-2 loops for everything • CHANGE DATA not code! • References "point" to DATA to animate now • change the references to point to new data

  11. <html><head><title>Fighter</title> <script>var kick = new Array();kick[0] = "roundhouse1.gif"; // Should be a loop since the files are numberedkick[1] = "roundhouse2.gif";kick[2] = "roundhouse3.gif";kick[3] = "roundhouse4.gif"; var animationFrame = 0;var currentAnimation= kick; function animateLoop() { if( animationFrame == currentAnimation.length ) { animationFrame = 0; }else{ ++ animationFrame; } document.getElementById("sprite").src = kick[ animationFrame ];}</script></head><body onload=”setInterval( 'animateLoop()', 100);”><p><img id="sprite" src="roundhouse1.gif" /> </p> </body></html>

  12. Javascript: HTML rewrite • Harder, less compatible, its more complex. • Multiple methods: • parentTagObject.innerHTML=”html code”; • DOM tree methods: childNodes[], replaceChild(), removeChild(), insertBefore(), cloneNode()... • Re-write images, sort columns in a table, reorder the content • not good for traditional "animation"

  13. Javascript: Style Object • All tags (Element objects) have a Style Object • Common in modern targeted pages • Sets CSS properties • Used to MOVE things around the screen • With CSS3 one could change CSS3 animations while they run

  14. Javascript: Style Object • Changes the CSS in javascript code OVER TIME • Downside: misses the whole point of CSS by putting CSS presentation into javascript • Preferred: change .className to a CSS class so javascript doesn't have CSS code in it • Unavoidable: positioning animations

  15. <img src=”fred.gif” onclick=”over(this);” /> • ... • function over(obj){ • obj.className( 'marked' ); • //instead of • // obj.style.border= "2px solid red"; • }

  16. Motion: a boat moving up and down in water • object= document.getElementById('boat'); • object.style.position: "absolute"; • In a setInterval() function: • object.style.top = waterline + sin(i)*10 +”px”; • i++; • sin(i) returns a wave -1 to 1. which is not big enough, so you *10 • waterline would be some fixed # where the boat bobs from

More Related