Pausing UIImageView animation in Xamarin.iOS

gif source: https://cliply.co/clip/rocket-icon/

First things first — did you know that you can use UIImage to show frame-by-frame animations? It’s actually quite straight forward, all you need to do is:

1. Prepare your frames in png format, name them using an ordering convention (for example “Frame1.png”, “Frame2.png”, …)
2. Add these images to your Xamarin.iOS project, let’s say to Resources/Animation folder
3. Make sure all of your images are referenced as BundleResource in your csproj:

<ItemGroup>
  <BundleResource Include="Resources\Animation\*.png" />
</ItemGroup>

4. Load your images as UIImage and pass them to the UIImageView using AnimationImages property:

Add animatedImageView to your controller and here’s what you will see:

gif source: https://cliply.co/clip/rocket-icon/

Great, it’s alive! 🧟‍♂️ What if you’d like to pause the animation on tap and then resume it after another tap? Sadly, there’s no API for this in the UIImageView, but there is a way to accomplish it using UIImageView’s Layer.

I’ve found it described in one of the Technical Q&As on developer.apple.com. This Objective C code may not be so easy to rewrite to C#, especially if you’re just getting started, so below is a working solution in Xamarin.iOS. You may want to polish the code a bit (extracting StopAnimation/StartAnimation extension methods may be a good start).

Now you should be able to pause/resume the animation with taps:

gif source: https://cliply.co/clip/rocket-icon/

Do I need to add my frames as iOS Assets? It’s kind of tedious with so many files! 😱
No, you can just drag and drop the whole folder to Resources, remember to reference files as BundleResource.

The animation is not pausing when I tap it, what’s wrong? 🤔
You might have forgotten to set UserInteractionEnabled to true on the UIImageView.

I hope that this quick tutorial was helpful to you. Let me know if something is not clear ✌🏻