+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: Ruch - jQuery (/thread-ruch-jquery)
Ruch - jQuery - sonquer - 20-08-2012
Witam mam do was pytanie jak ładnie zaanimować ruch oraz co zrobić żeby po naciśnięciu klawisza postać nie uciekała tylko się ładnie animowała ?
Oto fragment kodu :
Kod:
var ile = 32;
$(document).keydown(function (event) {
switch (event.keyCode) {
case 38:
/* Góra */
event.preventDefault();
y-=ile;
setTimeout('$("div#'+nick+'").css({backgroundPosition : "0px 47px"})', 200);
setTimeout('$("div#'+nick+'").css({backgroundPosition : "31px 47px"})', 400);
setTimeout('$("div#'+nick+'").css({backgroundPosition : "62px 47px"})', 600);
setTimeout('$("div#'+nick+'").css({backgroundPosition : "93px 47px"})', 800);
setTimeout('$("div#'+nick+'").css({backgroundPosition : "0px 47px"})', 1000);
$("#"+nick+"").css("top", y+ "px");
break;RE: Ruch - jQuery - Kartofelek - 20-08-2012
Panie coś pan.
Nie tędy droga. Przecież animację robi się w pętli. Za każdym razem przesuwasz animowane tło o daną pozycję, pokazujesz, przesuwasz, pokazujesz, itp.
czyli ogólnie
Kod:
metoda pokaz() {....
- przesun tlo o x,y
- pokaz obiekt
- setTimeout(pokaz(), 30);
}http://doman.art.pl/kursjs/kurs/canvas/canvas_animacja.html (na dole)
Zobacz jeszcze to:
http://paulirish.com/2011/requestanimationframe-for-smart-animating/
i te biblioteki:
spritely.net/documentation/
www.ajaxblender.com/jani.html
RE: Ruch - jQuery - sonquer - 20-08-2012
To jak zaanimować taki obrazek :
http://pix.art.pl/files/artworks/Persiakout5.gif
Twoja metoda chyba się tutaj nie sprawdzi.