Ultimate Guide to GIFs in iOS.

The other side of the animated stuff.

GIFs are around from the late 1980s. It is only in the recently that they have blown virtually. From blogs to meme websites, you can see them anywhere. There are many reasons of using a GIF over a picture, for example, they are not usually heavy as videos, gets across your point appropriately and are compatible everywhere.

If a picture can say a thousand words, imagine how many a GIF can.

Native support for playing GIFs in iOS exists, but is tedious as hell. You’d wanna load every image of the GIF with Apple’s ImageIO framework, customizing theAnimatedImages, animationDuration and animationRepeatCount APIs of UIImageView.
Flipboard, implemented a solution to play GIFs inside their app. We will be using their library called as FLAnimatedImage to replicate the same in our nifty little app.

Follow These Steps:

1. Install Cocoapods. If you don’t have it installed, follow the steps here.
2. Create a new Xcode Project. I’m naming it GIFTest.

Creating a new Xcode Project

FLAnimatedImage has a cocoapod available. If you do not know how what is Cocoapods or how it works, check out this link.

3. Now, open Terminal. Change directory to wherever you saved your iOS Project. Initialise Cocoapods for our project by typing pod init. Next, open podfile by typing open podfile. We’ll add the pod to it. Add the line pod ‘FLAnimatedImage’

Screenshot of all steps in Point 3.

4. Now, we’ll do a pod install to install the pod to our project. We’ll close all sessions of Xcode and open GIFTest.xcworkspace project. That is the Xcode project with the white icon. The xcworkspace project has our original project, and one xcode project with pods.

5. Great! With all the setup done, we’ll add three UIImageViews to our project. We’ll change their class to FLAnimatedView.

6. Import FLAnimatedImageView and create outlets for all three images.

7. Now we’ll load two GIFs locally, and one GIF from the internet. To load GIFs locally, move them to your project, and check “Copy items if needed”.

8. Now for loading GIFs locally, follow the below steps.

Displaying GIFs from within the Project

9 . For loading GIFs from the internet, follow the below steps.

Displaying GIFs from network

10. The final project looks something like :

Under the Hood (shhhh…)

So, whenever a GIF is provided, a frame is uncompressed into Bitmap format (CPU intensive), and tucks it into the cache. The encoded bitmap persists till the lifetime of the object. It tries to choose the cache size efficiently, i.e, if the GIF is too small, it keeps the frames in cache, else, it buffers just enough frames ahead to playback in real time. When the system issues a memory warning, all frames are dropped, and the procedure falls back to on-demand decoding.

What we learnt today?

So, today we learnt how to use Cocoapods, initialise it in our project, we installed Flipboard’s open source library, FLAnimatedImage and used it for displaying GIFs from within the project and one from the internet.

For further reference, check out the library here.
For complete source code, refer to my Github repository.

For any questions and suggestions, feel free to drop a comment below!