Mam animowany plik SVG i chciałbym go przekształcić w film (zrobiłaby to również seria zdjęć). Animacja jest odtwarzana w przeglądarkach internetowych (Safari, Chrome) oraz w squiggle Batika ). Próbowałem uchwycić to za pomocą przechwytywacza ekranu. ale film jest dość nieciekawy.
Czy jest na to dobre narzędzie?
Oto przykładowa animacja:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
<rect id="BB" x="0" y="0" height="100%" width="100%" fill="white"/>
<g id="firstone" stroke="black">
<g id="g3" fill="none" stroke-width="2">
<animateTransform attributeName="transform" type="rotate" dur="5s" from="360 100 100" to="0 100 100" repeatCount="indefinite"/>
<g id="g2">
<ellipse id="g1" cx="100" cy="100" rx="75" ry="75">
</ellipse>
<g id="sec">
<line x1="100" y1="100" x2="45" y2="45" style="stroke: rgb(99, 99, 99); stroke-width: 6;"/>
</g>
</g>
</g>
<g id="pit">
<line x1="100" y1="175" x2="100" y2="200" style="stroke: red; stroke-width: 6;"/>
</g>
</g>
</svg>
Odpowiedzi:
Czy próbowałeś użyć squiggle do wyeksportowania serii ramek? Znalazłem kłębek bólu, aby uzyskać linię dokładnie tam, gdzie chciałem, aby poprawnie ustawić serię ramek. Jednak gdy już to zrobisz, możesz użyć imagemagick - najwyraźniej mojej ulubionej odpowiedzi w tym tygodniu ;-), aby przekształcić ją w dowolny sposób.
Zakładając, że zapisujesz wszystkie ramki jako frame01.svg, frame02.svg itp. Następnie:
utworzy z animacji pojedynczy animowany gif, który zapętla się na zawsze, 5 ms między ramkami.
konwersja przekształci SVG na, ale imagemagick nie przetwarza znacznika animateTransform, więc każde wyjście jest statyczne.
Aktualizacja: Odkryłem, że squiggle jest tak bolesny w pracy (przynajmniej próbując zatrzymać animację we właściwym miejscu, aby zrobić zdjęcie, byłem zawstydzony, że nawet to zasugerowałem!
Oto skrypt bash wykorzystujący imagemagick do przekonwertowania pliku svg na animowany gif: Przed uruchomieniem tego skryptu podzieliłem przykładowy plik svg na 2 części: bg.svg zawiera elipsę, a element „pit”, a hand.svg zawiera tylko sekcję „sec” element
~
Jestem pewien, że ktoś sprytniejszy ode mnie może wymyślić, jak połączyć konwersję i połączyć wszystko w jednym kroku bez obracania bg.png, ale to dostajesz za darmo ;-)
Chciałem również zachować to proste, na wypadek, gdyby trzeba go było zaimplementować jako plik nietoperza systemu Windows.
I = i + 5 to kompromis między gładkością animacji a rozmiarem pliku.
Uwaga: Nawet przy -delay 1 (1 ms między ramkami) firefox nie przesunąłby ręki w pełnym kole w ciągu 5 sekund. To było bliżej 10 sekund.
I oto, co wyprodukował skrypt
źródło
Znalazłem sposób na stworzenie serii obrazów za pomocą canvg . Aby uruchomić następną stronę, musisz użyć zmodyfikowanego skryptu pliku canvg.js, w którym funkcja rysowania jest dostępna.
Zmiany w skrypcie canvg.js (v1.0):
W linii 2321 zmiana z:
do:
W wierszach 2361 i 2390 zmiana z:
do:
Skrypt mojej generacji:
źródło
Jeśli używasz FireFox, możesz wypróbować SVG Render Plug podczas próby: http://adasek.cz/svgrender/
źródło