Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: animate bez biblioteki
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
acidm
23.07.2011, 17:09:36
Witam!!
Próbuje napisać funkcje do animacji bez użycia bibliotek.
Elementy animowane poruszaja sie tylko linearnie (narazie) a wsparciem dla opacity i kolorkow zajme si pozniej.
Problem jest w tym że nie działają 2 funkcje jednocześnie(a dokładniej jedna funkcja dla 2 wlaściwości css w firefox i safari).
Na dodatek gdy przekazuje this jako argument do funkcji zwrotnej to nie dziala.
A zapomniałbym funkcja ma miec swój odpowiednik stop() z jquery,zamiast ustawiac czas wykonania ustawiam predkosc.
Domyślam sie że problemem jest to że dodaje timer jako jedna metode do obiektu animowanego,tylko nie wiem jak to obejsc....
Wszystkie pozostałe sugestie mile widziane:)

http://jsfiddle.net/q2n34/1/



[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title></title>
  6.  
  7. <style type="text/css">
  8. #przyklad {
  9. 	background-color: #00C;
  10. 	height: 100px;
  11. 	width: 100px;
  12. 	border: 3px solid #000;
  13. 	position: absolute;
  14. 	left: 4px;
  15. 	top: 22px;
  16. 	right: 0px;
  17. 	bottom: 0px;
  18. 	margin: 0px;
  19. 	padding: 0px;
  20.  
  21. }
  22. #przyklad2 {
  23. 	height: 50px;
  24. 	width: 100px;
  25. 	position: absolute;
  26. 	top: 185px;
  27.  
  28. }
  29.  
  30. </style>
  31. <script type="text/javascript">
  32. window.onload=function(){
  33.   function getCss(obiekt,wlasnosc){
  34.   if (obiekt.currentStyle){
  35.   return obiekt.currentStyle[wlasnosc];
  36.   }else if(window.getComputedStyle){
  37.   return document.defaultView.getComputedStyle(obiekt, null)[wlasnosc];}
  38.   };	
  39.   //koniec get css
  40.  
  41.   function animate(obiekt,wlasnosc,koncowa,speed,callback){
  42.  
  43.  
  44.   if(!speed){var speed=1;}
  45.   var startowa=parseFloat(getCss(obiekt,wlasnosc));
  46.   if(koncowa.indexOf('px')!==-1){var jednostka='px'}
  47.   else if(koncowa.indexOf('%')!==-1){var jednostka='%'}
  48.   else {var jednostka='';}
  49.   var koncowa=parseFloat(koncowa);
  50.   obiekt.style[wlasnosc]=startowa+jednostka;
  51.  
  52.   var step=((Math.max(startowa,koncowa)-Math.min(startowa,koncowa))/100)*speed;
  53.  
  54.  
  55. 	  (function(){	
  56.  
  57. 	  var biezaca=parseFloat(obiekt.style[wlasnosc]);
  58.  
  59. 	  if (koncowa<biezaca){
  60. 		  obiekt.style[wlasnosc]=biezaca-step+jednostka;
  61. 							}	
  62. 	  else if(biezaca<koncowa){
  63. 		  obiekt.style[wlasnosc]=biezaca+step+jednostka;
  64. 								}
  65. 	  obiekt.timer=setTimeout(arguments.callee,10);
  66. 	  if(biezaca>(koncowa-step)&&biezaca<(koncowa+step))
  67. 		{
  68. 		obiekt.style[wlasnosc]=koncowa+jednostka;	
  69. 		clearTimeout(obiekt.timer);
  70. 		if(callback){	
  71. 		   return (callback )();	
  72. 					}
  73.  
  74. 		}
  75.  
  76. 	  })();		
  77.   }
  78.  
  79.   var element=document.getElementById('przyklad');
  80.   var element2=document.getElementById('przyklad2');
  81.  
  82.   element.onclick=function(){
  83. 	  var elem=this;
  84.   animate(elem,'left','200px',2,function(){animate(elem,'height','300px',3)});
  85.   animate(elem,'padding','50px',2);
  86.   }
  87.   function stop(obiekt){
  88.  
  89. 	  clearTimeout(obiekt.timer);
  90.   }
  91.   element2.onclick=function(){
  92.  
  93.   stop(element);
  94.   }	
  95. }
  96. </script>
  97.  
  98. </head>
  99.  
  100. <body>
  101.  
  102. <div id="przyklad">klik</div>
  103.  
  104. <input name="guzik" type="button" value="stop" id="przyklad2"/>
  105. </body>
  106. </html> 
[HTML] pobierz, plaintext
wdev
24.07.2011, 22:54:15
1. W jsFiddle masz opcję JSLint - sprawdza Twój kod pod względem poprawności formalnej. Zapuść sobie to i sprawdź. Jak dla mnie, to możesz mieć problem ze zmiennymi - poczytaj sobie o zmiennych w javascripcie i słowie kluczowym var. Dla przykładu tylko :
Kod
if(koncowa.indexOf('px')!==-1){var jednostka='px'}
  else if(koncowa.indexOf('%')!==-1){var jednostka='%'}
  else {var jednostka='';}

sprawia, że Twoja jednostka zawsze jest równa '', bo var ma zasięg funkcyjny a nie blokowy. Jak masz takie konflikty w zmiennych, to szukanie błędów przypomina trochę wróżenie z fusów...
2. Konsola wywala od razu błąd: Uncaught TypeError: Object #<Text> has no method 'getElementsByTagName'. Biorąc pod uwagę, że jest to w jakimś zupełnie innym skrypcie - prawdopodobnie masz coś źle pozamykane.
3. Jak już uprzątniesz kod i dalej będziesz miał problemy, to daj znać wink.gif (btw, TidyUp z jsFiddle też by nie zaszkodziło).

PS. Dla ustawienia wartości domyślnej:
Kod
if (!speed) {
  var speed = 1;
}

mniej pisania masz używając:
Kod
speed = speed || 1;
acidm
25.07.2011, 10:05:19
Kod
if(koncowa.indexOf('px')!==-1){var jednostka='px'}
else if(koncowa.indexOf('%')!==-1){var jednostka='%'}
else {var jednostka='';}

sprawia, że Twoja jednostka zawsze jest równa '', bo var ma zasięg funkcyjny a nie blokowy. Jak masz takie konflikty w zmiennych, to szukanie błędów przypomina trochę wróżenie z fusów..."

Zgadza sie zmienne maja zasieg funkcyjny wiec sa widoszczne poza if i petlami i dlatego jednostka jest rowna "" lub % lub px a to dlatego ze zmienna jest przypisywana(nadpisywana ) jesli warunek jest spełniony smile.gif
wiec zmienna jednostka nie jest zawsze równa ""

''2. Konsola wywala od razu błąd: Uncaught TypeError: Object #<Text> has no method 'getElementsByTagName'. Biorąc pod uwagę, że jest to w jakimś zupełnie innym skrypcie - prawdopodobnie masz coś źle pozamykane.''
zgadza sie w jsfiddle zapomnialem zmienic z frameworka nz czysty js

speed = speed || 1;
przydatne:) jak równiesz jslint w jsfiddle smile.gif

mam juz nowa wersje:)

czekam na sugestie jak cos

http://jsfiddle.net/zDeF7/
wdev
27.07.2011, 02:20:47
Cytat(acidm @ 25.07.2011, 11:05:19 ) *
Zgadza sie zmienne maja zasieg funkcyjny wiec sa widoszczne poza if i petlami i dlatego jednostka jest rowna "" lub % lub px a to dlatego ze zmienna jest przypisywana(nadpisywana ) jesli warunek jest spełniony smile.gif
wiec zmienna jednostka nie jest zawsze równa ""


A to w sumie ciekawe, na co mi zwracasz uwagę. Widzę, że pod najnowszym Chromem i Firefoksem to przechodzi rzeczywiście bez problemów (innych chwilowo nie mam pod ręka, żeby potestować). Ale wiem, że jeszcze do niedawna miałem z tym sporo kłopotu. Kiedyś to się nazywało redeklaracja zmiennej i wyrzucało parę błędów, nie mówiąc już o dziwnym przypisywaniu zmiennej. Nevermind.
acidm
27.07.2011, 08:22:33
Pod innymi też przechodzi (ie5>8 .opera,safari,) ale zwracam honor ,z js przygode zaczolem od niedawna ...
Pomijajc, jak zmienic ten zapis aby byl prawidlowy?

Pojawil sie kolejny problem ..
Gdy wywoluje stop() poprzez klikniecie wszystko jest ok,ale gdy stop() jest wywolywane przy starcie drugiej animacji nie dziala...


http://jsfiddle.net/cXeRD/
wdev
27.07.2011, 21:06:22
Cytat(acidm @ 27.07.2011, 09:22:33 ) *
Pod innymi też przechodzi (ie5>8 .opera,safari,) ale zwracam honor ,z js przygode zaczolem od niedawna ...
Pomijajc, jak zmienic ten zapis aby byl prawidlowy?

Pojawil sie kolejny problem ..
Gdy wywoluje stop() poprzez klikniecie wszystko jest ok,ale gdy stop() jest wywolywane przy starcie drugiej animacji nie dziala...

http://jsfiddle.net/cXeRD/


Generalnie dobra praktyka jest taka, że zmienne, których będziesz używać definiujesz na początku funkcji, to jest też to, na co JSLint zwraca uwagę.

Jeśli chodzi o Twój błąd - nie bardzo widzę problem... Dorzuciłem sobie drugi div i działa dobrze...
Kod
document.getElementById('przyklad1').onmouseover = function(){
      stop(element)
      animate(this, 'width', '400px');
};
acidm
30.07.2011, 09:35:47
Po najechaniu kursorem i szybkim zjechaniu , podczas 1 animacji powinno nastapic zablokowanie biezacej i odpalenie nastepnej..
tymczasem dzieje sie inaczej..

Tal lepiej?
http://jsfiddle.net/cXeRD/7/

ps.dlaczego należy unikac arguments.callee?



chyba to dlatego ze pole przerwij jest zmieniane na false(wlaczenie nastepnego animate) nim funckja prywatna zdazy zorientowac sie o zmianie pola(wynika z opoznienia do nastepnego uruchomienia ) ..
jak temu zaradzic questionmark.gif(przy zachowaniu mozliwosci ponownego odpalenia animate() po wywolaniu stop())
misi3k
3.08.2011, 11:07:42
Przerywanie animacji powinieneś robić za pomocą clearTimeout(). Miałeś już wcześniej dobre rozwiązanie, zapisując ID timera we właściwości obiektu, na którym odpalasz animację: obiekt.timer.
Poprawki zaznaczyłem komentarzami z wykrzyknikiem.
http://jsfiddle.net/cXeRD/15/
acidm
3.08.2011, 13:17:55
dziekuje slicznie:)
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.