অ্যানিমেটেড এসভিজিকে মুভিতে রূপান্তর করুন

Question

আমার একটি অ্যানিমেটেড এসভিজি রয়েছে এবং এটি একটি মুভিতে রূপান্তর করতে চাই (ছবিগুলির একটি সিরিজও এটি করবে)। অ্যানিমেশনটি ওয়েবকিট ব্রাউজারগুলিতে (সাফারি, ক্রোম) এবং বাটিকের স্কুইগলে বাজায় । আমি এটি একটি স্ক্রিন ক্যাপচারারের সাহায্যে ক্যাপচার চেষ্টা করেছি। তবে মুভিটি বেশ বিড়বিড় করে শেষ করে।

এর জন্য কি কোনও ভাল সরঞ্জাম আছে?

এখানে একটি উদাহরণ অ্যানিমেশন:

<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>

Comments

এপিএনজি রূপান্তরকারী ( littlesvr.ca/apng/svg2png ) তে একটি এসভিজি রয়েছে , সম্ভবত এপিএনজি থেকে মুভিতে রূপান্তর করতে বা ফ্রেমগুলি আলাদা করতে অন্য কোনও সরঞ্জাম ব্যবহার করা যেতে পারে।

— কার্তিকমোহটা

@ কার্তিকমোহতা: এটিকে উত্তর হিসাবে যুক্ত করুন।

— যান্ত্রিক শামুক

Answer 1

আপনি ফ্রেমগুলির একটি সিরিজ রফতানি করার জন্য স্কুইগল ব্যবহার করে চেষ্টা করেছেন? আমি আপনার লাইনটি পেতে যেখানে ব্যথা পেয়েছি সেখানে ঠিক একটি সিরিজের ফ্রেমগুলি সঠিকভাবে সেট আপ করা উচিত। যাইহোক, একবার আপনার এটি হয়ে গেলে, আপনি চিত্রগ্রাহক ব্যবহার করতে পারেন - এই সপ্তাহে সম্ভবত আমার প্রিয় উত্তর ;-) এটির রূপান্তর করতে আপনার পছন্দটি পছন্দ করুন।

প্রতিটি আপনার ফ্রেমটি ফ্রেম -0.svg, ফ্রেম02.svg ইত্যাদি হিসাবে সংরক্ষণ করে ধরে নেওয়া হচ্ছে তারপরে এটি:

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

আপনার ফ্রেমগুলি থেকে একটি একক অ্যানিমেট জিআইএফ তৈরি করবে যা চিরকালের জন্য লুপ হয়ে যায়, ফ্রেমের মধ্যে 5 এমএস।

রূপান্তরিত করে এসজিজি তে রূপান্তরিত হবে, তবে চিত্রগ্রাহক অ্যানিমেট ট্রান্সফর্ম ট্যাগটি প্রক্রিয়া করে না, সুতরাং যে কোনও আউটপুট স্থিতিশীল।

আপডেট: আমি স্কুইগলটি কাজ করতে এত বেদনাদায়ক পেয়েছি (কমপক্ষে একটি চিত্র ধরার জন্য সঠিক জায়গায় সঠিকভাবে অ্যানিমেশনটি থামানোর চেষ্টা করছি, এমনকি আমি এটির পরামর্শ দিতেও বিব্রত হয়েছিলাম!

আপনার এসজিগকে অ্যানিমেটেড জিআইএফ তে রূপান্তর করতে ইমেজজাগিক ব্যবহার করে এখানে একটি বাশ স্ক্রিপ্ট রয়েছে: এই স্ক্রিপ্টটি চালানোর আগে আমি আপনার উদাহরণ এসভিগিকে 2 ভাগে বিভক্ত করেছি: বিজি.এসভিগিতে এলিপস এবং 'পিট' উপাদান এবং হ্যান্ড.এসভিগিতে কেবল 'সেকেন্ড' রয়েছে উপাদান

`#!/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 একটি বাণিজ্য বন্ধ trade

দ্রষ্টব্য: এমনকি বিলম্ব 1 (ফ্রেমের মধ্যে 1 মিমি) সহ, ফায়ারফক্সটি 5 সেকেন্ডের মধ্যে সম্পূর্ণ বৃত্তে হাত সরিয়ে ফেলবে না। এটি 10 ​​সেকেন্ডের কাছাকাছি ছিল।

এবং এখানে স্ক্রিপ্ট উত্পাদিত কি

Answer 2

আমি ক্যানজিগের সাহায্যে চিত্রগুলির সিরিজ তৈরি করার একটি উপায় খুঁজে পেয়েছি । নিম্নলিখিত পৃষ্ঠাটি চালানোর জন্য, আপনাকে ক্যানভিজি.জেএস এর একটি পরিবর্তিত স্ক্রিপ্ট ব্যবহার করতে হবে যাতে ড্র ফাংশনটি অ্যাক্সেসযোগ্য।

স্ক্রিপ্ট 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>

Answer 3

আপনি যদি ফায়ারফক্স ব্যবহার করে থাকেন তবে আপনি চেষ্টা করে এসভিজি রেন্ডার প্লাগ দিতে পারেন: http://adasek.cz/svgrender/

Comments

এটি একটি ভাল পরামর্শ। তবে আসল অ্যানিমেশনটি শুরু হয়ে শেষ হলে ক্যাপচারটি কীভাবে শুরু হবে এবং শেষ হবে তা আমি বুঝতে পারি না।

— পোস্টফ্যান 12