Witam,
Mam do zrobienia animacje przy użyciu HTML+CSS, w której kulka ma poruszać się po znanej trajektorii(współrzędne kulki są podane w postaci parametrów XY zależnych od czasu). Nie za bardzo ogarniam HTML i CSS więc proszę o jakiekolwiek wskazówki. Wyobrażam sobie to tak, że muszę wyświetlić kulkę w miejscu nr. 1, potem po czasie t w miejscu nr. 2, potem po czasie t w miejscu nr. 3 i tak dalej, aż do końca. Jeśli ktoś ma na to jakiś pomysł i wie czego musze użyć i jak to napisać to proszę o pomoc.
Z góry dziękuje.
0
0
Jeśli tylko za pomocą HTLM i CSS, to pewnie będziesz musiał użyć transitions z CSS3:
https://developer.mozilla.org/en/CSS/CSS_transitions
http://www.w3.org/TR/css3-transitions/ (sucha specyfikacja)
Pogoogluj ("css transitions", czy coś takiego).
0
Średnio u mnie z angielskim...
Ale czytałem już wcześniej o transition na polskich stronach. Dowiedziałem sie tylko tyle że można elementy rozszerzać, wydłużać, zmieniać ich kolor z delay'em za pomocą tej funkji, ale nie wiem jak je przemieszczać o konkretną wartość...
0
http://ferrante.pl/frontend/vademecum/css3-transitions/
Nie możesz skorzystać z javascript? Byłoby prościej i działałoby na wszystkim ;)
0
Też chciałem to zrobić w JS, ale niestety musze w CSS
0
Compass lub Bourbon i będzie łatwiej.
1
@winerfresh:
A co mu Compass pomoże? Że nie będzie musiał pisać dodatkowych reguł z przedrostkami vendorskimi? To jest marginalny problem, szczególnie w tak małej "aplikacji". Problemem jest np. ogarnięcie API CSS i zdefiniowanie przejść. Zmiana jednego API (tego ze specyfikacji CSS3) na inne (rozszerzenia przeglądarek) to banał.
@TheDealer105:
W jakich przeglądarkach ma to działać? W jaki sposób masz definiować te parametry? Rozumiem, że w regułach CSS? Na pewno ma to być ruch od (dowolnego) punktu A do punktu B, a potem do jeszcze innego C i tak dalej? Nie tylko od A do B?
Tylko nie pisz, jak Ci się wydaje. Interesują nas konkrety. W niektórych przypadkach np. pierwsze pytanie, o kompatybilność przeglądarek, ma ogromne znaczenie dla naszego kodu. Jeśli zaś naprawdę potrzebujesz skomplikowanych animacji, nie tylko przejść od A do B, tylko np. animacji "w tę i z powrotem" czy wielopunktowych, to pewnie zamiast "CSS transitions" będziesz musiał użyć "CSS animations" ( https://developer.mozilla.org/en/CSS/CSS_animations ).
Jaki jest kontekst tego zadania? Do szkoły kazali Ci to zrobić? Jeśli tak, to stosowanie przejść lub animacji z CSS wydaje się totalną przesadą. To zaawansowana funkcje, które przydają się tylko niekiedy i nigdy nie są "niezbędne". Lepiej się najpierw nauczyć podstawowych rzeczy. Z dobrą, solidną znajomością CSS 2.1 i ew. paroma rzeczami z CSS3, ale akurat NIE animacjami (bo za rzadko się przydają), dostaniesz praktycznie każdą robotę frontendową w Polsce, nie związaną z JavaScriptem (o ile znasz też semantyczny HTML). Same animki nic Ci nie dadzą.
Co do angielskiego, to jeśli chcesz być programistą, musisz się go nauczyć w stopniu umożliwiającym czytanie specyfikacji. Nie znam w miarę dobrego programisty, który tego by nie potrafił. Znajomość "średnia" w naszej branży absolutnie wystarczy do czytania specsów. To minimum, które musi spełnić każdy profesjonalista. Brak odpowiedniej znajomości jest problemem większym niż nie rozumienie CSS
w ogóle, a przejść z CSS3 w szczególności. Na tym polecam się skupić, bo ciężko będzie o dobrą pracę.
0
Ogólnie jest to projekt w C++, ale tą część już mam za sobą, teraz chodzi o to że program w C++ ma drukować dokument html, w którym będzie animacja zrobiona w CSSie. Tak jak pisałem trajektoria w postaci wspołrzędnych XY jest już wczesniej policzona w C++. Trajektoria może mieć różną postać, od zwykłego rzutu ukośnego po kształty zbliżone do okręgów itp... Dlatego może składać się np. ze 100 punktów w których trzeba kolejno wyświetlić kulke, tak by sprawiała wrażenie, że się porusza. Także, problem sprowadza się do zbudowania tego dokumentu html, gdy będe wiedział jak animować coś takiego w CSSie to już sobie poradze. Z tym, że na studiach mieliśmy tylko C++, żadnych HTMLow CSSow i JavaScriptów, dlatego nie mam o tym większego pojęcia. Prowadzący zasugerował, że mam to zrobić w CSS, ale jeśli piszecie że to słaby pomysł to może rzeczywiście warto spróbować w JS, jakoś bym się może dogadal...
PS. miałoby to działać w operze, ale to chyba tylko kwestia prefiksu -o-
0
Jeśli ktoś posiada przykład kodu podobnej animacji to prosiłbym o wrzucenie, chodzi mi o cały dokument HTML bo nie wiem jak to zbudować żeby działało. Już teraz mi obojętne, może być CSS lub JS...
PS. Już sobie poradziłem. Robie w JS. Dzieki za pomoc:)