애니메이션 SVG가 있고 그것을 영화로 바꾸고 싶습니다 (일련의 그림도 가능합니다). 애니메이션은 웹킷 브라우저 (Safari, Chrome) 및 Batik 's squiggle 에서 재생됩니다 . 화면 캡처기로 캡처 해 보았습니다. 하지만 영화는 꽤 멍청 해집니다.
이것에 대한 좋은 도구가 있습니까?
다음은 애니메이션의 예입니다.
<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>
일련의 프레임을 내보내기 위해 squiggle을 사용해 보셨습니까? 일련의 프레임을 적절하게 설정하기 위해 원하는 위치에 라인을 가져 오는 데 squiggle이 고통 스러웠습니다. 그러나 일단 그것이 있으면 imagemagick- 분명히 이번 주에 내가 가장 좋아하는 대답 ;-)을 사용하여 원하는대로 변환 할 수 있습니다.
각각 프레임을 frame01.svg, frame02.svg 등으로 저장한다고 가정하면 다음과 같습니다.
convert -delay 5 -loop 0 frame??.svg animated.gif
프레임 사이에서 5ms 동안 영원히 반복되는 프레임에서 단일 애니메이션 GIF를 만듭니다.
convert는 svg를로 변환하지만 imagemagick는 animateTransform 태그를 처리하지 않으므로 모든 출력은 정적입니다.
업데이트 : 구불 구불 한 작업이 너무 고통 스러웠습니다 (적어도 이미지를 잡기 위해 적절한 지점에서 애니메이션을 중지하려고했지만 제안조차해서 창피했습니다!
다음은 imagemagick을 사용하여 svg를 애니메이션 GIF로 변환하는 bash 스크립트입니다.이 스크립트를 실행하기 전에 예제 svg를 두 부분으로 분할했습니다. bg.svg 에는 elipse와 'pit'요소 가 포함 되고 hand.svg 에는 'sec'만 포함됩니다. 요소
`#!/bin/bash`
rm *.png
rm anim.gif
convert bg.svg -crop 200x200+0+0 +repage bg.png
convert hand.svg -crop 200x200+0+0 +repage -transparent white hand.png
for ((i=1; i<=359; i=i+3))
do
convert hand.png -gravity center -rotate $i tmp.png
n=`printf "%03d" $i`
composite -gravity center tmp.png bg.png hand${n}.png
rm tmp.png
done
convert -delay 1 -loop 0 hand*.png anim.gif
~
나보다 더 영리한 사람이 bg.png를 회전하지 않고도 변환을 병합하고 한 단계에 모두 결합하는 방법을 알아낼 수있을 것이라고 확신합니다. 그러나 이것이 무료로 얻을 수있는 것입니다 ;-)
또한 Windows bat 파일로 다시 구현해야하는 경우를 대비하여 간단하게 유지하고 싶었습니다.
i = i + 5는 애니메이션이 얼마나 매끄럽게 보이는지와 파일 크기 사이의 절충안입니다.
참고 : -delay 1 (프레임 간 1ms)을 사용하더라도 firefox는 5 초 동안 완전한 원을 그리며 손을 움직이지 않습니다. 10 초에 가까웠습니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다