1

How do I produce an animation that simulates the burning effect of fire consuming an UIView from top to bottom in Swift?

I found Fireworks, an app that allows users to tweak and try out different settings of CAEmitterLayer with instant results. The effects are great for applying to a whole screen but how would I use it for my purpose - where the UIView must disappear as the fire consumes it from one end to the other?

Is there some tutorial on consuming UIViews with fire using the particle emitter anywhere? I know that I’m supposed to show some code but anything I put here would be irrelevant. I’ve also exhausted my search engine looking for something similar. That’s how I found the Fireworks app actually.

This seems to be a use case that shouldn't be uncommon.

Adrian Bartholomew
  • 2,506
  • 6
  • 29
  • 37
  • 1
    You have a unique, custom need. It sounds like you found a good example of using a CAEmitterLayer to create a fire effect. You then need to do some original development to create a "burn a view away from top to bottom" effect. I'd suggest using a gradient layer as a mask on your view's layer, and animating the gradient layer from opaque to clear, top-to-bottom, which would cause the view to fade away from top to bottom. Combine that with a fire emitter layer that causes fire to emit from the top of the view as it fades away. – Duncan C Jun 14 '21 at 14:30
  • This YouTube tutorial creates a fire effect that should be a great start for what you are after: https://www.youtube.com/watch?v=KFVktChKfDc (I don't see a link to code. You'd have to watch the video in full-screen mode, pause it, and type in the code.) – Duncan C Jun 14 '21 at 14:39
  • That YouTube video I linked is a great starting point. I typed in the code over lunch and got it working in about 10 minutes. Note that you need to create a small image of a puff of fire and save it to the projects assets named "fire". The next step after that would be animating the fire emitter layer to start at the top of the view you are "burning down" and animate it down, as you also animate a gradient mask to hide the view. – Duncan C Jun 14 '21 at 17:55
  • Thank you Duncan! I will take a look as soon as. In the office at the moment. – Adrian Bartholomew Jun 14 '21 at 18:21

2 Answers2

4

I haven't done much with CAEmitterLayer, so I decided to try my hand at this.

I created a project that does this an posted it on Github. It uses the approach in this Youtube video as a starting point. You can download it here:

FireEmitter project

Here is a small thumbnail of what it looks like:

The project includes a custom subclass of UIView called BurnItDownView

The BurnItDownView is meant to contain other views.

It has one public method, burnItDown(). That triggers the animation.

There are multiple parts to the animation:

  1. A CAEmitterLayer set up to simulate flames burning off a flat surface:
  2. An animation that lowers the emitter layer from the top of the view to the bottom,
  3. A CAGradientView applied as a mask to the view that starts ot fully opaque (with colors of [.clear, .white, .white] and locations of [-0.5, 0, 1] (where the clear color is above the top of the view) and animates the locations property of the gradient view to mask away the view contents from top to bottom. (Animating the locations property to [0, 0, 0], so the entire gradient layer is filled with clear color, fully masking the view's layer.)
  4. Once the view is fully masked, it starts lowering the "birthRate" of the emitter layer in steps until the birth rate is 0. It then holds this step for 2 seconds until all the flame particles have animated away.
  5. Once the flame is fully "extinguised", it resets the locations array to the original value of [-0.5, 0, 1]. This causes an "implicit animation" so the view animates back from the bottom, but quickly
  6. Finally, it resets the emitter layer and emitter cells back to newly a newly created emitter layer and emitter cell to get it ready for the next pass of the animation. (I couldn't figure out how to restore the emitter back to its original state. It was simpler to just create new ones.) It also invokes an Optional completion handler passed to the burnItDown() method. (The app's view controller uses the closure to re-enable the "Burn it down" button.
Duncan C
  • 128,072
  • 22
  • 173
  • 272
  • 1
    The content view that I decided to "set fire to" was an obvious choice if you live in the eastern United States in the spring of 2021... – Duncan C Jun 15 '21 at 00:31
2

I was once in your shoe before and came across this Open source library called particle animations.

I would NOT recommend using the library itself since it's deprecated. But I would recommend referring to its source code to get an idea of how to use CAEmitterLayer and CAEmitterCell to make the looks of a Fire!

As you could see from its readme, it has direct examples of Fire. It also states that even Apple and Facebook uses CAEmitterLayer and CAEmitterCell to produce the effect of a fire.

Feel free to ask for more questions.

minchaej
  • 1,294
  • 1
  • 7
  • 14