How to combine two or more GIFs with possibly varying framerates?

[QuantumToasted]

Hello, I am writing a bit of code which allows two or more arbitrary images to be drawn next to each other. Doing it with still images (png, bmp, jpeg) works just fine, but I am curious how it would be done with GIFs? Especially ones where the framerate may be different. My goal is to have [inputImage1], [inputImage2], ..., [inputImageN] and have a resulting image which looks like so:

[inputImage1][inputImage2][...][inputImageN]

Where the images are right next to one another in a single image.

Surely it's more complex than just drawing the input images onto a "canvas" image and then saving as GIF?

[antonfirsov]

Combine a new image framewise + dig out this property, and get/set it per each frame:
https://docs.sixlabors.com/api/ImageSharp/SixLabors.ImageSharp.Formats.Gif.GifFrameMetadata.html#SixLabors_ImageSharp_Formats_Gif_GifFrameMetadata_FrameDelay

(Sorry for the overly short comment, only had 1 minute.)

[JimBobSquarePants]

I'll be honest here and say that I'm not really sure what you are trying to achieve.

Here's a very simple example of interpolating two gifs into a result. The frame rates are unchanged. I'm hoping this gives you enough insight into the API to allow you to work the rest out.

using var source1 = ...;
using var source2 = ...;

// Set the first frame then clone all others from the
// first source image.
using var result = source1.Frames.CloneFrame(0);
for (int i = 1; i < source1.Frames.Count; i++)
{
    result.Frames.AddFrame(source1.Frames[i]);
}

// Now interpolate the second image.
int offset = 1;
for (int i = 0; i < source2.Frames.Count; i++)
{
    result.Frames.InsertFrame(offset, source2.Frames[i]);
    offset += 2;
}

[QuantumToasted]

I wish I could give a visual example here, but alas since I can't even complete this and I don't know of any available tools to do so (that I own at least), I can't really show it off. The end goal here is to have two separate GIFs combined into a single GIF where they are displayed physically next to each other. IE, two 250x250 GIFs would become one 500x250 GIF where GIF 1 was on the left, and GIF 2 was on the right. I assumed that having two separate GIFs with varying framerates would be a major hassle to tackle, because you obviously can't make one GIF play two separate GIFs at the same time. You have to tell it which from of both GIFs to show at any given moment in time. Hope that helps with the visual aid. I will take what you posted and see what I can do with it.

[JimBobSquarePants]

Yeah.... That's getting mathsy.

All the APIs are available to do the job (I.E loop and draw from two separate gifs into a new frame at given locations in an output image) but the implementation is a headache for me to think about.

[QuantumToasted]

I appreciate all your help. In the end I will probably just end up with a "close enough" implementation where I take the average framerates, find the highest, and "interpolate" for all the slower GIFs. It won't be pretty, but...This was just supposed to be for a fun project, I'm not exactly using this in a professional scenario. But thank you nonetheless!

[antonfirsov]

This looks like an algorithmic challenge rather than anything else.

I would try to unite the timeline of the two gifs in order to build the optimal one for the result gif, something like this:

input1 |-10-|---20----|-10-|---30--------|
input2 |---20----|------30------|-----40---------|

result |-10-|-10-|-10-|-10-|-10-|---20---|--20---|

Then use drawing methods to build the frames of result + set FrameDelay accordingly.

Regarding the specific code to achieve this, I'm afraid you are on your own, but this is kind of a work that will add up to your whiteboard-interview skills in case you need any ;)