DOM Animation Changing the DOM objects over time.

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 eventsset CSS Class with DOM

CSS3 triggers DOM events when it starts and stops

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";

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 javascriptfile/folder naming conventions + building on the HTML

coded URL can minimize issues

Animate by changing images

<img id="sprite" src="frame1.jpg" />

setTimeout( function(){

var x= document.getElementById("sprite");

x.src="frame2.jpg";

} , 100);

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 <img> tag

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.

roundhouse1.gif roundhouse2.gif roundhouse3.gif

roundhouse4.gif roundhouse5.gif roundhouse6.gif

Example

var kick = new Array();

kick[0] = "roundhouse1.gif";




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

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

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

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"

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

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

1.<img src=”fred.gif” onclick=”over(this);” />

2....

3.function over(obj){

4. obj.className( 'marked' );

5.//instead of

6.// obj.style.border= "2px solid red";

7.}

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

DOM Animation Changing the DOM objects over time.

Documents