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:
- Install Cocoapods. If you donāt have it installed, follow the steps here.
- Create a new Xcode Project. Iām naming it GIFTest.
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ā
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.
9 . For loading GIFs from the internet, follow the below steps.
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!