An Urgent Request

Many years ago, my wife came to me with an urgent request: she needed a simple animation for a family dinner presentation. She passed me two animated GIFs and explained the plan.

The plan was to overlay pictures of her parents and the grandchildren on the heads in the animations, all accompanied by an upbeat soundtrack.

In other words, a small family project had suddenly become a programming problem.

This was the final result. The music starts immediately, with the video beginning three seconds later:

TGifPlayer

To put it together, I needed a simple way to play animated GIFs in an FMX application.

A Stack Overflow answer led me to TGifPlayer, which turned out to be exactly what I needed.

Playing an animated GIF in FMX with TGifPlayer couldn't be simpler.

Associate the player with an TImage, load the GIF from a file, and start playback: 

fGifPlayer := TGifPlayer.Create(Self);
fGifPlayer.Image := imgGrandParents;
fGifPlayer.LoadFromFile('Images\PulpFiction.gif');
fGifPlayer.Play;

With that, the animated GIF provided the base animation for the rest of the composition.

TFrame

I used two frames, one for each animated GIF. Each frame contained the GIF animation together with the family photos overlaid on the appropriate heads.

Here's the grandchildren frame:

Grandchildren frame with heads overlaid on the animated GIF

The overlaid images also needed to move with the animation. I kept that deliberately simple, using timer events to rotate them through a small sequence of angles.

This is the timer code for the grandparents: 

procedure TAhGongAhMaFrame.OnTick;
const
  LastAngleIndex = 3;

  AhGongAngles: array[0..LastAngleIndex] of integer = (15, 0, -15, 0);
  AhMaAngles:   array[0..LastAngleIndex] of integer = (15, 0, -15, 0);
begin
  Inc(fAngleIndex);

  if fAngleIndex > LastAngleIndex then
    fAngleIndex := 0;

  imgAhGong.RotationAngle := AhGongAngles[fAngleIndex];
  imgAhMa.RotationAngle   := AhMaAngles[fAngleIndex];
end;

Nothing particularly complicated was required: TGifPlayer handled the animated GIFs, FMX made it easy to layer and rotate the images, and a couple of frames kept the two animations self-contained.

Thanks to FMX and TGifPlayer, the mission was accomplished.