Forum PHP.pl

Witam,

Na swojej stronie chcę zrobić małą animacje kilku chmurek i rakiety, problem w tym że nie wiem jak się do tego zabrać, na początku chciałem to zapisać w gifie, ale wszystko ważyło 14 mb ;D więc stwierdziłem że pora użyć html5 z css3. Ogólnie chce aby chmurki poruszały się w prawo z różną prędkością a rakieta latała między nimi.

i teraz, umiem zrobić animację używając jednego obiektu, ale co jeśli jest ich kilka ? i niektóre mają przelatywać przez siebie ? wtedy wycinamy tylko obiekty które będziemy animować i na początku pozycjonujemy je jakimiś merginesami ? a potem używamy @keyframes (IMG:style_emoticons/default/questionmark.gif)

Jaki jest najlepszy sposób na animacje takiego obrazka :

(IMG:http://www.iv.pl/images/96271258535514387070.png)

mówisz CSS3 się nie nadaje, to spójrz tu http://webroad.pl/html5-css3/555-podstawy-animacji-w-css3 ale jasne w js jest o wiele prościej (IMG:style_emoticons/default/wink.gif)

CSS3 się do tego nie nadaje. CSS3 jest do trywialnych animacji. Może i można ale to jest przybijanie gwoździ paznokciem. Nawet bez CSS3 można i nawet widziałem jak robili 3d animacje na divach ale to było straszne...

Moim zdaniem jeśli coś da się uzyskać za pomocą CSS powinno być priorytetem z prostej przyczyny. CSS jest przez przeglądarkę obsługiwany natywnie i zawsze będzie wydajniejszy od JS. Druga korzyść względem js jest taka, że javascript zawsze można wyłączyć co unieruchomi animację (chociaż np nowy FF ukrył tę funkcję w configu zaawansowanym) a CSS nie. To co opisujesz da się bez problemu w CSS uzyskać. Tutaj masz gotowca wystarczy dodać rakietkę (IMG:style_emoticons/default/smile.gif) http://thecodeplayer.com/walkthrough/pure-...ouds-background

Ten post edytował WiruSSS 17.09.2013, 23:40:53

A teraz weź sobie tę rakietkę i zrób tak żeby się przemieszczała po krzywej (beziera, catmullRoma czy innej) czy innej i zrób tak aby wektor kierunkowy tej rakietki był zgodny z jej kierunkiem ruchu.

Można się bawić w wycinanie kółek w CSS3 kombinując w funkcjami interpolacji i synchronizować obrót (może...). Ale myślę, ze prościej byłoby to zrobić w JS używająć Canvas w nowszych przeglądarkach i excanvas pod Explorera. Tylko, że to już nie jest rozwiązanie "na już" i wymaga trochę nauki.

Poza tym Canvas jest o wiele ciekawszy i ma fajne biblioteki, które podałem wyżej, co w sumie znacznie upraszcza tworzenie niebanalnych animacji.

Użyłbym JS do tej animacji też z tego względu, że to rozwiązanie byłoby dostępne znacznie szerzej niż CSS3 - faktem jest, że niewiele osób ma wyłączony JS, to nie jest żaden argument.