☰

» »

jQuery, HTML5 animacija slike

jQuery, HTML5 animacija slike

Micho95 ::

Zdravo!

V šoli mam en problem nardit tole nalogo in imam na voljo še samo en zagovor.

Navodila:

a) Dopolnite datoteko n4_animacija.html, JS pišite v HTML. Na stran dodajte canvas element poljubne dimenzije (višina in širina obvezno različna) in mu določite črn rob. Poiščite poljubno ikono (manjšo od 50x50px, uporabite lahko ikono iz predloge) in jo naložite na canvas (ne kot img značko). Implementirajte animacijo, kjer ikona potuje po canvas-u enakomerno po X in Y osi in se odbija od robov (slika). Potovanje je po X in Y osi enakomerno. Začetno pozicijo slike si lahko izberete sami. Animacijo sprožimo z gumbom "Start", animacija se naj izvaja pri 60 fps. (setTimeout, setInterval, clearTimeout, clearInterval)

b) Nalogo nadgradite tako, da se ob vsakem odboju ikone hitrost le-te zmanjša glede na faktor dušenja, ki ga vpišemo v vnosno polje (slika). Faktor dušenja je vrednost med 0 in 100 in predstavlja odstotek, za katerega se zmanjša hitrost ob odboju. Če hitrost pade zelo blizu nič, se animacija ustavi. Gumb "Start" nadgradite tako, da se ob kliku hitrost ikone nastavi na začetno polno hitrost in da se upošteva vpisan faktor dušenja (ki smo ga morda spremenili). Po kliku se naj animacija nadaljuje v smeri in poziciji, ki je bila ob kliku (ne sme skočiti na začetno pozicijo).

Ko sem jo oddal, mi je asistent odgovoril, da mu v firefoxu in internet explorerju ne deluje, v chromu pa še vedno ob ponovnem kliku na gumb start spremeni smer odboja v desno navzgor, ampak ga ob tem kliku sploh ne bi smelo.

V nalogi je uporabljen jquery 2.1.1 in naslednja slika: firefox.png

Prosim, če bi mi kdo znal pomagat uredit spodnjo kodo te naloge glede na podana navodila a in b.

Hvala že vnaprej!

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>USS Vaja 7</title>
    <script src="js/jquery-2.1.1.min.js"></script>
</head>

<body>

    <input id="btn" type="button" value="Start" /> Dušenje:
    <input id="dusenje" type="text" /> %
    <br />
    <canvas id="canvas" width="500px" height="300px" style="border: solid 1px silver;">
    </canvas>

    <script>
        $(document).ready(function () {
            //klicanje canvasa
            var canvas = document.getElementById('canvas');
            var ctx = canvas.getContext('2d');

            //začetne koordinate
            var x = 250;
            var y = 150;

            //velikosti canvasa
            var can_x = canvas.width;
            var can_y = canvas.height;

            //velikosti ikone
            var vel_x = 47;
            var vel_y = 47;

            //začetni diagonali x in y
            var diag_x = -1.5;
            var diag_y = 1.5;

            //odbojni približek za čimbolj učinkovito ustavitev z dušilcem
            var zaok_poz = ((can_x - x - vel_x) / 1000).toFixed(1);
            var zaok_neg = (((can_x - x - vel_x) / 1000) * (-1)).toFixed(1);

            //klicanje slike
            var ikona = new Image();
            ikona.src = 'img/football.png';

            //x in y velikosti za if pogoj - odboj
            var x_size = can_x - vel_x;
            var y_size = can_y - vel_y;

            //globalna hitrost - 60fps
            var hitrost = (1000 / 60);

            //začetna nastavitev dusenja in intervala na 0
            var dusenje = 0;
            var interval = 0;

            //klik na gumb dogodek
            $('#btn').click(function () {
                //pridobitev dušilca
                dusenje = $('#dusenje').val();

                //nova vrednost dušilca (v celem številu)
                dusenje = (dusenje / 100) * (1 * 10);
                dusenje = dusenje + 1;

                //ponovna začetna vrednost diagonal
                diag_x = 1.5;
                diag_y = -1.5;

                //izvajanje animcije
                interval = setInterval(animacija, hitrost);

                //izpis v konzoli
                console.log("Interval: " + interval);
                console.log("Dušilec: " + dusenje);

                //ker bomo počistili interval, bo globalna hitrost
                //ostala nespremenjena ob vsakem kliku (vedno 60),
                //če ne se bo samo povečevala hitrost
                if (interval > 1) {
                    clearInterval(interval);
                }

                //ustavitev animacije pri večjem dušilcu
                if (dusenje > 10) {
                    clearInterval(interval);
                    interval = 0;
                    return;
                }
            });

            //animacija
            function animacija() {
                //čiščenje canvasa
                ctx.clearRect(0, 0, can_x, can_y);

                //risanje slike
                ctx.drawImage(ikona, x, y);

                //če sta diagonalni vrednosti večji oz. manjši od negativnega oz. pozitivnega približka,
                //se diagonali obrneta recimo iz 1 na -1 in delita z faktorjem dušilca
                if (diag_x > zaok_poz || (diag_y < zaok_neg && diag_y > zaok_poz) || diag_x < zaok_neg) {
                    //osnovni pogoj, da ikona po x koordinati ne preseže x roba canvasa
                    if (x + diag_x > can_x - vel_x || x + diag_x <= 0) {
                        //obrnemo vrednost x diagonale
                        diag_x = (diag_x * (-1));

                        //to novo vrednost delimo z faktorjem
                        diag_x = (diag_x / dusenje);
                    }

                    //osnovni pogoj, da ikona po y koordinati ne preseže y roba canvasa
                    if (y + diag_y > can_y - vel_y || y + diag_y <= 0) {
                        //obrnemo vrednost y diagonale
                        diag_y = (diag_y * (-1));

                        //to novo vrednost delimo z faktorjem
                        diag_y = (diag_y / dusenje);
                    }

                    //povečujemo začetni x in y koordinati za diagonalno vrednost (spreminjanje smeri)
                    x = x + diag_x;
                    y = y + diag_y;
                }

                //console.log("Interval: " + interval);
                //console.log("Dušilec: " + dusenje);
            }
        });
    </script>

</body>

</html>

amacar ::

Na IE11 ter EDGE meni deluje (firefoxa nimam), je pa potrebno omogočiti skripte, ker jih privzeto onemogoči.

Sicer pa si malo pomešal kaj se izvaja v intervalu in kaj ne, ter kaj se izvede ob kliku na gumb.
Malo sem popravil, dodelaj še sam.
<!doctype html>
<html>
 
<head>
    <meta charset="utf-8">
    <title>USS Vaja 7</title>
    <script src="js/jquery-2.1.1.min.js"></script>
</head>
 
<body>
 
    <input id="btn" type="button" value="Start" /> Dušenje:
    <input id="dusenje" type="text" /> %
    <br />
    <canvas id="canvas" width="500px" height="300px" style="border: solid 1px silver;">
    </canvas>
 
    <script>
        $(document).ready(function () {
            //klicanje canvasa
            var canvas = document.getElementById('canvas');
            var ctx = canvas.getContext('2d');
 
            //začetne koordinate
            var x = 250;
            var y = 150;
 
            //velikosti canvasa
            var can_x = canvas.width;
            var can_y = canvas.height;
 
            //velikosti ikone
            var vel_x = 64;
            var vel_y = 64;
 
            //začetni diagonali x in y
            var diag_x = -1.5;
            var diag_y = 1.5;
 
            //odbojni približek za čimbolj učinkovito ustavitev z dušilcem
            var zaok_poz = ((can_x - x - vel_x) / 1000).toFixed(1);
            var zaok_neg = (((can_x - x - vel_x) / 1000) * (-1)).toFixed(1);
 
            //klicanje slike
            var ikona = new Image();
            ikona.src = 'img/firefox.png';
 
            //x in y velikosti za if pogoj - odboj
            var x_size = can_x - vel_x;
            var y_size = can_y - vel_y;
 
            //globalna hitrost - 60fps
            var hitrost = (1000 / 60);
 
            //začetna nastavitev dusenja in intervala na 0
            var dusenje = 0;
            var interval = 0;
 
            //klik na gumb dogodek
            $('#btn').click(function () {
                //pridobitev dušilca
                dusenje = $('#dusenje').val();
				
				//dušenje v procentih
				dusenje = 1 - (dusenje/100)
 
                //ponovna začetna vrednost diagonal (ohranimo smer)
				if(diag_x > 0) {
					diag_x = 1.5;
				} else {
					diag_x = -1.5;
				}
					
                if(diag_y > 0) {
					diag_y = 1.5;
				} else {
					diag_y = -1.5;
				}	
				
				//ustavimo animacijo, če že obstaja
				clearInterval(interval);
 
                //izvajanje animcije
                interval = setInterval(animacija, hitrost);
 
                //izpis v konzoli
                console.log("Interval: " + interval);
                console.log("Dušilec: " + dusenje);
            });
 
            //animacija
            function animacija() {
                //čiščenje canvasa
                ctx.clearRect(0, 0, can_x, can_y);
 
                //risanje slike
                ctx.drawImage(ikona, x, y);
 
                //če sta diagonalni vrednosti večji oz. manjši od negativnega oz. pozitivnega približka,
                //se diagonali obrneta recimo iz 1 na -1 in delita z faktorjem dušilca
                //if (diag_x > zaok_poz || (diag_y < zaok_neg && diag_y > zaok_poz) || diag_x < zaok_neg) {
                    //osnovni pogoj, da ikona po x koordinati ne preseže x roba canvasa
                    if (x + diag_x > can_x - vel_x || x + diag_x <= 0) {
                        //obrnemo vrednost x diagonale
                        diag_x = (diag_x * (-1));
 
                        //to novo vrednost delimo z faktorjem
                        diag_x = (diag_x * dusenje);
						diag_y = (diag_y * dusenje);
                    }
 
                    //osnovni pogoj, da ikona po y koordinati ne preseže y roba canvasa
                    if (y + diag_y > can_y - vel_y || y + diag_y <= 0) {
                        //obrnemo vrednost y diagonale
                        diag_y = (diag_y * (-1));
 
                        //to novo vrednost delimo z faktorjem
						diag_x = (diag_x * dusenje);
                        diag_y = (diag_y * dusenje);
                    }
 
                    //povečujemo začetni x in y koordinati za diagonalno vrednost (spreminjanje smeri)
                    x = x + diag_x;
                    y = y + diag_y;
					
					//ustavimo animacijo pri nizki hitrosti, recimo pod 0.01
					if(Math.abs(diag_x) < 0.01) {
						clearInterval(interval);
					}
                //}
 
				console.log("Pospesek: " + diag_x);
                //console.log("Dušilec: " + dusenje);
            }
        });
    </script>
 
</body>
 
</html>

Micho95 ::

Najlepša hvala ti za tole. Sedaj deluje na vseh brskalnikih, ter vse deluje tako kot mora (ne spreminja smeri, dušilec se lepo zmanjšuje, se ustavi ko je to potrebno). Sam sem še spremenil vrednost ustavitve na < 0.1, dodal sem drugo sliko, verjetno bom še kaj dodal vendar trenutno deluje tako kot mora.

Hvala še enkrat!

Vredno ogleda ...

TemaSporočilaOglediZadnje sporočilo
TemaSporočilaOglediZadnje sporočilo
»

Analiza kode: goto rabimo po pameti

Oddelek: Novice / Znanost in tehnologija		2913763 (10323) one too many
»

jquery in div-i (strani: 1 2 )

Oddelek: Izdelava spletišč		8711223 (9961) lisjak
»

while in for odštevanje - kot rezultat upošteva tudi izhodiščno vrednost

Oddelek: Programiranje		182127 (1850) slitkx
»

javascript jquey slidshow + dodatek (kako?)

Oddelek: Izdelava spletišč		6798 (735) frudi
»

Flash in Video problem

Oddelek: Izdelava spletišč		71444 (1379) Misi666

Več podobnih tem