R8X-VIBE



 
AcasaPortalCautareMembriInregistrareConectare

Distribuiţi | 
 

 Creare efecte de miscare in JavaScript

Vezi subiectul anterior Vezi subiectul urmator In jos 
AutorMesaj
Digitalboy
ADMINISTRATOR
ADMINISTRATOR
avatar

Mesaje : 1394
Data de inscriere : 11/03/2010

MesajSubiect: Creare efecte de miscare in JavaScript   Mier Noi 10, 2010 4:27 pm

Efectele de mișcare în JavaScript se realizează prin execuția repetată și foarte deasă a unei funcții, la interval de câteva miimi de secundă, de obicei prin auto-apelare cu metoda setTimeout() inclusă în acea funcție.
Un alt factor important în obținerea efectului de mișcare este lucru în JavaScript cu proprietățile și valorile CSS.
Efectul de mișcare se realizează de fapt prin modificarea valorii uneia, sau mai multor proprietăți CSS.
Se crează o funcție care face această modificare, iar prin auto-apelarea ei foarte deasă, la interval de câteva miimi de secundă, face ca modificarea continuă să fie sesizată ca mișcare.
Acestea ar fi, pe scurt, principiile de bază. Partea mai dificilă este logica script-ului (în funcție de efectul dorit) și lucrul cu proprietățile CSS în JS.
Înainte de a arăta un exemplu practic, e util să fie prezentate metodele de modificare și preluare a valorilor CSS a unui element din pagina web.
- Adăugarea sau modificarea valorii unei proprietăți CSS cu JavaScript se face utilizând metoda "style", după următoarea sintaxă:
element.style.proprietateCss = 'valoare'
- Preluarea valorii unei proprietăți CSS se face diferit în principalele browsere (Mozilla Firefox și Internet Explorer); cu "defaultView.getComputedStyle()" pt. Firefox, și "currentStyle" pt. IE. Sau puteți folosi funcția următoaare, cuprinde ambele metode și funcționează în Firefox, IE, Opera, și altele.

Cod:
// Functia preia valoarea elementelor css (preluata
// si modificata de la www.javascriptkit.com)
function getStyle(el, cssprop){
    var val_css = '';        // Variabila cu valoarea CSS ce va fi returnata

    if(el.currentStyle) val_css = el.currentStyle[cssprop]; // Pentru browsere IE
    else if(document.defaultView && document.defaultView.getComputedStyle)
val_css = document.defaultView.getComputedStyle(el, "")[cssprop]; // Pentru browsere Firefox
    else val_css = el.style[cssprop];

    return val_css;        // Returneaza valoarea
}

- se apelează funcția folosind formula:
getStyle(element, proprietateCss)

1. Modificarea animată a lungimii unui element
Iată un prim exemplu din care se poate înțelege modul de obținere a efectului de mișcare.
În acest exemplu, lungimea unui cadru (DIV) se va mări și micșora animat când mouse-ul este pe el și după ce iese din zona lui.
Logica comenzilor din script e următoarea:
- Se definește lungimea la care să ajungă cadrul.
- Se preia lungimea inițială a cadrului, pentru ca atunci când sensul este de micșorare să se oprească la mărimea inițială.
- Se crează o funcție în care se setează un indice de mișcare, adică numărul de pixeli adăugați la fiecare apelare a funcției, cu valori pozitive și negative pentru schimbarea efectului de mărire sau micșorare.
- Funcția preia de fiecare dată lungimea curentă a cadrului, și cât timp se află între valoarea ei inițială și lungimea maximă setată, va incrementa lungimea curentă cu indicele de mișcare și se va auto-apela.
- La apelarea funcției cu "onmouseover" se trimite un parametru care să seteze indicele de mișcare pozitiv, iar la apeluul cu "onmouseout" se trimite un parametru care să-l facă negativ.
Studiați și explicațiile din script.

Cod:
<div id="idul" style="width:100px; height:100px; background-color:green;"
onmouseover="changeL('ma')" onmouseout="changeL('mi')"> </div>

<script type="text/javascript"><!--
// Functia care preia valoarea css (preluata si modificata de la www.javascriptkit.com)
function getStyle(el, cssprop){
    var val_css = '';        // Variabila cu valoarea CSS ce va fi returnata

    if(el.currentStyle) val_css = el.currentStyle[cssprop]; // Pentru browsere IE
    else if(document.defaultView && document.defaultView.getComputedStyle)
val_css = document.defaultView.getComputedStyle(el, "")[cssprop]; // Pentru browsere Firefox
    else val_css = el.style[cssprop];

    return val_css;        // Returneaza valoarea
}

var l_max = 300;        // Lungimea maxima la care sa ajunga ccadrul
// Obiectul elementului la care se aplica efectul
var el = document.getElementById('idul');       
// Preia lungimea initiala a cadrului cu efectul (ca numar intreg)
var l_ini = parseInt(getStyle(el, 'width'));       

// Functia pt. marirea si micsorarea dinamica
function changeL(sens){
    // Se defineste un indice de miscare, daca sens=ma e cu +
// pt marire, altfel e cu - pt micsorare
    var m = (sens=='ma') ? 4 : -4;

    var l_curent = parseInt(getStyle(el, 'width')); // Preia lungimea curenta (ca numar intreg)

    // Daca "m" e pozitiv si lungimea curenta e mai mica decat
// cea maxima, sau, daca m<0 si lungimea curenta mai mare decat cea initiala
    // Adauga valoarea "m" la lungime px si auto-apeleaza functia cu parametru "sens"
    if((m>0 && l_curent<l_max) || (m<0 && l_curent>l_ini)){
        el.style.width = (l_curent+m)+'px';
        setTimeout('changeL("'+sens+'")', 10);
    }
}
//--></script>

2. Mișcarea unui element în pagină
În acest al doilea exemplu se realizează mișcarea unui cadru (DIV) în pagină, de la stânga la dreapta, și invers după oprire, la click cu mouse-ul pe el.
Logica acestuia este următoarea:
- Se definește un indice de mișcare, adică numărul de pixeli adăugați la fiecare apelare a funcției. Valoarea pozitivă sau negativă a acestui indice va schimba sensul mișcării.
- Se află lungimea cadrului părinte, pentru ca să se poată defini mișcarea elementului din el până în acea limită.
- După ce se află și lungimea elementului, se scade din cea a părintelui și se obține lungimea de mișcare.
- Se preia și valoarea marginii din stânga. Prin mărirea sau micșorarea ei cadrul se mută.
- Se crează o funcție în care la fiecare apel se adaugă indicele de mișcare la lungimea din stânga și se auto-apelează până când marginea din stânga ajunge la valoarea lungimii maxime de mișcare obținute anterior. Atunci schimbă sensul valorii indicelui de mișcare din pozitiv în negativ, iar la următorul click pe element, prin adăugarea acestui indice la marginea din stânga, aceasta se va micșora, obținandu-se efectul de mișcare invers. Și apelul continuă până când ajunge la 0, moment în care se schimbă iar valoarea indicelui.
Studiați și explicațiile din codul scriptului.

Cod:
<div id="idul" style="width:100px; height:100px; margin-left:0px;
background-color:green;" onclick="set_move()"> </div>

<script type="text/javascript"><!--
// Functia care preia valoarea css (preluata si modificata de la www.javascriptkit.com)
function getStyle(el, cssprop){
    var val_css = '';        // Variabila cu valoarea CSS ce va fi returnata

    if(el.currentStyle) val_css = el.currentStyle[cssprop]; // Pentru browsere IE
    else if(document.defaultView && document.defaultView.getComputedStyle)
val_css = document.defaultView.getComputedStyle(el, "")[cssprop]; // Pentru browsere Firefox
    else val_css = el.style[cssprop];

    return val_css;        // Returneaza valoarea
}

var im = 3;        // Indice de miscare (nr. pixeli adaugati la fiecare mutare)

var el = document.getElementById('idul'); // Obiectul elementului la care se aplica efectul

var el_p = el.parentNode;        // Preia elementul parinte al celui cu efectul
// Preia lungimea cadrului cu efectul (ca numar intreg)
var lu_e = parseInt(getStyle(el, 'width'));
// Preia valoarea marginii din stanga "marginLeft" (ca numar intreg)
var ml_e = parseInt(getStyle(el, 'marginLeft'));       
// Preia lungimea zonei parinte "el_p" (ca numar intreg)
var lu_p = parseInt(getStyle(el_p, 'width'));       

var l_m = lu_p - lu_e;        // Stabileste lungimea de miscare

// Functia pt. mutarea cadrului, dand efect de miscare
function set_move() {
    ml_e = ml_e + im;    // Modifica valoarea marginii din stanga cu "im"

    // Daca marginea din stanga "ml_e" e mai mica decat
// lungimea stabilita de miscare "l_m"
    // Muta elementul spre dreapta (mareste marginea din stanga)
// cu "ml_e" px si auto-apeleaza functia
    if(ml_e<l_m && ml_e>0){
        el.style.marginLeft = ml_e+'px';
        setTimeout('set_move()', 10);
    }
    else {
        im = - im;        // Schimba din pozitiv in negativ (si invers)
// valoarea lui "im" pentru a schimba sensul miscarii
    }
}
//--></script>
Pot apare probleme în efectele de mișcare, în unele browsere (IE 7), când valorile CSS folosite sunt pe "auto" și ele trebuie transformate în numere.
În efectele de mișcare, și în general în funcțiile care lucrează cu CSS, pe lângă codul JavaScript trebuie avut în vedere și valorile proprietăților CSS care sunt sau nu definite.
- Lungimea și înălțimea unui element din pagină se pot prelua mai sigur cu metodele: element.offsetWidth respectiv element.offsetHeight.
Sus In jos
Vezi profilul utilizatorului http://r8x-vibe.forumz.ro
 
Creare efecte de miscare in JavaScript
Vezi subiectul anterior Vezi subiectul urmator Sus 
Pagina 1 din 1

Permisiunile acestui forum:Nu puteti raspunde la subiectele acestui forum
R8X-VIBE :: Programare :: JAVA-
Mergi direct la: