CODEWITHSUNDEEP
animationimagemagickgif
max pleaner
max pleaner

Reputation: 26758

Merging two transparent gifs as layers

I've found this page on the imagemagick forum: Merging 2 gifs, one is animated and transparent which links to the imagemagick docs on Animation Modification; specifically, the example here:

  convert canvas_prev.gif -coalesce \
          -gravity NorthEast  -draw 'image over 5,5 0,0 "rose:"' \
          -layers Optimize   draw_over.gif

Here's my attempt. I have these two gifs (i might be feeling a little morbid). The white in the first is actually transparent.

enter image description here

enter image description here

when I run 

convert eyes.gif -coalesce -draw ' image over 0,0 0,0 "trump.gif" ' combine.gif

I get this:

enter image description here

which is not the complete effect I desire. The trump animation is no longer playing at all.

I want to see something more like this (this is created in Phaser JS, but this gives me no way to export the result as a new image other than manually recording a screencast):

enter image description here

Upvotes: 2

Views: 1501

Answers (1)

rostok
rostok

Reputation: 2137

One way to do it, yet not sure if it's the best, is as follows:

  1. convert both animations into sprite-sheets of same dimensions
  2. paste one image over the another
  3. cut result into smaller frames and convert it into animated GIF

The commands should look like this:

montage -background none t.gif -tile x1@ -geometry +0+0 tt.png
montage e.gif[0-16,0-9] -tile x1@ -geometry +0+0 ee.png
magick convert -delay 10 -loop 0 ee.png tt.png -coalesce -flatten \
        -crop 150x150 +repage output.gif

Tricky part is the second line with eyes image. It has only 17 frames while skull has 27. So the sprite sheet size must be adjusted.

I works, however I am not quite happy with this as solution requires manual entering of some parameters (frames selection and output image dimensions).

Upvotes: 2

Related Questions