Particle System in Xamarin Forms

Recently, I was wondering how to implement a particle system animation in an abstract way so that it can be used inside any control. Fortunately, Xamarin Forms has effects which suit perfectly for this use case since I can add an effect to any control. So as a proof of concept I decided to create an effect that when I tap on any point of the control it will emit particles in that specific point. We won’t cover the basics about effects so if you want to know more on this topic would recommend you read this first: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/effects/

By using a platform effect we will be able to listen when taps occur on the native control by subscribing to its touch/tap events so that we trigger the particle system when touched. To emit the particle system we will use each platform specific way to do this.

Let’s start!

1- Create a RoutingEffect

First, let’s create the RoutingEffect that will be used in our shared project. We will add some CLR properties so that we are able to customize the particles behavior.

• EmitMode – Sets the emission mode which could be OneShot(emit and stops) or Infinite(continuous emission without stopping).
• NumberOfParticles – Quantity of particles that will be created per second.
• LifeTime – Sets the life span of the particles in seconds.
• Speed – Sets the velocity for each particle.
• Scale – Sets the size for each particle (Could vary between 0 – 1).
• Image – Sets the image that will be used to display the particles.

2- Create Android Platform Effect

To handle particles in Android there’s an awesome particle system library called Leonids that works with the standard Android UI. We will be using a Xamarin Android binding available here: https://github.com/pgulotta/LeonidsBind.

We will add this project to our solution and then add it as a reference in our Android project.

Now we can create the platform effect and emit particles using it.

3- Create iOS Platform Effect

On iOS, will use CAEmitterLayer which allow us to emit, animate and render a particle system. This layer can be added as a sublayer to any UIView.

4- Now let’s try it out

Android

iOS

If we change the EmitMode to Infinite then we get a result like this:

Android

iOS

So now we have a cross-platform particle system effect which is close to a fireworks animation, not perfect since we still can tweak a few parameters to make it better. But it’s a good start to prove our concept. Hope this was helpful and fun!

You can find the sample project full source code here.

References

https://medium.com/@zhenya.peteliev/what-do-you-know-about-caemitterlayer-368378d45c2e

https://medium.com/@vialyx/import-coreanimation-create-cool-visual-effect-using-caemitterlayer-with-swift-343ddd5a6009

https://dkstudiostore.blogspot.com/2017/06/android-make-firework-animation-library.html

https://medium.com/@vialyx/import-coreanimation-create-cool-visual-effect-using-caemitterlayer-with-swift-343ddd5a6009h

http://plattysoft.github.io/Leonids/

Happy particles!