[jQuery] Złożona animacja - podczas jednej, dwie inne, złudzenie lecącej piłki Opcje

[Apocalyptiq]

Chcę uzyskać taką animację: piłka (img) z pewnego punktu ma przelecieć do drugiego punktu (mam współrzędne drugiego punktu). To mi działa:

Kod

$('#ball').animate({left:position.left,top:position.top},2000);

(position to pobrany wcześniej offset elementu, do którego piłka ma polecieć).
A jak dodać teraz złudzenie, że piłka leci do góry, a później na doł - zrobiłbym to tak, że przez połowe czasu lotu piłka zwiększa swój rozmiar, a przez drugą połowę - zmniejsza do wartości początkowej. Tylko jak to napisać?
Od strony technicznej ma to wyglądać tak:
- piłka przez 2 sekundy leci z miejsca, w którym aktualnie się znajduje, na wskazany element
- przez pierwszą sekundę powiększa się o np. 2px (ma wymiary 8px na 8px)
- przez drugą sekundę zmniejsza się do wielkości początkowej

Będę bardzo wdzięczny za wskazówki (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)

Ten post edytował Apocalyptiq 7.12.2008, 18:19:27

[lord_t]

Może to Ci pomoże.

http://plugins.jquery.com/project/jphysics

[Apocalyptiq]

Z tego co widzę, ten plugin pomaga w animacjach "widzianych z boku", a ja chcę tą animacje "z góry" (widać jest boisko z góry, na nim zawodnicy oznaczeni cyferkami i pomiędzy tymi cyferkami lata piłka). Ale dzięki za polecenie tego pluginu - ostatnio zainteresowałem się zagadnieniem tworzenia gier/animacji w jQ, więc do innych celów mi się przyda (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

A co do tej animacji z piłką - piłka porusza się z jednego miejsca na drugie, a podczas tego najpierw zwiększa, a później zmniejsza swoją wielkość - ma ktoś jakieś pomysły jak to można zrobić?

[erix]

a ja chcę tą animacje "z góry"

A bawiłeś się trochę demkiem? (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg) Wszystko da się zrobić, tylko pobaw się początkową i końcową pozycją.

A co do tej animacji z piłką - piłka porusza się z jednego miejsca na drugie, a podczas tego najpierw zwiększa, a później zmniejsza swoją wielkość

Wystartuj równolegle metodę animate. Tylko równolegle, a nie w nowej linijce. ;P

[Apocalyptiq]

Ale jak, wtedy musiałbym znać pozycje, w jakiej znajdzie się piłka po połowie drogi? No bo:
animacja: połowa drogi, zwiększenie sie - 1s.
animacja: druga połowa drogi, zmniejszenie się - 1s.
A tej pozycji środkowej nie znam. No chyba że bawić się w wyliczanie tej pozycji? Czy istnieje może jakiś prostszy sposób?

[erix]

A po co znać pozycję? Moduł fizyki przesuwa odpowiednio piłkę, animator z jQuery tylko zmienia rozmiary.

Dzielisz sobie wszystko czasowo i będzie ok.

[Apocalyptiq]

Ale jak to napisac w jQ? Stosunkowo nowy jestem w jQ, używam go gdzies od dwoch tygodni.

Kod

$("#ball").animate({left:leftPosition,top:topPosition},2000);

To mi przeniesie piłke w 2 sekundy we wskazane miejsce.

Kod

$("#ball").animate({left:leftPosition,top:topPosition,width:"+=5",height:"+=5"},2000);

Takie cos powinno przeniesc pile i podczas animacji powiększyc jej szerokosc i wysokosc o 5px (nie jestem pewny czy dobrze napisałem, pisze ze szkoly). No i jak to przerobic, aby do polowy drogi sie powiekszała o te np. 5px, a przez druga połowe - powróciła do wymiarów początkowych?

[ziqzaq]

Witam.
Chcesz "animate" ok.
W sumie mamy dwie animacje - piłka się zwiększa i zmniejsza - tak? A więc np.:

Kod

var o = $('#mojeid');
o.animate(opcje...).animate(opcje...);

Przeczytaj sobie "animate( params, options )" na samym dole strony jQuery animate.
Zwróć uwagę na zakładki "options" i opcję "easing", i "examples".

Błąd (chyba):

Kod

width:"+=5",height:"+=5"

co konstrukcja "+=" ma robić w tym stringu?

Edit: literówka

Ten post edytował ziqzaq 12.12.2008, 13:47:33