Home / ubuntu / Questions / 1334940
In Process
Alain Reve
Asked: 2021-04-30 09:05:39 +0800 CST

How to creates animated GIFs with irregular image display times?

  • 772

I've created animations, I think it was with imagemagick. I had to convert all my images to gif, name them file00.gif, file01.gif, etc., then I had to type a command. I should have written it down...

One of the parameters was the duration of each frame. They all had the same duration.

Now I would like to do the same thing but with a custom time for each picture.

file00.gif should be displayed during 5.25 seconds, file01.gif should be displayed during 3.8 seconds, etc.

I would like it to go with some music. Using Audacity, I was able to list the precise moments when the picture should change.

I thought of duplicating the pictures, making 525 copies of file00.gif and setting the duration of each to 0.05 second, but this would create a huge file.

How can I do this, please?

And how can I add the music? I guess I will have to convert my animated gif to some other format, but which one?

command-line

1 Answers

  1. I found another way. Apparently, frames in animated gif are all displayed during the same length of time.

    I wrote a bit of javascript to display my pictures and play the music at the same time. Here is the complete code, if anyone is interested.

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

    It should function for you if you have png pictures in a sub directory called PNG, with the same names (eg : bear1_vid.png). The durations are in milliseconds and written in reverse order (because of nested setTimeout). Then you adapt it as you wish. You save the file under "something.html" and open it with a browser. (I use Firefox).

    Then I could play it full screen. I added 10 seconds of silence in the beginning of my audio file and made the first picture displayed for 10 extra seconds. For the picture, you can see that in the code. To add the silence in the audio I used Audacity (put the cursor the beginning of the file and select "Generate/Silence").

    I had to add these seconds to record the full screen, which is the easiest option. I used SimpleScreenRecorder, which is easy to use. You just have to remember to unselect the "record cursor" box. At the beginning of my recording, I saw Firefox opening and this silly message "This video is now fullscreen", which I haven't found how to remove (yet?). As if we didn't know the video was fullscreen.

    Anyway, I ended up with a .mkv video and thought : "Nearly there. Now I just have to find how to cut off the beginning and the end of the video".

    Ha.

    animationmaker crashed my pc. avidemux didn't install. Broken pipe. vidcutter kept removing the part I wanted to keep and to save the part I wanted to remove. oneshot wouldn't stop at 10 seconds, no matter what. It kept jumping from 9.something to 10.3 seconds. I didn't find the "cut" command in kdenlive. ffmpeg copied the whole video, though I had carefully set the starting time and duration. avconv was not found by apt-cache search.

    Pitivi at last did the trick. With this it is quite easy. Load the video file in the small sub-window on the left, drag it to a track, place the cursor where you want it cut. The cut button and the delete button are on the right side of the window. Once a piece is cut, you click on it to select it and you click delete. If the piece you cut off is at the beginning of the video, drag the remaining piece against the start position.

    To save, don't click "Save", click "Render". You have a choice of output formats. I chose mp4 and ogv. mp4 is smaller, ogv is better quality. Rendering takes a while.

    But not nearly as long as it took me to figure all that out :).

    • 0