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
great post Saad but
//Actually in Frameworks….it’s a bit complicated.
it’s not complicated it’s so easy and easy … i didn’t try to use DoJo but in Jquery is amazing
just try to apply this code on ur machine
/*
#box
{
background: red;
width: 300px;
height: 300px;
position: relative;
}
$(function() {
$(‘#box’).click(function() {
$(this).animate({“left” : “300px” }, 4000);
$(this).animate({ “width” : “50px” }, 4000);
});
});
*/
so simple code just see syntax it’s so easy
thanks
First : 7elwa 7tet el comment di 😀
Second : thanks Very Much
Third : el jQuery b2a 😉 aywa el jQuery sahla wel dojo kaman sahl. dojo gives u more facilities than it takes
lel applications elly mesh btet3amel ma3a el server jQuery a7san to be honest 🙂
bs by the way el snippet di men el framework enta 3shan t3ml animation
dojo.query(“#id”).animateProperty({duration:2000,delay:1000,properties{padding:20,margin:90}});
thank 3la el reply el gameel bta3k ya kebeer 🙂
hwa f server mesh bett3aml m3a el Jquery !!!!
dol byst5dmo [Google servers] 😀 “CDN”
yalla rabina yehaneek b dojo 😀
LOL 😀 ya metoo mana ba3raf jQuery w basht3’al beha 😀
gamel so klamk mesh manteqy 😀 … asl mn el jquery lovers 😀
go on ya pompo