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 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 setTimeout( function(){ var x= document.getElementById("sprite"); x.src="frame2.jpg"; }, 100);

6. Image Caching / Pre-load 1. Create a new object using the Image() constructor 2. Assign graphic file to SRC property of new Image object 3. Assign SRC property of new Image object to SRC property of an tag

8. 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 for each graphic inside a visually hidden or iFrame iFrame works best: set size to 0 make a simple html page with everything the site will use.

9. roundhouse1.gifroundhouse2.gifroundhouse3.gif roundhouse4.gifroundhouse5.gifroundhouse6.gif

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

11. Fighter 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 ];}

12. 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

13. Fighter 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 ];}

14. 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"

15. 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

16. 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

17. 1. 2.... 3. function over(obj){ 4. obj.className( 'marked' ); 5. //instead of 6. // obj.style.border= "2px solid red"; 7. }

18. 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