Asalamu Alaikum,
This is Saad Talaat.
I’m Talking today about JavaScript. Have you ever thought while you are using a javascript Library of Framework how does that animation work??
Actually in Frameworks….it’s a bit complicated.
This is a snippet of Effect js files from the dojo frame work
node: null,
showFunc: dojo.fadeIn,
hideFunc: dojo.fadeOut,
showDuration: 200,
hideDuration: 200,
//another proprties
Well this is Toggler.js in fx from that all animation inherits. as we see it has the effects we know..but how we use…actually Toggler uses flags to decide which animation is used by the selected or used effect…anyway that’s not we are here to talk about.
Basic Animation Theory :-
the idea is we have a DOM element like a <div> <span> <img /> or whatever and we want to animate it according to some functions and equations we may have setup.
actually if we are animating the element should be moved according to some sort of interval.
There is one simple way to animate which is to Loop with delay or use recursive functions..but in browsers if you are looping the browser won’t applicate each loop turn on our page..it will wait till it ends and then place the element in the new place which was determined after the loop ended…and that is for efficiency.anyway, the idea is we need to pause inside the function or loop so every step can be applicated.in javascript we don’t have sleep(mili); or wait();.but we have setTimeout..
for who doesn’t know the setTimeout : it’s a timer which invoke a function after a given time.
so let’s say we have object bar which refers to an element if we are going to animate
bar.style.left+=10;//wait and then recruit the function
}
so we want to move bar to right so we are going to increment the left position by 10 pixels per turn
bar.style.left+=10;
setTimeout(doMove,20); // call doMove() in 20 msec
}
and that was the Javascript Basic Animation theory