Chuyển đổi SVG hoạt hình thành phim

21

Tôi có một SVG hoạt hình và muốn biến nó thành một bộ phim (một loạt hình ảnh cũng sẽ làm được). Hoạt hình phát trong các trình duyệt webkit (Safari, Chrome) và trong squiggle của Batik ). Tôi đã thử chụp nó với một trình chụp màn hình. nhưng bộ phim kết thúc khá giật.

Có một công cụ tốt cho việc này?

Đây là một ví dụ hoạt hình:

<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
nguồn

2

Có một bộ chuyển đổi SVG sang APNG ( littlesvr.ca/apng/svg2png ), có thể một số công cụ khác có thể được sử dụng để chuyển đổi từ APNG sang phim hoặc tách các khung.

— kartikmohta

1

@kartikmohta: Thêm vào đó như một câu trả lời.

— Ốc cơ khí

4

Bạn đã thử sử dụng squiggle để xuất một loạt các khung chưa? Tôi thấy khó khăn khi phải xếp hàng vào vị trí mà tôi muốn nó được thiết lập đúng một loạt các khung. Tuy nhiên, một khi bạn đã có, bạn có thể sử dụng ImageMagick - dường như câu trả lời yêu thích của tôi trong tuần này ;-) để biến nó tuy nhiên bạn như thế nào.

Giả sử mỗi bạn lưu các khung hình dưới dạng frame01.svg, frame02.svg, v.v.

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

sẽ tạo một gif animate duy nhất từ các khung của bạn lặp lại mãi mãi, 5 ms giữa các khung.

convert sẽ chuyển đổi Svg thành, nhưng fantemagick không xử lý thẻ animateTransform, do đó, bất kỳ đầu ra nào là tĩnh.

Cập nhật: Tôi thấy squiggle rất đau khi làm việc (ít nhất là cố gắng dừng hoạt hình ở đúng vị trí để lấy hình ảnh, tôi đã rất xấu hổ khi thậm chí còn đề xuất nó!

Đây là một tập lệnh bash sử dụng fantemagick để chuyển đổi Svg của bạn thành một gif hoạt hình: Trước khi chạy tập lệnh này, tôi chia phần ví dụ của bạn thành 2 phần: bg.svg chứa phần tử elipse và phần tử 'pit' và hand.svg chỉ chứa 'sec' thành phần

`#!/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

~
Tôi chắc chắn rằng ai đó thông minh hơn tôi có thể tìm ra cách hợp nhất chuyển đổi và kết hợp tất cả trong một bước mà không cần xoay bg.png, nhưng đây là những gì bạn nhận được miễn phí ;-)

Ngoài ra, muốn giữ đơn giản, chỉ trong trường hợp cần phải thực hiện lại dưới dạng tệp bat của windows.

I = i + 5 là sự đánh đổi giữa mức độ mượt mà của hình ảnh động so với kích thước tệp.

Lưu ý: Ngay cả với -delay 1 (1 ms giữa các khung hình), firefox sẽ không di chuyển bàn tay trong một vòng tròn hoàn chỉnh trong 5 giây. Nó đã gần đến 10 giây.

Và đây là những gì kịch bản sản xuất

— DaveParillo
nguồn

4

Tôi tìm thấy một cách để tạo ra loạt hình ảnh với sự giúp đỡ của canvg . Để chạy trang sau, bạn phải sử dụng tập lệnh canvg.js đã sửa đổi để chức năng vẽ có thể truy cập được.

Thay đổi trong tập lệnh canvg.js (v1.0):

Trong dòng 2321 thay đổi từ:

var draw = function() {

đến:

svg.draw = function() {

Trong dòng 2361 và 2390 thay đổi từ:

draw();

đến:

svg.draw();

Kịch bản thế hệ của tôi:

<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
nguồn

3

Nếu bạn đang sử dụng FireFox, bạn có thể dùng thử SVG Render Plug: http://adasek.cz/svgrender/

— IOOI
nguồn

Đây là một gợi ý tốt. Nhưng tôi không thể tìm ra cách bắt đầu chụp và kết thúc khi hoạt ảnh thực sự bắt đầu và kết thúc.

— posfan12