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>
- 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:
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:
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 🚀
Michał Żołnieruk@michalzolnieruk
My first Xamarin article got featured on WeeklyXamarin, thanks @kphillpotts 🙌🏻 if you’re interested, here it is - link.medium.com/UHpfxNXDZeb twitter.com/kphillpotts/st…07:05 AM - 01 Apr 2021Kym Phillpotts @kphillpottsYou slack off for one week and before you know it, WeeklyXamarin has 40 articles. Make sure to check out the Easter Edition: https://t.co/0ARPoNcw4v https://t.co/Npf2nyzpX6
Top comments (0)