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

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

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.

0

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

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.

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.

0

Nie potrzebujesz cudów, tylko prostego rzutowania bryły złożonej z kilku poligonów:
https://slideplayer.pl/slide/423052/1/images/2/Proces+rzutowania+Rodzaj+rzutu+Parametry+rzutu+Obcinanie+3D+Rzutowanie.jpg

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

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