DEV Community

Cover image for Pausing UIImageView animation in Xamarin.iOS
Michał Żołnieruk
Michał Żołnieruk

Posted on • Originally published at codingwithmiszu.com

Pausing UIImageView animation in Xamarin.iOS

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:

  • Prepare your frames in png format, name them using an ordering convention (for example “Frame1.png”, “Frame2.png”, …)
  • Add these images to your Xamarin.iOS project, let’s say to Resources/Animation folder
  • Make sure all of your images are referenced as BundleResource in your csproj:
<ItemGroup>  
  <BundleResource Include="Resources\\Animation\\\*.png" />  
</ItemGroup>
Enter fullscreen mode Exit fullscreen mode
  • 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:

UIImageView animation running on iPhone simualator

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:

Animation can now be paused with a tap

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. Follow me on Twitter for more insights about mobile dev and other tech 🚀

Top comments (0)