एनिमेटेड SVG को मूवी में बदलें

21

मेरे पास एक एनिमेटेड एसवीजी है और इसे एक फिल्म में बदलना होगा (चित्रों की एक श्रृंखला भी करेगी)। एनीमेशन वेबकिट ब्राउज़र (सफारी, क्रोम) और बाटिक के स्क्विगल में खेलता है । मैंने इसे एक स्क्रीन कैप्चरर के साथ कैप्चर करने की कोशिश की। लेकिन फिल्म बहुत झटकेदार समाप्त होती है।

क्या इसके लिए एक अच्छा उपकरण है?

यहाँ एक उदाहरण है एनीमेशन:

<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

APNG कनवर्टर ( littlesvr.ca/apng/svg2png ) के लिए एक SVG है , शायद APNG से किसी फिल्म में बदलने या फ़्रेम को अलग करने के लिए कुछ अन्य टूल का उपयोग किया जा सकता है।

— कार्तिकमोहता

1

@kartikmohta: उत्तर के रूप में इसे जोड़ें।

— यांत्रिक घोंघा

4

क्या आपने तख्ते की एक श्रृंखला को निर्यात करने के लिए स्क्वीगल का उपयोग करने की कोशिश की है? मैंने पाया कि आपकी लाइन को पाने के लिए एक दर्द है जहां मैं चाहता था कि यह ठीक से फ्रेम की एक श्रृंखला स्थापित करने के लिए हो। हालाँकि, आपके पास एक बार, आप इमेजमैजिक का उपयोग कर सकते हैं - जाहिर तौर पर इस सप्ताह मेरा पसंदीदा जवाब ;;

प्रत्येक को मान लें कि आप फ़्रेम को फ्रेम 01. एसवीजी, फ्रेम02.svg, आदि के रूप में सहेजते हैं, फिर यह:

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

अपने तख्ते से एक एकल चेतन gif बनाएगा जो हमेशा के लिए छोरों, फ्रेम के बीच 5 ms।

कन्वर्ट svg में परिवर्तित हो जाएगा, लेकिन इमेजमैटिक चेतन टैग को संसाधित नहीं करता है, इसलिए कोई भी आउटपुट स्थिर है।

अद्यतन: मुझे लगता है कि एक छवि को हथियाने के लिए सही जगह पर एनीमेशन को रोकने के लिए (कम से कम एनीमेशन को रोकने की कोशिश कर रहा है, तो मुझे बहुत दर्द हुआ, मुझे यह सुझाव देने में शर्मिंदा होना पड़ा!

यहाँ अपने एसवीजी को एक एनिमेटेड जिफ़ में बदलने के लिए इमेजमैगिक का उपयोग करके एक बैश स्क्रिप्ट दी गई है: इस स्क्रिप्ट को चलाने से पहले मैंने आपका उदाहरण svg को 2 भागों में विभाजित किया है: 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 को घुमाए बिना, लेकिन यह वही है जो आपको मुफ्त में मिलता है ;-)

इसके अलावा, यह सरल रखना चाहता था, बस अगर इसे विंडोज़ बैट फ़ाइल के रूप में फिर से लागू किया जाना चाहिए।

I = i + 5 एनीमेशन के बनाम फ़ाइल के आकार को कितना सुचारू बनाने के बीच एक व्यापार-बंद है।

नोट: यहां तक कि -delay 1 (फ्रेम के बीच 1 एमएस) के साथ, फ़ायरफ़ॉक्स 5 सेकंड में एक पूर्ण सर्कल में हाथ नहीं बढ़ाएगा। यह 10 सेकंड के करीब था।

और यहाँ क्या स्क्रिप्ट का उत्पादन किया है

— DaveParillo
स्रोत

4

मुझे कैनवग की मदद से छवियों की श्रृंखला बनाने का एक तरीका मिला । निम्न पृष्ठ को चलाने के लिए, आपको 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

यदि आप फ़ायरफ़ॉक्स का उपयोग कर रहे हैं, तो आप एक कोशिश में SVG रेंडर प्लग दे सकते हैं: http://adasek.cz/svgrender/

— IOOI
स्रोत

यह एक अच्छा सुझाव है। लेकिन मैं यह पता नहीं लगा सकता कि वास्तविक एनीमेशन शुरू होने और समाप्त होने पर कैप्चर को शुरू करने और समाप्त करने के लिए कैसे प्राप्त करें।

— पॉसफैन 12