Forum » Programiranje » 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!
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.
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!
Hvala še enkrat!
Vredno ogleda ...
Tema | Ogledi | Zadnje sporočilo | |
---|---|---|---|
Tema | Ogledi | Zadnje sporočilo | |
» | Analiza kode: goto rabimo po pametiOddelek: Novice / Znanost in tehnologija | 13762 (10322) | one too many |
» | jquery in div-i (strani: 1 2 )Oddelek: Izdelava spletišč | 11222 (9960) | lisjak |
» | while in for odštevanje - kot rezultat upošteva tudi izhodiščno vrednostOddelek: Programiranje | 2127 (1850) | slitkx |
» | javascript jquey slidshow + dodatek (kako?)Oddelek: Izdelava spletišč | 798 (735) | frudi |
» | Flash in Video problemOddelek: Izdelava spletišč | 1443 (1378) | Misi666 |