dom animation changing the dom objects over time
Post on 20-Jan-2016
240 Views
Preview:
TRANSCRIPT
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";
kick[1] = "roundhouse2.gif";
kick[2] = "roundhouse3.gif";
kick[3] = "roundhouse4.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
top related