Slowing down a GIF has merits

 

GIFs are very engaging and dynamic images and they can run at a speed set at the time of creation. Well, some GIFs may look way better when run at a slow speed. 

You can use Python code to slow down a GIF that is too fast for your liking. In the previous post, you learnt how to make a GIF from scratch using Python. In this post, you will use Python code to slow down a GIF. The post shows an example.

Here is a GIF that is somewhat fast. It is copied from a website. 

Now here is the Python code that you can use to slow it down. The code shown is copied from my PyCharm user interface. If you copy and paste make sure the indentation requirements are satisfied.

from PIL import Image, ImageSequence
# Open the original GIF gif_path = 'lawn-time-lapse.gif'
gif = Image.open(r'C:\Users\hoden\PycharmProjects\exploreImage\Images\lawn-time-lapse.gif')
# Create a list to hold the frames
frames = []
# Loop through each frame in the original GIF
for frame in ImageSequence.Iterator(gif):
# Append each frame to the list
    frames.append(frame.copy())
# Save the frames as a new GIF with a slower speed
frames[0].save('slowed_down_1_gif.gif', save_all=True, append_images=frames[1:], 

duration=200, loop=0)
print('Slowed down GIF saved as slowed_down_1_gif.gif')

The fast GIF is in the project folder in the path shown. The ImageSequence is the key. You get a sequence of images in the frame that you append to a list. Save the frames as a new GIF with a slower speed. Duration in PIL is absolute in milliseconds.

The code before the print saves the first frame(frames[0]) and it saves all the frames slowing down to a duration of 200 seconds and appends the rest of the frames starting from frame[1], the second frame in the sequence.

Here is the result of slowing down the original GIF.

Since we have a handle to the sequence, we can find the original frames and the original duration as well.

Adding an image in the Asset folder to a UWP project's page

You may need to display an image stored in the asset of your UWP project from another control's event handler.

Let us take the simple example of a button click event displaying an image stored in the project's Asset folder on the page.

At a minimum we create a UWP Blank project. Then we add a StackPanel. In the StackPanel we place two named elements, a button and an image by providing the NAME property for the controls.

We bring in an external image into the Asset Folder using:

Since we configured a click event in the XAML, this BTN_Click event code will be present in the MainPage.xaml.cs as shown.

We create an instance of Image as a new image. The source for this image has to change from System.Uri to Windows.Foundation.Uri that UWP requires and hence the conversion. 

However, code needs fixing, and there is a fix with a link. You can safely click this to modify. This includes a new using reference (using Windows.UI.Xaml.Media.Imaging) as shown. 

The this.BaseURI is now referencing the ASSETS folder's content that we added as shown.

This completes the code and the Project builds without errors. When you run it in the Local Machine as you have done with the others you see this page.

App Display

App Display after button click

It is important to note that the Visual Studio's debugging, intellisense, code completion and code hints should be used effectively as it is not possible to remember all the details of Windows.Foundation classes.