แปลง SVG แบบเคลื่อนไหวเป็นภาพยนตร์

21

ฉันมี SVG แบบเคลื่อนไหวและต้องการเปลี่ยนให้เป็นภาพยนตร์ (จะมีชุดรูปภาพให้ทำเช่นกัน) ภาพเคลื่อนไหวเล่นในเบราว์เซอร์ webkit (Safari, Chrome) และในsquiggleของ Batik ) ฉันพยายามจับภาพด้วยโปรแกรมจับภาพหน้าจอ แต่ภาพยนตร์เรื่องนี้จบลงค่อนข้างกระตุก

มีเครื่องมือที่ดีสำหรับสิ่งนี้หรือไม่?

นี่เป็นตัวอย่างภาพเคลื่อนไหว:

<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

— Benjamin Wohlwend
แหล่งที่มา

2

มีตัวแปลง SVG เป็น 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

จะทำให้ gif เคลื่อนไหวเพียงครั้งเดียวจากเฟรมของคุณที่ลูปตลอดกาล 5 ms ระหว่างเฟรม

Convert จะแปลง svg เป็น แต่ imagemagick ไม่ได้ประมวลผลแท็ก animateTransform ดังนั้นเอาต์พุตใด ๆ จะเป็นแบบคงที่

Update: ฉันพบ squiggle เจ็บปวดมากที่จะทำงานร่วมกับ (อย่างน้อยพยายามที่จะหยุดภาพเคลื่อนไหวที่จุดที่เหมาะสมที่จะคว้าภาพฉันก็อายที่จะได้แนะนำมัน!

นี่คือสคริปต์ทุบตีที่ใช้ imagemagick เพื่อแปลง svg ของคุณให้เป็น gif แบบเคลื่อนไหว: ก่อนที่จะเรียกใช้สคริปต์นี้ฉันแบ่ง svg ตัวอย่างของคุณออกเป็น 2 ส่วนคือ: bg.svgประกอบด้วย elipse และองค์ประกอบ 'pit' และ hand.svgมีเพียง 'วินาที' ธาตุ

`#!/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 (1 ms ระหว่างเฟรม), firefox จะไม่ขยับมือเป็นวงกลมทั้งหมดใน 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>

— Manni
แหล่งที่มา

3

หากคุณใช้ FireFox คุณสามารถลองใช้ SVG Render Plug ได้ที่: http://adasek.cz/svgrender/

— IOOI
แหล่งที่มา

นี่เป็นคำแนะนำที่ดี แต่ฉันไม่สามารถหาวิธีการจับภาพเพื่อเริ่มต้นและสิ้นสุดเมื่อภาพเคลื่อนไหวที่แท้จริงเริ่มต้นและสิ้นสุด

— posfan12