Animowany przycisk w SVG

pytanie zadane 29 września 2018 w Grafika i multimedia przez Jan Machelski Nowicjusz (200 p.)

Witam, chcę zrobić przycisk typu "play/pause" w SVG. (Kodu nie będę zamieszczać, bo to tylko dwa krótkie "path-y".) Zamierzam jakoś go ciekawie zanimować, żeby po kliknięciu trójkąt płynnie przechodził w dwa pionowe prostokąty. Tak samo w drugą stronę. Nie wiem TYLKO jak to zrobić. Wiem że SVG można animować za pomocą elementu <animate/> i css-owych @keyframes-ów.

Które rozwiazanie wybrać?

Które będzie najlepiej (jeśli w ogóle) współpracować z javascriptem (przełaczanie pomiędzy stanami play/pause z użyciem tychże animacji)?

Które będzie najmniej mocoobliczeniowożerne?

A może są jeszcze inne rozwiązania?

Proszę o pomoc. Niby taki mały niewinny przycisk, a mnie wykańcza.

1 odpowiedź

odpowiedź 29 września 2018 przez Tpk Nałogowiec (40,100 p.)
edycja 29 września 2018 przez Tpk

Generalnie są tam jakieś różnice ale myślę, że przy jednej / dwóch animacji nie ma się co przejmować.

Szczegółowo o tym: https://css-tricks.com/weighing-svg-animation-techniques-benchmarks/

Natomiast moim zdaniem najłatwiej jest to po prostu zrobić w oparciu o klasy CSS które są dodawane/usuwane w JS po wywołaniu jakiegoś zdarzenia.

Użycie element <animate> może i jest ok ale sądzę, że przy bardziej złożonych animacjach same figury w SVG czy ścieżki generują tyle zbędnego kodu, że łatwiej to wypchnąć do zwykłego CSS'a żeby się nie pogubić ( i przy pomocy @keyframes załatwić sprawę).

1	komentarz 29 września 2018 przez Jan Machelski Nowicjusz (200 p.) Dzięki, początkowo myślałem o zmianie samej figury (d=""), ale chyba css-owe transformy też dadzą radę.