☰

如何建立圖像顯示時間不規則的動畫 GIF？

tag-icon • tag-icon command-line software-recommendation video gif
如何建立圖像顯示時間不規則的動畫 GIF？

我創建了動畫，我想是用 imagemagick 製作的。我必須將所有圖像轉換為 gif，將它們命名為 file00.gif、file01.gif 等，然後我必須鍵入命令。我應該把它寫下來...

其中一個參數是每一幀的持續時間。它們的持續時間都相同。

現在我想做同樣的事情，但每張圖片都有一個自訂時間。

file00.gif 應在 5.25 秒內顯示，file01.gif 應在 3.8 秒內顯示，依此類推。

我希望它能配上一些音樂。使用Audacity，我能夠列出圖片應該改變的精確時刻。

我曾想過複製這些圖片，製作 525 個 file00.gif 副本，並將每個副本的持續時間設為 0.05 秒，但這會創建一個巨大的檔案。

請問我該怎麼做？

我怎麼能添加音樂？我想我必須將我的 gif 動畫轉換為其他格式，但是哪種格式呢？

答案1

我找到了另一種方法。顯然，gif 動畫中的畫面都在相同的時間長度內顯示。

我寫了一些 JavaScript 來顯示我的圖片並同時播放音樂。這是完整的程式碼，如果有人有興趣的話。

<HTML>
<head>

<title>FuzzyWuzzy</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

table {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>

</head>

<body>

<audio id="SONG">
  <source src="Fuzzy_Wuzzy_Was_A_Bear_10sec.ogg" type="audio/ogg">
  <source src="Fuzzy_Wuzzy_Was_A_Bear_10sec.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>


<table style="width:100%" id="table" name="table">
<tr>
<div> <img src="PNG/bear1_vid.png" id="pic" style="height:80%"></div>
</tr>
<tr>
<div id="text"><div>
</tr>
<tr>
<button onclick="openFullscreen();">Open Video in Fullscreen Mode</button>
</tr>
</table>

<script>

document.getElementById("text").innerHTML = " ";

video();

function video() {
  var x = document.getElementById("SONG"); 
  x.play(); 
    
setTimeout(function () {
    document.getElementById("pic").src = "PNG/bear1_vid.png"; 
    
  setTimeout(function () {
    document.getElementById("pic").src = "PNG/bear2_vid.png";
    setTimeout(function () {
      document.getElementById("pic").src = "PNG/bear3_vid.png";
      setTimeout(function () {
        document.getElementById("pic").src = "PNG/bear4_vid.png";
        setTimeout(function () {
        document.getElementById("pic").src = "PNG/bear5_vid.png";
        setTimeout(function () {
        document.getElementById("pic").src = "PNG/bear6_vid.png";
        setTimeout(function () {
        document.getElementById("pic").src = "PNG/worm1_vid.png";
        setTimeout(function () {
        document.getElementById("pic").src = "PNG/worm2_vid.png";
        setTimeout(function () {
        document.getElementById("pic").src = "PNG/worm3_vid.png";
        setTimeout(function () {
        document.getElementById("pic").src = "PNG/worm4_vid.png";
        setTimeout(function () {
        document.getElementById("pic").src = "PNG/mouse1_vid.png";
        setTimeout(function () {
        document.getElementById("pic").src = "PNG/mouse2_vid.png";
        setTimeout(function () {
        document.getElementById("pic").src = "PNG/mouse3_vid.png";
        setTimeout(function () {
        document.getElementById("pic").src = "PNG/mouse4_vid.png";
        setTimeout(function () {
        document.getElementById("pic").src = "PNG/mouse5_vid.png";
        setTimeout(function () {
        document.getElementById("pic").src = "PNG/mouse6_vid.png";
        setTimeout(function () {
        document.getElementById("pic").src = "PNG/bear2_vid.png";
        setTimeout(function () {
        document.getElementById("pic").src = "PNG/bear3_vid.png";
        setTimeout(function () {
        document.getElementById("pic").src = "PNG/bear4_vid.png";
        setTimeout(function () {
        document.getElementById("pic").src = "PNG/bear5_vid.png";
        setTimeout(function () {
        document.getElementById("pic").src = "PNG/bear6_vid.png";
        }, 2400); // Bear
        }, 2350);
        }, 2450);
        }, 2400);
        }, 4800);
        
        }, 2450); // Mouse
        }, 2350);
        }, 2450);
        }, 2350);
        }, 4800);
        }, 9600);
        
        }, 4800); // Worm
        }, 4900);
        }, 4300);
        }, 10000);
        
        }, 2450); // Bear
        }, 2350);
        }, 2450);
      }, 2300);
    }, 5250);
  }, 10000);
  }

var elem = document.getElementById("pic");
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}
  
</script>

</body>
</HTML>

如果您在名為 PNG 的子目錄中有具有相同名稱的 png 圖片（例如：bear1_vid.png），它應該對您有用。持續時間以毫秒為單位，並以相反的順序寫入（因為嵌套的 setTimeout）。然後你可以按照你的意願調整它。您將文件保存在“something.html”下並使用瀏覽器打開它。 （我使用火狐）。

然後我就可以全螢幕播放了。我在音訊檔案的開頭添加了 10 秒的靜音，並使第一張圖片額外顯示 10 秒。對於圖片，您可以在程式碼中看到這一點。為了在音訊中添加靜音，我使用了 Audacity（將遊標放在檔案的開頭並選擇“生成/靜音”）。

我必須添加這些秒數來錄製全屏，這是最簡單的選擇。我用的是SimpleScreenRecorder，很好用。您只需要記得取消選擇“記錄遊標”框即可。在我的錄製開始時，我看到 Firefox 打開並顯示一條愚蠢的訊息“該影片現在全螢幕”，我還沒有找到如何刪除它（還？）。就好像我們不知道影片是全螢幕的一樣。

不管怎樣，我最終得到了一個 .mkv 視頻，並想：「快到了。現在我只需要找到如何剪掉視頻的開頭和結尾」。

哈。

動畫製作者讓我的電腦崩潰了。 avidemux 沒有安裝。管道破損。 vidcutter 不斷刪除我想要保留的部分並保存我想要刪除的部分。無論如何，oneshot 都不會在 10 秒停止。它不斷地從 9 秒跳到 10.3 秒。我在 kdenlive 中沒有找到“cut”命令。 ffmpeg 複製了整個視頻，儘管我仔細設定了開始時間和持續時間。 apt-cache 搜尋未找到 avconv。

皮蒂維終於成功了。有了這個就很容易了。在左側的小子視窗中載入影片文件，將其拖曳到軌道，將遊標放在要剪切的位置。剪切按鈕和刪除按鈕位於視窗的右側。剪切一塊後，按一下它以選擇它，然後按一下刪除。如果您剪切的片段位於影片的開頭，請將剩餘片段拖曳到開始位置。

要儲存，不要點擊“儲存”，而是點擊“渲染”。您可以選擇輸出格式。我選了mp4和ogv。 mp4較小，ogv品質較好。渲染需要一段時間。

但我花了很短的時間才弄清楚這一切:)。

相關內容