☰

Wie erstelle ich animierte GIFs mit unregelmäßigen Bildanzeigezeiten?

tag-icon • tag-icon command-line software-recommendation video gif
Wie erstelle ich animierte GIFs mit unregelmäßigen Bildanzeigezeiten?

Ich habe Animationen erstellt, ich glaube, das war mit ImageMagick. Ich musste alle meine Bilder in GIF konvertieren, sie file00.gif, file01.gif usw. nennen und dann einen Befehl eingeben. Ich hätte ihn aufschreiben sollen ...

Einer der Parameter war die Dauer jedes Frames. Sie hatten alle die gleiche Dauer.

Jetzt möchte ich dasselbe machen, aber mit einer benutzerdefinierten Zeit für jedes Bild.

file00.gif sollte 5,25 Sekunden lang angezeigt werden, file01.gif sollte 3,8 Sekunden lang angezeigt werden usw.

Ich hätte gerne etwas Musik dazu. Mit Audacity konnte ich die genauen Momente auflisten, in denen das Bild wechseln soll.

Ich habe darüber nachgedacht, die Bilder zu duplizieren, 525 Kopien von file00.gif zu erstellen und die Dauer jeder Kopie auf 0,05 Sekunden einzustellen. Dadurch wäre jedoch eine riesige Datei entstanden.

Wie kann ich das bitte machen?

Und wie kann ich die Musik hinzufügen? Ich schätze, ich muss mein animiertes GIF in ein anderes Format konvertieren, aber in welches?

Antwort1

Ich habe einen anderen Weg gefunden. Anscheinend werden alle Einzelbilder in animierten GIFs gleich lang angezeigt.

Ich habe ein bisschen Javascript geschrieben, um meine Bilder anzuzeigen und gleichzeitig die Musik abzuspielen. Hier ist der vollständige Code, falls jemand interessiert ist.

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

Es sollte für dich funktionieren, wenn du PNG-Bilder in einem Unterverzeichnis namens PNG hast, mit den gleichen Namen (z.B.: bear1_vid.png). Die Zeitdauern sind in Millisekunden und in umgekehrter Reihenfolge geschrieben (wegen des verschachtelten setTimeout). Dann passt du es nach Wunsch an. Du speicherst die Datei unter "something.html" und öffnest sie mit einem Browser. (Ich verwende Firefox).

Dann konnte ich es im Vollbildmodus abspielen. Ich habe am Anfang meiner Audiodatei 10 Sekunden Stille eingefügt und das erste Bild 10 Sekunden länger angezeigt. Das Bild können Sie im Code sehen. Um die Stille in die Audiodatei einzufügen, habe ich Audacity verwendet (setzen Sie den Cursor an den Anfang der Datei und wählen Sie „Generieren/Stille“).

Ich musste diese Sekunden hinzufügen, um den gesamten Bildschirm aufzunehmen, was die einfachste Option ist. Ich habe SimpleScreenRecorder verwendet, das einfach zu verwenden ist. Sie müssen nur daran denken, das Kontrollkästchen „Cursor aufnehmen“ zu deaktivieren. Zu Beginn meiner Aufnahme sah ich, wie sich Firefox öffnete und diese dumme Meldung „Dieses Video ist jetzt im Vollbildmodus“ erschien, von der ich (noch?) nicht herausgefunden habe, wie ich sie entfernen kann. Als ob wir nicht wüssten, dass das Video im Vollbildmodus war.

Wie dem auch sei, ich hatte am Ende ein MKV-Video und dachte: „Fast geschafft. Jetzt muss ich nur noch herausfinden, wie ich den Anfang und das Ende des Videos abschneiden kann.“

Ha.

Animationmaker hat meinen PC zum Absturz gebracht. Avidemux ließ sich nicht installieren. Defektes Rohr. Vidcutter hat ständig den Teil entfernt, den ich behalten wollte, und den Teil gespeichert, den ich entfernen wollte. Oneshot hat bei 10 Sekunden nicht angehalten, egal was ich gemacht habe. Es ist ständig von 9,irgendwas auf 10,3 Sekunden gesprungen. Ich habe den Befehl „cut“ in Kdenlive nicht gefunden. FFmpeg hat das ganze Video kopiert, obwohl ich Startzeit und Dauer sorgfältig eingestellt hatte. Avconv wurde von der Apt-Cache-Suche nicht gefunden.

Pitivi hat es endlich geschafft. Damit ist es ganz einfach. Laden Sie die Videodatei in das kleine Unterfenster links, ziehen Sie sie auf eine Spur und platzieren Sie den Cursor dort, wo Sie schneiden möchten. Die Schaltflächen „Ausschneiden“ und „Löschen“ befinden sich auf der rechten Seite des Fensters. Sobald ein Stück ausgeschnitten ist, klicken Sie darauf, um es auszuwählen, und klicken Sie auf „Löschen“. Wenn das abgeschnittene Stück am Anfang des Videos steht, ziehen Sie das verbleibende Stück an die Startposition.

Klicken Sie zum Speichern nicht auf „Speichern“, sondern auf „Rendern“. Sie können zwischen verschiedenen Ausgabeformaten wählen. Ich habe mp4 und ogv gewählt. mp4 ist kleiner, ogv hat eine bessere Qualität. Das Rendern dauert eine Weile.

Aber nicht annähernd so lange, wie ich gebraucht habe, um das alles herauszufinden :).

verwandte Informationen