Hello!

Christmas is long past, but after it we still have an interesting story about how using the infrequently used Core Animation feature, you can create a festive mood for users. I share the translation of the article by my London colleague Alexis.
')
Christmas has always been one of my favorite days of the year. It brings into our lives a lot of love, laughter, happiness and magic.

I was born and raised in Spain, in Tenerife, a sunny island in the middle of the Atlantic Ocean off the coast of Africa. And believe me, Christmas in Tenerife is very different from Christmas in London, where I have met him for the past two years (since I started working at Badoo).

One of the advantages of living in London for me was the contemplation of snowflakes. Here I saw them for the first time in my life, it was just incredible!

Remembering this, I decided to share with you one interesting story that happened to me in the office shortly before Christmas, before I went to Tenerife to meet the holiday with my family.

It so happened that I was assigned one unusual task with the following description:



Hmm, quite entertaining. We wanted to add a Christmas animation with snowflakes to our iOS application, and I became the lucky one who had to create it. But I did not know where to start.

As usual, a sketch file with the necessary design was linked to the task, which looked like this:



At a minimum, I saw what we needed, but was not completely sure how these snowflakes should behave. To clarify all the details, I went to communicate with the designers.

As I suspected, they already had a great animation drawn in After Effects .

The designers explained to me that they want to add snowflakes falling from above into the already existing animation of the launch of the application (as well as the Santa hat on our logo, but it was a simple substitution of the picture, unworthy of the mention in this article).

I knew that the animation of launching an application on iOS was made using Lottie , since it was added after I joined the company (details can be found in the article Radek Cieciwa ). However, I told the designers that I would try to find simpler solutions for displaying snowflakes (without the need to use Lottie) - and began to explore different approaches.

This is the animation that my colleague Radek did for Badoo. Impeccable!



And this is how I added falling snowflakes. Want to know how I did it? You will find the answer below.

Particle Systems

While reading various documentation about animations, I remembered that particle systems are often used in games and movies to solve such problems.

Wikipedia describes this concept fairly accurately:

“The particle system is a method used in computer graphics for representing objects that do not have clear geometric boundaries (various clouds, nebulae, explosions, steam jets, rocket plumes, smoke, snow, rain, etc.). Particle systems can be implemented in both 2D and 3D graphics. ”

A particle system consists of one or more graphic primitives, such as points, lines, or images, called particles. These particles are created and emitted by the emitter, which is part of the particle system.

Each particle has a set of parameters that directly or indirectly affect its behavior and determine how it will be drawn. Particles can move simultaneously in large numbers and in different directions, for example, to create a fluid effect.

The animation takes effect when particles are emitted by the system. The system emits particles in random places within a given particle system area. It can take various forms: circle, rectangle, sphere, parallelepiped, line, point, etc.

The system also determines the properties of particles that affect their geometry, speed, and other parameters. Different emitter APIs have different names of similar properties.

When particles are emitted by the system simultaneously, they create stunning animations that can look like rain, fire or snow.

From theory to practice

I thought that Apple most likely has built-in support for a particle system in one of its frameworks. And the results of my searches have shown that I am right.

The particle system is part of the Core Animation framework and is well described in the CAEmitterLayer and CAEmitterCell classes .

After studying all the necessary information about the particle system and the supported APIs on iOS, I proceeded to my favorite part - the realization of our idea.

Unfortunately, Christmas is not forever, so we needed the ability to turn off snowflakes remotely after December 25th.

As I mentioned above, the app's launch animation was implemented using Lottie. That is, I had to find a way to add snowflakes in such a way that it did not affect the existing animation and its code, because my decision had to be removed immediately after the release.

I found a very simple way to do this - I added a new transparent UIView to show the snowflakes in front of the existing animation and background and then controlled its appearance remotely using a flag.



The image above shows the UIView that was used in the final solution:

1. UIView with a particle system that emitted snowflakes.
   
2. UIViews used in the Lottie-run application animation.
   

After this problem was solved, I had to create a component that contains the logic of particle emission for generating animated snowflakes.

For a start, I needed images of snowflakes that I could use as content for the emitter. They should be pretty simple, right?

Each snowflake was either a regular or blurred white circle. I created them myself in Sketch.

Some implementation details

CAEmitterLayer is a special CALayer that creates, animates and draws a particle system. It allows you to control your geometry, position, drawing mode, and more.

I started developing animation with layer creation:

snowEmitterLayer.emitterShape = CAEmitterLayerEmitterShape.line snowEmitterLayer.beginTime = CACurrentMediaTime() snowEmitterLayer.timeOffset = 10.0 

I needed to change only three properties:

• emitterShape : defines the shape of the layer. I used a line that allowed snowflakes to appear along the entire screen;
  
• beginTime : is part of the CAMediaTiming protocol and represents the time when the animation of the layer begins relative to the animations of the parent layer;
  
• timeOffset : is also part of the CAMediaTiming protocol and, in fact, is a rewind of the animation forward for a specified time relative to its beginning. I indicated a value of 10 seconds, which led to the fact that when the animation started, the snowflakes already covered the screen entirely, and this is exactly what we wanted (if I indicated a value of 0 seconds, then the snowflakes would start to appear on top and cover the screen entirely only after some time).
  

Having a ready layer, I created two different emitters: for snowflakes heavier and for snowflakes easier.

For heavy snowflakes, I configured the emitter as follows:

 let flakeEmitterCell = CAEmitterCell() flakeEmitterCell.contents = UIImage(named: "snowflake_dot")!.cgImage flakeEmitterCell.emissionRange = .pi flakeEmitterCell.lifetime = 20.0 flakeEmitterCell.birthRate = 30 flakeEmitterCell.scale = 0.15 flakeEmitterCell.scaleRange = 0.6 flakeEmitterCell.velocity = 30.0 flakeEmitterCell.velocityRange = 20 flakeEmitterCell.spin = -0.5 flakeEmitterCell.spinRange = 1.0 flakeEmitterCell.yAcceleration = 30.0 flakeEmitterCell.xAcceleration = 5.0 

As you can see, I had to change a significant amount of properties, each of which is very important to achieve the desired effect:

• contents : CGImage, used to display one snowflake (as you remember, this is one of those images that I created on my own);
  
• emissionRange : angle in radians defining a cone within which particles will appear (I chose the angle PI so that the particles are visible on the whole screen);
  
• lifetime : determines the lifetime of a single particle;
  
• birthRate : determines the number of particles emitted every second;
  
• scale and scaleRange : affects the size of the particles, where the value 1.0 is the maximum size; the interval determines the deviations in size between the created particles, which allows to emit particles of random sizes;
  
• velocity and velocityRange : affects the rate of appearance of particles; deviates randomly within the value specified in the velocityRange;
  
• spin and spinRange : affect the speed of rotation, measured in radians per second, and the random deviation within the limits of the value specified in spinRange;
  
• yAcceleration and xAcceleration : these are the two components of the acceleration vector applied to the emitter.
  

I also needed a second emitter to create light snowflakes. All properties remained unchanged, except for two:

• contents : here I used images with a blurred circle;
  
• velocity : and here I had to reduce the speed of falling to give lightness to the snowflakes.
  

 let blurryFlakeEmitterCell = CAEmitterCell() blurryFlakeEmitterCell.contents = UIImage(named: "snowflake_blurry_dot")?.cgImage blurryFlakeEmitterCell.velocity = 40 //      

It only remained for me to connect the layer and the emitters, which turned out to be very easy:

 snowEmitterLayer.emitterCells = [flakeEmitterCell, blurryFlakeEmitterCell] self.layer.addSublayer(snowEmitterLayer) 

Conclusion

I quickly created a working version with falling snowflakes, which looked very good. It was quite simple to implement and did not change the existing code. I showed it to the designers, and they really liked it.

Animations created with a particle system can be quite impressive and relatively easy to implement if you own the right tools.

More information about particle systems can be found in the following sources:

• Wikipedia
• Ray wenderlich
• Unity
• Allen Martin on particle systems