Złożona animacja - technologie SVG, CSS, JS

Odpowiedz Nowy wątek
2019-07-27 09:59
0

Cześć.

Stworzyłam obiekt 3D w technologii CSS - jest to strzałka.
Stworzyłam także z wykorzystaniem technologii: JS oraz SVG ścieżkę.

Chciałabym stworzyć animację. Otóż zależy mi na tym, aby strzałka rotowała się w taki sposób, aby stworzona przeze mnie ścieżka prezentowała drogę pokonywaną przez czubek strzałki. Strzałka początkowo stoi równolegle do osi Z, następnie rotuje się, powodując odchylenie od osi Z.

Mój kod znajduje się tutaj: https://codepen.io/kolekole/pen/BXBOXd

Próbowałam to zrobić zarówno dodając kilka ruchów - wówczas wektor poruszał się tak, jak chciałam, ale ruch nie był płynny. Zaś w przypadku, kiedy zrobiłam to w jednym ruchu, ruch co prawda jest płynny, ale niestety nie jest zsynchronizowany z narysowaną ścieżką. Czy istnieje sposób, aby zsynchronizować ten ruch? Animację tę robię już kilkanaście dni i niestety, nic sensownego nie wyszło...

Będę wdzięczna za każdą pomoc

Pozostało 580 znaków

2019-07-27 15:26
1

Sugeruję nie przekombinowywać i użyć SVG tak do strzałki jak i do ścieżki. Współrzędne kolejnego punktu na ścieżce będą ci wtedy określać położenie czubka strzałki i tyle.


Pozostało 580 znaków

2019-07-29 18:22
0

Owszem, tak można zrobić, tylko wówczas animacja będzie 2D, a mnie zależy na trójwymiarowości

Pozostało 580 znaków

2019-07-29 18:42
0

Trójwymiarowość na monitorze to, tak czy siak, tylko płaskie odwzorowanie trójwymiarowych obiektów. Możesz sobie matematycznie zamodelować trójwymiarową strzałkę, obracać ją dowolnie w 3D i zrobić rzut jej boków w postaci wielokątów svg.


Pozostało 580 znaków

2019-07-29 20:42
0

SVG nie wspiera animacji 3D. Robiąc obiekt 3D SVG nie będę w stanie go obracać w trzech wymiarach bez użycia CSS - metody animate motion są w stanie wygenerować wyłącznie ruch 2D, który w przypadku tej animacji jest nieczytelny i nie pokazuje tego, na czym mi zależy.

Pozostało 580 znaków

2019-07-29 21:31
0

Nie potrzebujesz cudów, tylko prostego rzutowania bryły złożonej z kilku poligonów:
https://slideplayer.pl/slide/[...]u+Obcinanie+3D+Rzutowanie.jpg

Ludzie cuda potrafią robić tą metodą:
http://www.stylecampaign.com/scVector/demos/scvector-6.html


Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0