애니메이션 SVG를 영화로 변환

21

SVG에 애니메이션이 적용되어 있으며 동영상으로 변환하고 싶습니다 (일련의 사진도 가능함). 애니메이션은 웹킷 브라우저 (Safari, Chrome) 및 Batik의 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>

animation svg

— 벤자민 워 웬드
소스

2

SVG to APNG 변환기 ( littlesvr.ca/apng/svg2png )가 있습니다. 아마도 다른 도구를 사용하여 APNG에서 영화로 변환하거나 프레임을 분리 할 수 있습니다.

— kartikmohta

1

@kartikmohta : 답변으로 추가하십시오.

— 기계 달팽이

4

squiggle을 사용하여 일련의 프레임을 내보내려고 했습니까? 일련의 프레임을 올바르게 설정하기를 원했던 곳에서 라인을 얻는 데 어려움을 겪었습니다. 그러나 일단 가지고 나면 imagemagick- 분명히 이번 주에 가장 좋아하는 대답 ;-)을 사용하여 원하는대로 변환 할 수 있습니다.

각각을 가정하면 프레임을 frame01.svg, frame02.svg 등으로 저장합니다.

convert -delay 5 -loop 0 frame??.svg animated.gif

프레임에서 5ms 간격으로 영원히 반복되는 프레임에서 하나의 애니메이션 GIF를 만듭니다.

convert는 svg를로 변환하지만 imagemagick은 animateTransform 태그를 처리하지 않으므로 모든 출력은 정적입니다.

업데이트 : squiggle이 너무 고통 스럽습니다 (적어도 적절한 지점에서 애니메이션을 중지하여 이미지를 잡으려고 시도했지만 이미지를 제안한 것도 당황했습니다!

다음은 imagemagick를 사용하여 svg를 애니메이션 gif로 변환하는 bash 스크립트입니다.이 스크립트를 실행하기 전에 예제 svg를 두 부분으로 나눕니다 . bg.svg 는 타원과 '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)이더라도 파이어 폭스는 5 초 안에 완전한 원으로 손을 움직이지 않습니다. 10 초에 가깝습니다.

그리고 여기 스크립트가 생성 한 것이 있습니다

— DaveParillo
소스

4

canvg 의 도움으로 일련의 이미지를 만드는 방법을 찾았 습니다 . 다음 페이지를 실행하려면 그리기 기능에 액세스 할 수 있다는 수정 된 canvg.js 스크립트를 사용해야합니다.

스크립트 canvg.js (v1.0)의 변경 사항 :

2321 행 :

var draw = function() {

에:

svg.draw = function() {

2361 및 2390 행에서 다음에서 변경하십시오.

draw();

에:

svg.draw();

내 세대 스크립트 :

<html>
<head>
<script type="text/javascript" src="rgbcolor.js"></script> 
<script type="text/javascript" src="canvg.js"></script> 
<script type="text/javascript">

loadSVG = function() {
  canvg('canvas', '<animated SVG>', { ignoreMouse: true, ignoreAnimation: true });
}

function RenderNext(delta) {
    var c = document.getElementById("canvas");
    var svg = c.svg;

    for (var i=0; i<svg.Animations.length; i++) {
        svg.Animations[i].update(delta);
    }
    svg.draw();
}

function CreateImage(imgStr) {
    var oImg=document.createElement("img");
    oImg.setAttribute('src', imgStr);
    return oImg;
}

function start() {
    var c = document.getElementById("canvas");
    var result = document.getElementById("resultDiv");
    var maxDur = 5; // seconds
    var framerate = 5; // imgages per second

    for (var i = 0; i < framerate * maxDur; i++) {
        RenderNext(1000 / framerate);

        var oImg = CreateImage(c.toDataURL('image/png'));
        result.appendChild(oImg);
    }
}

</script>
</head>
<body onload="loadSVG()">

<canvas id="canvas" width="30px" height="30px"></canvas> 

<p>
<input type="button" id="start" value="Start" onclick="start()" /> 
</p>

<div id="resultDiv">
</div>

</body>
</html>

— 마니
소스

3

FireFox를 사용하는 경우 SVG 렌더 플러그를 사용해보십시오 : http://adasek.cz/svgrender/

— 아이 오이
소스

이것은 좋은 제안입니다. 그러나 실제 애니메이션이 시작되고 끝날 때 캡처를 시작하고 끝내는 방법을 알 수 없습니다.

— posfan12