Johdatus ohjelmointiin

Sorakuilu

Yksinkertaisia animointeja, setInterval(), clearInterval(), requestAnimationFrame()

Perusanimaatio setInterval(), clearInterval()

Idea: tapahtumankuuntelijaan lisätään ajastin, jolle annetaan nopeus ja siirtymisen alku- ja loppupaikka sekä eteneminen.

Toista kaksi kertaa, vaihda suuntaa, setInterval(), clearInterval()

Idea: toimii kuin perusanimaatio, mutta tehdään laskurimuuttuja, joka laskee kerrat ja lopettaa, kun niitä on tarpeeksi. Aina kun animaatio tulee "perille", sen suuntaa vaihdetaan.

Luuppi eli loputon animaatio, requestAnimationFrame(step)

Edellisestä animaatiosta tulee luuppi, jos siitä jättää pois clearInterval-osuuden (kokeile).

Toinen animointiin tapa on käyttää metodia requestAnimationFrame(step).

Perusanimaatio, lopetus ajan mukaan, requestAnimationFrame(step)

Vihje:

Jos haluat tehdä satunnaisia liikkumisia, muuta nopeus tai etenemä satunnaisluvuksi.


Lähdekoodi

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animaatiot</title>
    <style>
        #otus, #suorak, #kolmas, #ellu {
            position: relative;
            height: 50px;
            width: 50px;
            background: #aaaaaa;
        }
    </style>
</head>
<body>
    <h2>Suorittaa kerran, setInterval, clearInterval</h2>
    <div id="otus"></div>

    <script>
        let olio = document.getElementById('otus'); //sijoitetaan div muuttujaan

        olio.addEventListener('click',function () {
            const paivitysNopeus = 10;  //monenko millisekunnin välein tapahtuu jotain
            const suurinPaikka = 400;   //mihin lopetetaan
            let paikkaX = 0;            //missä kohtaa ollaan

            var idVar = setInterval( () => {
                paikkaX = paikkaX + 2;
                olio.style.left = paikkaX +'px';

                if(paikkaX > suurinPaikka) { //lopettaa animaation
                    clearInterval(idVar);
                }
            }, paivitysNopeus)
        })
    </script>

    <h2>Suorittaa annetun määrän verran kertoja</h2>
    <div id="suorak"></div>

    <script>
        let suorakaide = document.getElementById('suorak'); //sijoitetaan div muuttujaan

        suorakaide.addEventListener('click',function () {
            const paivitysNopeus2 = 5;  //monenko millisekunnin välein tapahtuu jotain
            const lattia = 400;         //mihin lopetetaan
            let paikkaY = 0;            //missä kohtaa ollaan
            let suuntaY = 1;            // 1 on alaspäin -1 ylöspäin, paljonko liikkuu kerralla eteenpäin
            var kerrat = 0;

            var idVar2 = setInterval( () => {
                paikkaY = paikkaY + suuntaY;
                if(paikkaY > lattia || paikkaY < 0) { //vaihtaa suuntaa, lisää kertoja
                    suuntaY = suuntaY * (-1);
                    kerrat++;
                }
                suorakaide.style.top = paikkaY +'px';

                if(kerrat >= 5) {
                    clearInterval(idVar2);
                }
            }, paivitysNopeus2);
        })
</script>

<h2>Luuppi, requestAnimationFrame(step)</h2>
<div id="kolmas"></div>
<script>

let loputon = document.getElementById('kolmas');

loputon.addEventListener('click', function () {
    const loppu = 400;
    let suuntaX = 1;
    let paikkaX = 0;

    function step() {
        paikkaX = paikkaX + suuntaX;
        if(paikkaX > loppu || paikkaX < 0) {
            suuntaX = suuntaX * (-1);
        }
        loputon.style.left = paikkaX +'px';
        window.requestAnimationFrame(step); //rekursiivinen
    }

    window.requestAnimationFrame(step);
})
</script>

<h2>Animaatio, lopetus ajan mukaan, requestAnimationFrame</h2>
<div id="ellu"></div>

<script>
let element = document.getElementById('ellu');

element.addEventListener('click', function () {
 
    let alku;

    function step(timestamp) {
        if( alku === undefined) alku = timestamp;
        var kesto = timestamp - alku;

        element.style.left = Math.min(0.1 * kesto, 200) +'px';
        if(kesto < 1000) {
            window.requestAnimationFrame(step);
        }
    }

    window.requestAnimationFrame(step);

})
</script>






</body>
</html>