Tehnici Web

/*
---Model functie de miscare a unui obiect DOM intre 2 puncte pe ecran---- se considera ca parametrii au fost dati corect
(in cadrul functiei lipseste testarea validitatii parametrilor;
testul, daca e necesar, se face in afara functiei sau il adaugati voi in model)
init_miscare - realizeaza calculele preliminare miscarii
ob - obiectul de miscat
left_i, top_i - coordonatele pe ecran ale punctului de pornire (nu coincid intotdeauna cu coordonatele actuale ale lui ob)
left_f, top_f - coordonatele pe ecran ale punctului de sosire
nr_pasi -numarul de pasi facuti de animatie
daca se cunoaste deplasarea (notata depl) in px la un pas (sau viteza) nr_pasi poate fi calculat prin:
lung=Math.sqrt(Math.pow(left_f-left_i,2)+Math.pow(top_f-top_i,2));
nr_pasi=Math.ceil(lung/depl);//am un pas in plus (ultimul)
*/
function init_miscare(ob, left_i, top_i, left_f, top_f, nr_pasi)//ob se misca de la punctul (xi,yi) la punctul (xf,yf)
{
//ob trebuie sa aiba pozitie absoluta pentru a-i seta coordonatele
//(uneori pozitia poate a fost setata anterior apelului functiei si instructiunea urmatoare nu mai e necesara)
ob.style.position="absolute"

var DLeft=left_f-left_i;
var DTop=top_f-top_i;

// dleft si dtop inseamna cu cat se deplaseaza obiectul pe orizontala si verticala la un pas
var dleft=DLeft/nr_pasi;
var dtop=DTop/nr_pasi;
//top_r si left_r variabile reale in care memoram deplasarea exacta (fara erori de rotunjire)
var top_r=top_i;
var left_r=left_i;
//porneste miscarea
misca(ob,top_r,left_r,1,nr_pasi,dleft,dtop,left_f,top_f);
}
/* functia efectiva de miscare
ob - obiectul care trebuie mutat pe ecran
top_r - top real pentru obiect (nerotunjit la intreg)
left_r - left real
pas_c - pas curent (necesar daca la pasii pari sau divizibili cu 3 etc, trebuie sa se intample ceva)
nr_pasi - numarul de pasi
dleft, dtop - deplasarea la un pas pe orizontala si verticala
*/
function misca(ob,top_r,left_r,pas_c,nr_pasi,dleft,dtop,left_f,top_f)
{

if (pas_c<nr_pasi)//daca e pas intermediar
     {
     //actualizeaza topreal si left real
     top_r+=dtop;
     left_r+=dleft;
    
     //repozitionare obiect pe ecran
     ob.style.top=(Math.round(top_r))+"px";
     ob.style.left=(Math.round(left_r))+"px";
    
     //incrementarea pasului curent
     pas_c++;
    
     //apelarea recursiva a functiei pentru urmatorul pas de miscare
     setTimeout(function () {misca(ob,top_r,left_r,pas_c,nr_pasi,dleft,dtop,left_f,top_f);},50);

     }
else //ultimul pas - seteazadirect la coord finale; elimina erori rotunjire
     {
     ob.style.top=(top_f+"px");
     ob.style.left=(left_f+"px");
     }

}