Displaying Gifs in Tkinter - Python

Have you ever made an excellent desktop app using Tkinter and wanted to spice it up with GIFs? But, adding GIFs in Tkinter is a bit trickier than images.

In this blog, we'll learn how to put GIFs into your Tkinter app easily. Let's get started! 🎉🖼️

What is a gif?

Gif can be described as just a collection of frames(images) that are shown in a sequence, in a loop, thus creating an animation effect.

Steps:

1. Import required packages

   Here, we will use Tkinter for GUI and Pillow module for opening an image.

import tkinter as tk
from PIL import Image

1. Create the main application window and run the event loop

root = tk.Tk()
root.title("Displaing Gif")

root.mainloop()

1. Add labels and buttons

gif_label = tk.Label(root, image="")
gif_label.pack()

start = tk.Button(root, text="Start", command = lambda: animation(current_frame = 0))
start.pack()

stop = tk.Button(root, text="Stop", commnad = stop_animation)
stop.pack()

In gif_label gif will be displayed. And we have a start and stop button to control the gif.

1. Store Gif's path in the variable and open it using the pillow module.

file = "gif_file.gif"
info = Image.open(file)

1. Get the number of frames in the Gif and then create photoimage object for each frame and store them in a list.

frames = info.n_frames # number of frames

photoimage_objects = []
for i in range(frames):
    obj = tk.PhotoImage(file = file, format = f"gif -index {i}")
    photoimage_objects.append(obj)

format parameter in the photoimage class is required to read the frames of the gif.

Now since we have all the frames as photoimage objects, we can display them in the image label.

1. Create functions: animation and stop_animation to start and stop the gif respectively.

def animation(current_frame=0):
    global loop
    image = photoimage_objects[current_frame]

    gif_label.configure(image = image)
    current_frame = current_frame + 1

    if current_frame == frames:
        current_frame = 0 # reset the current_frame to 0 when end is reached

    loop = root.after(50, lambda: animation(current_frame))

The above animation function takes current_frame as an argument, which indicates the frame number that is going to be displayed.
So to display gif we have to start showing frames from the 0th index.

And to continuously update the frame we have to keep calling the function in a loop so we used root.after() which calls the function after every 50ms.

1. Create stop_animation function

def stop_animation():
    root.after_cancel(loop)

root.after_cancel(loop) cancels the scheduled function which has an after_id = loop.

That's why we declared loop = None, outside the function so that it can be used in both start and stop_animation.

And that's it. The code to display gif is complete. On clicking the start button, the below gif will be displayed.

Complete code🧑‍💻:

import tkinter as tk
from PIL import Image

root = tk.Tk()
root.title("Displaing Gif")

file = "gif_file.gif"
info = Image.open(file)

frames = info.n_frames  # number of frames

photoimage_objects = []
for i in range(frames):
    obj = tk.PhotoImage(file=file, format=f"gif -index {i}")
    photoimage_objects.append(obj)


def animation(current_frame=0):
    global loop
    image = photoimage_objects[current_frame]

    gif_label.configure(image=image)
    current_frame = current_frame + 1

    if current_frame == frames:
        current_frame = 0

    loop = root.after(50, lambda: animation(current_frame))


def stop_animation():
    root.after_cancel(loop)


gif_label = tk.Label(root, image="")
gif_label.pack()

start = tk.Button(root, text="Start", command=lambda: animation(current_frame=0))
start.pack()

stop = tk.Button(root, text="Stop", command=stop_animation)
stop.pack()

root.mainloop()

Thank you for taking the time to explore this blog post. 😊

I'm glad you found the blog post informative and valuable for your GUI programming journey. If you enjoyed the content, follow for more engaging and informative articles on similar topics. 🚀📚