JavaScript Tutorial

JavaScript DOM анимации

    Можете да користите JavaScript за да создадете комплексна анимација. Ова упатство обезбедува основно разбирање за тоа како да користите JavaScript за да креирате анимација.JavaScript може да се користи за преместување на голем број елементи на ДОМ (<img />, <div> или кој било друг HTML елемент) во рамките на страницата според некој вид на шема утврдена со логичка равенка или функција.
    JavaScript ги обезбедува следниве две функции што често може да се користат во програмите за анимација.

        - setTimeout (функција, времетраење) - Оваа функција ја повикува функцијата по времетраење од дефинираните милисекунди во функцијаја.
        - setInterval (функција, времетраење) - Оваа функција ја повикува функцијата по секој временски интервал од наведените милисекунди во функцијата.
        - clearTimeout (setTimeout_variable) - Оваа функција повикува брише секој тајмер поставен од функциите setTimeout ().

    JavaScript исто така може да постави голем број атрибути на објект ДОМ, вклучувајќи ја и неговата позиција на екранот. Можете да поставите горен и лев атрибут на објектот да го позиционира каде било на екранот. Еве ја нејзината синтакса.

// Поставете растојание од левиот раб на екранот.
    object.style.left = растојание во пиксели или точки;

или

// Поставете растојание од горниот раб на екранот.
    object.style.top = растојание во пиксели или точки;

Рачна анимација

Значи, да спроведеме една едноставна анимација користејќи ги својствата на објектот ДОМ и функциите на JavaScript како што следува. Следната листа содржи различни методи на ДОМ.

Ја користиме функцијата JavaScript getElementById () за да добиеме ДОМ-објект и потоа и го доделуваме на глобалната променлива imgObj.

Дефиниравме функција за иницијализација init () за иницијализација на imgObj каде што сме ги поставиле нејзината позиција и левите атрибути.

Ја повикуваме функцијата за иницијализација во времето на оптоварување на прозорецот.

Конечно, ние ја повикуваме функцијата moveRight () за да го зголемиме левото растојание за 10 пиксели. Можете исто така да го поставите на негативна вредност за да го преместите на левата страна

За да демонстрираме како да креираме HTML анимации со JavaScript, ќе користиме едноставна веб-страница:

Пример 1

<html>
<head>
    <title>JavaScript Animacija</title>
    <script type = "text/javascript">
        var imgObj = null;

        function init() {
            imgObj = document.getElementById('mojaSlika');
            imgObj.style.position= 'relative';
            imgObj.style.left = '0px';
        }
        function naDesno() {
            imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
        }

        window.onload = init;
    </script>
</head>

<body>
<form>
    <img id = "mojaSlika" src = "images/index.png" />
    <p>Pritisni da ja pridvizis slikata nadesno</p>
    <input type = "button" value = "Pritisni " onclick = "naDesno();" />
</form>
</body>
</html>

Автоматизирана анимација

Во горниот пример, видовме како сликата се движи надесно со секој клик. Можеме да го автоматизираме овој процес со користење на JavaScript функција setTimeout () како што следува -

Употребени се повеќе методи.

Функцијата moveRight () ја повикува setTimeout () функцијата за да ја постави позицијата на imgObj.

Додадовме нова функција стоп () за да го исчистите тајмерот поставен од функцијата setTimeout () и да го поставиме објектот на почетната позиција.

Пример 2

<html>

<head>

<title>JavaScript Animacija</title>

var imgObj = null;

var anim ;

function init() {

imgObj = document.getElementById('mojaSlika');

imgObj.style.position= 'relative';

imgObj.style.left = '0px';

}

function naDesno() {

imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';

anim = setTimeout(naDesno,20); // povikuva funkcija naDesno sekoi 20msec

}

function stop() {

clearTimeout(anim);

imgObj.style.left = '0px';

}

window.onload = init;

</script>

</head>

<body>

<form>

<p>Pritisni na kopcinjata za da pocne ili zastane animacijata </p>

</form>

</body>

</html>

Пример 3

<!DOCTYPE html>
<html>
<body>

<h1>Moja prva JavaScript Animacija</h1>

<div id="anim">Mesto za mojata animacija</div>

</body>
</html>

Направете tag - контејнер за анимација

Сите анимации треба да бидат во однос на елементот на контејнерот.

<div id ="container">
<div id="anim">Mesto za mojata animacija</div>
</div>

Елементот на контејнерот треба да биде креиран со style = "position: relative".

Елементот за анимација треба да се креира со style = "position: absolute".

#container {
    width: 400px;
    height: 400px;
    position: relative;
    background: yellow;
}
#anim {
    width: 50px;
    height: 50px;
    position: absolute;
    background: red;
}

Анимациите на JavaScript се прават со програмирање на постепени промени во стилот на елементот.

Промените се повикуваат со тајмер. Кога интервалот на тајмерот е мал, анимацијата изгледа континуирано.

Целосна анимација со употреба на JavaScript

Смена на слика со настан onMouse

Пример кој прикажува смена на слики со настан-event onMouse.

    За време на вчитувањето на оваа страница, изјавата „if“ проверува дали постои објектот на сликата. Ако објектот на сликата е недостапен, овој блок нема да се изврши.

    Конструкторот Image () создава и вчитува нов предмет на слика, наречен image1.

    На својството src му е доделено името на надворешната датотека со слики наречена images/html.gif.

    Слично на тоа, ние го создадовме image2 објектот и го доделивме images/http.gif во овој објект.

    # (Хаш-ознаката) ја оневозможува врската, така што прелистувачот не се обидува да оди на URL-то кога ќе го кликнете. Оваа врска е слика.

    Управувачот со настани onMouseOver се активира кога глушецот на корисникот се движи над сликата, а управувачот на настанот onMouseOut се активира кога глушецот на корисникот се оддалечува од сликата.

    Кога глувчето се движи над сликата, HTTP сликата се менува од првата во втората. Кога глувчето се оддалечува од сликата, се прикажува оригиналната слика.

    Кога глувчето се оддалечува од сликата, почетната слика html.gif повторно ќе се појави на екранот.

Пример 4

<html>

<head>

<title>Primer so Mouse Events</title>

if(document.images) {

var slika1 = new Image(); // Polnenje na prva slika

slika1.src = "images/slika1.gif";

var slika2 = new Image(); // Polnenje na vtora slika

slika2.src = "images/slika2.gif";

}

</script>

</head>

<body>

<p>Pominete so mouse preku slikata </p>

<a href = "#" onMouseOver = "document.mojaSlika.src = slika2.src;"

onMouseOut = "document.mojaSlika.src = slika1.src;">

</a>

</body>

</html>