[CSS3] Animacja |
[CSS3] Animacja |
30.08.2013, 11:19:36
Post
#1
|
|
Grupa: Zarejestrowani Postów: 56 Pomógł: 0 Dołączył: 17.10.2012 Ostrzeżenie: (0%) |
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 Jaki jest najlepszy sposób na animacje takiego obrazka : |
|
|
30.08.2013, 11:50:33
Post
#2
|
|
Grupa: Zarejestrowani Postów: 205 Pomógł: 43 Dołączył: 5.03.2012 Ostrzeżenie: (0%) |
Jeśli to ma wyglądać dobrze, to CSS3 się do tego nie nadaje.
Najlepszym rozwiązaniem byłoby użycie elementu "<canvas>". Są teź do tego biblioteki: http://kineticjs.com/ http://www.createjs.com/ http://fabricjs.com/ Potrzebna będzie też jakaś funkcja która tworzy krzywą, po której obiekt może się poruszać, lub ewentualnie możesz stworzyć krzywą ręcznie z wielu punktów. |
|
|
14.09.2013, 23:46:14
Post
#3
|
|
Grupa: Zarejestrowani Postów: 3 033 Pomógł: 366 Dołączył: 24.05.2012 Ostrzeżenie: (0%) |
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
|
|
|
17.09.2013, 16:50:41
Post
#4
|
|
Grupa: Zarejestrowani Postów: 205 Pomógł: 43 Dołączył: 5.03.2012 Ostrzeżenie: (0%) |
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...
|
|
|
17.09.2013, 23:39:04
Post
#5
|
|
Grupa: Zarejestrowani Postów: 83 Pomógł: 7 Dołączył: 3.02.2007 Ostrzeżenie: (0%) |
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ę http://thecodeplayer.com/walkthrough/pure-...ouds-background
Ten post edytował WiruSSS 17.09.2013, 23:40:53 |
|
|
18.09.2013, 12:30:31
Post
#6
|
|
Grupa: Zarejestrowani Postów: 205 Pomógł: 43 Dołączył: 5.03.2012 Ostrzeżenie: (0%) |
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ę http://thecodeplayer.com/walkthrough/pure-...ouds-background 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. |
|
|
Wersja Lo-Fi | Aktualny czas: 9.06.2024 - 02:21 |