☰

如何创建图像显示时间不规则的动画 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”下，然后使用浏览器打开它。（我使用 Firefox）。

然后我就可以全屏播放了。我在音频文件的开头添加了 10 秒的静音，并使第一张图片额外显示了 10 秒。对于图片，您可以在代码中看到。为了在音频中添加静音，我使用了 Audacity（将光标放在文件开头并选择“生成/静音”）。

我必须添加这些秒数才能录制全屏，这是最简单的选择。我使用了 SimpleScreenRecorder，它很容易使用。你只需要记住取消选择“记录光标”框。在录制开始时，我看到 Firefox 打开了，并出现了一条愚蠢的消息“此视频现在是全屏的”，我还没有找到如何删除它（还没有？）。好像我们不知道视频是全屏的。

无论如何，我最终制作了一个 .mkv 视频，并想：“快完成了。现在我只需要找到如何截断视频的开头和结尾”。

哈。

animationmaker 弄坏了我的 PC。avidemux 无法安装。管道损坏。vidcutter 不断删除我想要保留的部分，并保存我想要删除的部分。无论如何，oneshot 不会在 10 秒处停止。它一直从 9.something 跳到 10.3 秒。我在 kdenlive 中没有找到“cut”命令。ffmpeg 复制了整个视频，尽管我已经仔细设置了开始时间和持续时间。apt-cache 搜索未找到 avconv。

Pitivi 终于成功了。有了它，一切都变得非常简单。在左侧的小子窗口中加载视频文件，将其拖到轨道上，将光标放在要剪切的位置。剪切按钮和删除按钮位于窗口右侧。剪切完一个片段后，单击以选择它，然后单击删除。如果剪切的片段位于视频的开头，请将剩余片段拖到起始位置。

要保存，请不要单击“保存”，而要单击“渲染”。您可以选择输出格式。我选择了 mp4 和 ogv。mp4 较小，ogv 质量更好。渲染需要一段时间。

但并没有花费我花那么长时间去弄清楚这一切:)。

相关内容