Nietypowa animacja
Mateusz Szczyrzyca
Stanąłem przed małym problemem - robię animację w JavaScript. Animacja
dotyczy obiektu o danym id i jest wywoływana funkcją w stylu:
animation(top,left,opacity,width,height) - powoduje, że obiekt o danym
id przesuwa o ileś tam w top,left...itp
Tyle, że animation(parametry) - to jest jedna klatka (czyli animacja z
jednego miejsca w drugie. Chciałbym także móc mieć taką możliwość, że
jak zrobię:
animacja(parametry);
animacja(inne_parametry);
animacja(jeszcze_inne);
To wykona mi się animacja po kolei na tych trzech funkcjach(klatkach)
czyli:
1. Wykona się animacja(parametry) i po osiągnięciu zadanych parametrów
(przesunięciu o niej obiektu), obiekt zostanie na miejscu i ta animacja
(powiedzmy, że pierwsza klatka) się kończy.
2. Rozpocznie się wykonywanie animacja(inne_parametry) i obiekt z miejsca,
na którego poprzednia animacja przesunęła, przesuwa się o parametry
zadane w tej animacji. Po ich osiągnięciu następuje koniec tej klatki.
3. Rozpoczyna się wykonywanie kolejnej (jeszcze_inne) i ona startuje od
miejsca, w którym poprzednia animacja się zatrzymała.
4. Itd (jeśli są kolejne
Trochę namodziłem sam, trochę mi pomógł znajomy, doradził pakowanie
argumentów w tablice i używanie pop() i push() jak w przypadku stosu.
Aktualny kod:
/--
function MoveTo(obj,x,y,o,h,w)
{
if (document.getElementById)
{
obj.style.top = x;
obj.style.left = y;
obj.style.opacity = o;
obj.style.height = h;
obj.style.width = w;
}
}
addAnimation = function(czas, t, l, o, h, w) //parametry
{
tablica = [czas, t, l, o, h, w];
tablica.push(tablica);
animation();
}
animation = function()
{
var parametry = tablica.pop();
czas = parametry[0];
top = parametry[1];
left = parametry[2];
opacity = parametry[3];
height = parametry[4];
width = parametry[5];
top++; //zwiększanie na razie testowo jednego parametru - obiekt będzie
//sunął w dół
alert(top); //mój ,,debug'' - zastosowany po to, aby wiedzieć co z tą
//zmienną się dzieje w trakcie
s=setTimeout(function(){animation(czas, top, left, opacity, height, width)}, czas);
if(top==300) //testowy warunek konca animacji (docelowo maja byc sprawdzane
//wszystkie parametry
{
clearTimeout(s);
}
MoveTo(root, top, left, opacity, height, width);
}
function anim() //funkcja używana do wywołania animacji
{
addAnimation(30, 100, 100, 100, 100, 100);
//addAnimation - może być więcej
}
\--
Problem jest taki, że oczywiście to nie działa - nic się nie rusza. Tam w
kodzie dałem alert(top), aby sprawdzić co się dzieje z tą zmienną i
przy pierwszy monicie jest komunikat o poprawnej wartości pobranej z
tablicy (100), ale potem już wyskakują monity, że zmienna jest undefined,
albo NaN (to nie wiem co to).
Za wszelkie sugestie, pomysły i uwagi dziękuje z góry. :)
Pozdrawiam.
--
{ <http://www.rowerowe.net> - wycieczki rowerowe, zawody, sprzęt }
{ <http://www.bikertrzebinia.pl> - trzebińska grupa rowerowa }
{ <http://www.abstynenci.pl> - Internetowy Serwis Abstynentów }
{ <http://www.annihitek.net> - mój blog }
Amadeusz Jasak
--
Pozdrawiam
Amadeusz 'alfanick' Jasak
Vax
Użytkownik "Amadeusz Jasak" <amadeus...@gmail.com> napisał:
...i pomyslec, ze kilka lat temu wystarczal dwukilowy Alladyn,
w ktorym silnik animacyjny, robiacy wszystko o co gosc prosil
i duzo wiecej byl tylko czescia funckjonalnosci ;)
v.
Mateusz Szczyrzyca
> ...i pomyslec, ze kilka lat temu wystarczal dwukilowy Alladyn,
> w ktorym silnik animacyjny, robiacy wszystko o co gosc prosil
> i duzo wiecej byl tylko czescia funckjonalnosci ;)
Ale Alladyn nie wchodzi w grę.
Amadeusz Jasak
możliwości, ale można wykorzystać jego kod źródłowy.
Paweł Piskorz
"Vax" dopuścił się nadużycia semantycznego używając poniższego skrótu
myślowego:
Ale Alladyn nie ma ani 2 ani beta w nazwie, więc jest passe ;]
P.S. To kiedy 2beta będzie? [:
--
message[autor="PablO"]::after {
content:"Pozdrawiam";
}
Vax
Użytkownik "Paweł Piskorz" <nie.ma...@psikre.nie?> napisał:
>
> Ale Alladyn nie ma ani 2 ani beta w nazwie, więc jest passe ;]
>
> P.S. To kiedy 2beta będzie? [:
juz byla ;)
Mniejsza byla, zamiast doklejac sie do "warstw" miala osobna kolekcje
(a nawet dwie, plaska i drzewiasta), plugin zalatwiajacy kompatybilnosc
roznych trybow browsera i drugi, by dzialal bez zmian kod pisany na 1.x,
dodatkowy tryb animacji real-time (no, to bylo cudo, naprawde!) + "animacje
animowane w animacjach - cos jak MC-ki we flaszce, animacje z pojedynczych
klatek ;)
A potem miala byc unifikacja grafiki wektorowej...
"Ajaxopodbne" tez zrobilismy rok wczesniej i na _kazdy_ browser ;)
Tyle, ze w "miedzyczasie" IE4 i NS4 wyginely i nie ma takich roznic, ktore
Al niwelowal, wektory jakos nie wzbudzaja zainteresowania, w "srodowisku"
stalo sie
modne "a co, jesli ktos ma wylaczony JS", nawet rollovery robi sie CSS-em,
no i flash w koncu wyrosl z debilnych "tellTargetow" przez co wreszcie
bez nerwow sie w nim robi ;)
Nadto w server-side zarabia sie lepiej, choc moze mniej spektakularnie :)
Jest np. pol kilo kodu PHP (jak cwierc alladyna!), ktore robi wiecej, lepiej
i o rzedy wielkosci szybciej niz np. smarty, a nauka tych szablonow trwa pol
dnia.
Pare firm webdesignerskich na tym jedzie... a korzysci wynikajce z przewagi,
jaka daje np. kilkukrotne skrocenie czaasu produkcji sa zbyt wymierne,
by szukac "slawy" poprzez publikacje rozwiazania i dawanie konkurencji
w lapy nowoczesnej broni ;)
Za to wczoraj sie dowiedzialem, ze znajomy w ramach kursu "tworzenia
aplikacji
internetowych" uczy sie wlasnie Alladyna...
a dla mnie to juz dawno zamkniety etap :)
v (sentymentalnie).
Paweł Piskorz
myślowego:
>>
>> Ale Alladyn nie ma ani 2 ani beta w nazwie, więc jest passe ;]
>>
>> P.S. To kiedy 2beta będzie? [:
>
> juz byla ;)
Przegapiłem :(
http://alladyn.art.pl/pol/index.html <- tu nic nie ma, ukryliście tę
betę przed światem ;)
[ciach fjuczery]
> Tyle, ze w "miedzyczasie" IE4 i NS4 wyginely i nie ma takich roznic, ktore
> Al niwelowal,
Ja myślę, że przynajmniej jedna taka różnica by się znalazła - obecnie
wszystkie te "wypasione" biblioteki ważą dziesiątki KB, sam lightbox to
100KB skryptów.
> w "srodowisku" stalo sie
> modne "a co, jesli ktos ma wylaczony JS",
Z tym to sobie chyba każdy poradzi.
> nawet rollovery robi sie CSS-em,
Alladyna do rolloverów? Toż to wstyd z bazuką na muchę.
> Nadto w server-side zarabia sie lepiej, choc moze mniej spektakularnie :)
Jak nie wiadomo o co chodzi, to chodzi o... ;)
> Jest np. pol kilo kodu PHP (jak cwierc alladyna!), ktore robi wiecej,
> lepiej
> i o rzedy wielkosci szybciej niz np. smarty, a nauka tych szablonow trwa
> pol dnia.
> Pare firm webdesignerskich na tym jedzie... a korzysci wynikajce z
> przewagi,
> jaka daje np. kilkukrotne skrocenie czaasu produkcji sa zbyt wymierne,
> by szukac "slawy" poprzez publikacje rozwiazania i dawanie konkurencji
> w lapy nowoczesnej broni ;)
Materialista :P
> Za to wczoraj sie dowiedzialem, ze znajomy w ramach kursu "tworzenia
> aplikacji
> internetowych" uczy sie wlasnie Alladyna...
Nauczy się, polubi i będzie jak wszyscy czekał na 2 beta web 2.0
compatible pałered baj adżaks ;]
> a dla mnie to juz dawno zamkniety etap :)
To dajcie info na stronie :'(
Mateusz Szczyrzyca
> [...]
Witam ponownie
Z paroma problemami sobie poradziłem, ale pozostaje jeden, najważniejszy
do rozwiązania.
O to kod aktualny:
/--
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title>animacja</title>
<script language="javascript" type="text/javascript">
<!--
//Zmienna okreslająca czy animacja trwa czy nie
animacja=false;
function MoveTo(obj,x,y,o,h,w)
{
if (document.getElementById && animacja==true)
{
obj.style.top = parseInt(obj.style.top)+x;
obj.style.left = parseInt(obj.style.left)+y;
obj.style.opacity = parseInt(obj.style.opacity)+o;
obj.style.height = parseInt(obj.style.height)+h;
obj.style.width = parseInt(obj.style.width)+w;
}
}
addAnimation = function(obiekt, czas, top, left, opacity, height, width)
{
tab = [obiekt,czas,top,left,opacity,height,width];
tab.push(tab);
alert(tab.pop()); //zwraca wszystkie wartości poprawnie
start_animation();
}
start_animation = function()
{
// Czy aktualnie trwa animacja?
if(animacja==true)
{
// Wszystkie warunki zakończenia animacji są spełnione?
if( ltop==top && lleft==left && lopacity==opacity && lheight==height && lwidth==width )
{
alert('Koniec klatki.'); //DEBUG
clearTimeout(s); //Zakończ
animacja=false; //Zaznacz, że animacja się już nie odbywa
start_animation();
}
// Nie - więc animuj dalej
else
{
if( ltop!=top )
{
ltop++;
MoveTo(obiekt, 1, 0, 0, 0, 0);
}
if( lleft!=left )
{
lleft++;
MoveTo(obiekt, 0, 1, 0, 0, 0);
}
if( lopacity!=opacity )
{
lopacity++;
MoveTo(obiekt, 0, 0, 1, 0, 0);
}
if( lheight!=height )
{
lheight++;
MoveTo(obiekt, 0, 0, 0, 1, 0);
}
if( lwidth!=width )
{
lwidth++;
MoveTo(obiekt, 0, 0, 0, 0, 1);
}
s=setTimeout(function(){start_animation()}, czas);
}
}
// Nie - animacja się aktualnie nie odbywa, zatem - pobierz dane do
// nowej
else
{
tablica=tab.pop();
obiekt = tablica[0];
czas = tablica[1];
top = tablica[2];
left = tablica[3];
opacity = tablica[4];
height = tablica[5];
width = tablica[6];
// Jeśli wszystkie tablicaetry są, wówczas rozpocznij kolejną klatkę
if(czas && top && left && opacity && height && width)
{
ltop = 1;
lleft = 1;
lopacity = 1;
lheight = 1;
lwidth = 1;
animacja=true;
start_animation(); // ? <- to tutaj dobrze?
}
}
}
// Funkcja obsługi animacji dla konkretnego obiektu [generowana przez parser PHP]
function load_animation(obj)
{
addAnimation(obj, 50, 1, 100, 10, 10, 10); //obiekt przesuwa się poziomo tylko
addAnimation(obj, 50, 100, 1, 10, 10, 10);
addAnimation(obj, 50, 1, 100, 10, 10, 10);
}
// Funkcja obsługi i ładowania wszystkich animacji, a także ich przerywania po ustalonym czasie
function load_animations()
{
load_animation(aaa); // [ilość ładowanych animacji generowana przez parser PHP]
}
//-->
</script>
</head>
<body bgcolor="#000" onLoad="javascript:load_animations();">
<div style="position:relative; background: #000; border: #FFF 1px solid; width: 300px; height:
300px; overflow: hidden; margin: auto;">
<img id="aaa" src="image.gif" style="position: absolute; top: 50px; left: 50px; opacity: 100;
height; 40px; width: 30px;">
</div>
</body>
</html>
\--
Powiedzmy, że dla uniknięcia niejasności określę, że jedno wywołanie funkcji
addAnimation() - to jedna klatka animacji (obiekt wykonuje ruch i
przekształcenia o zadane parametry takiej funkcji)
Ten kod już mi prawie działa, jak chciałem - znaczy, w funkcji load_animation()
wrzucam addAnimation tyle razy, ile chcę mieć powiedzmy tych klatek. Może być
tych addAnimation od jednego do kilkunastu.
Demo tego kodu tutaj: http://www.pacanka.com/~mateusz/index2.html
Problem mam jedynie ze stosem. Otóż w samej funkcji addAnimation stos działa
prawidłowo - znaczy dodaje parę klatek za pomocą tab.push i alert(tab.pop())
pokazuje mi w komunikatach, że te wszystkie parametry są na stosie.
Natomiast w funkcji start_animation(), tab.pop() działa tak, że ściąga ze
stosu wartości tylko dwóch klatek: pierwszej i ostatniej. Czyli animacja
działa prawidłowo, gdy mam maks. dwie klatki. Przy większej ilości, tak jak
tu na przykładzie, klatki ,,środkowe'' są pomijane i tak
addAnimation(obj, 50, 100, 1, 10, 10, 10) w ogóle dla niego nie istnieje.
Nie wiem czy to tak działa, czy może ja to wywołuje źle, czy może źle
rozumiem zależności między argumentami funkcji...
Próbowałem już wielu sposobów, w tym wpisywanie parametrów klatek do
samej funkcji start_animation() - ale niestety wskutek jej przeładowywania,
w trakcie, to chyba tak nie ma prawa działać, więc musi być osobna funkcja,
co jej te dane będzie zbierać na stosie.
Ktoś ma jakieś pomysły?