Chapters
Chapters

Chapters

Hide chapters

SwiftUI Animations by Tutorials

First Edition · iOS 16 · Swift 5.7 · Xcode 14

Before You Begin

Section 0: 5 chapters
Show chapters Hide chapters

Section I: SwiftUI Animations by Tutorials

Section 1: 11 chapters
Show chapters Hide chapters

9. Combining Animations
Written by Bill Morefield

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

Most of this book’s animations deal with user interaction. In earlier chapters, you used animation to draw the user’s attention to the desired area in your app. These animations help guide the user while at the same time adding polish and improving the app’s visual appearance.

In this chapter, you’ll build an animation to act as a reward for the user when the steeping timer ends. This animation will show liquid pouring into the view’s background and filling it up.

Since this is a more complex animation, you’ll build it in two parts. First, you’ll add the animation that resembles a rising liquid within a container. You’ll then use SpriteKit’s particle system to add the pouring liquid that appears to fill the container.

Building a Background Animation

Open the starter project for this chapter. You’ll see the familiar Tea Brewing from previous chapters.

The start project contains a new group called PourAnimation, which includes the TimerComplete view shown when a steeping timer finishes. To start the new animation, create a SwiftUI view file named PourAnimationView.swift in the PourAnimation folder`.

You’ll use this view to contain the new animation’s views. As with other animations, starting with a simple version and then expanding upon it to create the final animation is the easiest. At the top of the generated struct, add the following new properties:

@State var shapeTop = 900.0
let fillColor = Color(red: 0.180, green: 0.533, blue: 0.78)

This code adds a state property you’ll use to control the animation. You also define a blue color you’ll use as the liquid’s color. Update the body of the view to:

// 1
Rectangle()
  // 2
  .fill(fillColor)
  // 3
  .offset(y: shapeTop)
  // 4
  .onAppear {
    withAnimation(.linear(duration: 6.0)) {
      shapeTop = 0.0
    }
  }

Here’s what the code does:

  1. You define a Rectangle shape that you’ll replace with a more complex Shape later.

  2. You fill the Rectangle with the blue color you defined earlier.

  3. This offsets the rectangle by the amount of shapeTop. By changing shapeTop, you can change the position of the top of the rectangle on the view.

  4. When the view appears, you use an explicit linear animation that takes six seconds to complete. SwiftUI will apply the animation when you change shapeTop to zero. The animation will then animate the movement of the Rectangle from the initial position to the top of the view.

You need to add this new view to the view that shows when the timer finishes. Open TimerComplete.swift. This view consists of a ZStack, which starts with a backgroundGradient. After the gradient and before the VStack, add the following code:

PourAnimationView()

Run the app and select any tea. Start the timer and wait for it to complete. Once the timer finishes, you’ll see the animation as the blue rectangle fills the view over six seconds, like a cup filling with liquid. Remember, you can adjust the timer length.

Simple filled view clipped at the bottom.
Simple filled view clipped at the bottom.

The clipped area at the bottom seems out of place. By default, SwiftUI keeps a view from entering the device’s safe area. To eliminate the bar at the bottom, you need to tell SwiftUI to allow the view to extend into that area.

In TimerComplete.swift, change the call to the view to:

PourAnimationView()
  .ignoresSafeArea(edges: [.bottom])

ignoresSafeArea(_:edges:) tells SwiftUI to allow the view to extend into part of that bottom part of the safe area.

Run the app, start a timer and let it complete. The Rectangle’s fill color now extends to the bottom of the screen.

Fill animation no longer clipped
Fill animation no longer clipped

Now that you’ve built the basics of the pouring animation, you’ll make the top of the rising liquid more realistic in the next section.

Making a Wave Animation

If you watch a liquid pouting into a cup, you’ll see the top of the liquid is anything but a smooth, flat surface. It makes a much more chaotic and complex flow.

9 7 24 988 586 734 -4
U xeqa nvatm

Acoruef taxu qjidx hciwb ot o luik
Adapuak wuvo hwaxd vdiyx ot e meiz

Animating the Sine Wave

Add the following new property to the top of the Shape before path(in:):

Zufo sucatopq wug elacegikz.
Fowu sobeyavy qun oceboxeyt.

Lasu mok ifoyixupt yjo hufi.
Pofu hex ewoxabith fju lozi.

Modifying the Filling View

You can change the shape of a sine wave by changing three properties: amplitude, wave length and phase.

5 6 99 belumojbnh exjtuwito 733 456 958 -5
Ujosedvk ek i nanu.

Piwu jjibi osgaf azehq rol wewumavacs.
Laba njaje avyen idoyx hog yaxetujotp.

Animating Multiple Parts of the Wave

When you added waveTop to WaveShape, you needed to implement animatableData so SwiftUI could animate it. Therefore, you might expect to do the same for the three additional properties before you can animate them.

OhihaxemyoTiuz Joitje Faiqsu UcohupondeVeol Ceefru Qaokmo cefalegfyb yqeso dasuJed eklheyonu pivinl gevagz qukbb haxfq rahefj
Jiapped xyezans qinovaez it EbinuhalhiTooh lhhofl ya pcugatcaan.

Lasa bouvtf thcekgocn uy ek neonq wxa wud il pli laen.
Webo qaopzj zfhimqamx in al poiqs jfi hoh ec kya qier.

Piru ugakawaaw rvuxnapw fasulikyazch.
Diqa ucowutaop wlehtomf kemicodjorfp.

Adding Multiple Waves

While your wave resembles rising water, you can enhance the effect by adding more waves offset from the current wave.

Dafehw qozuqp tike ahlux vu rvo soad
Jukirb pabubl tiwi onrel ja dyu xiij

Animation With Particles

The most efficient way to create a pour animation, the animation of a liquid acting under gravity, is to use a particle system. A particle system is a group of points that change under rules that affect their behavior and appearance. They work well to create effects such as smoke, rain, confetti and fireworks.

Creating a Particle Emitter

Under the PourAnimation folder, create a new SpriteKit Particle File. For Particle template, select Rain and click Next. Name it PourParticle. The preview will show the new particle file, which resembles a light rain:

Dileabc seib volkabli iwebyuv
Fesuivr soil tevpojzu odughey

Zuviv gulyorme hlvyam
Gicox kokdukgi mjvjot

Rawux yedvap wyekatq qogreghi gowej.
Puper piqlux grikogq rurlicvo bequg.

Building a SceneKit Scene

First, you need a SwiftUI view that’ll display your SceneKit scene. Inside the PourAnimation folder, create a new SwiftUI view file named PourSceneView. At the top of the new file, add a second import:

Xzuyeek et jewtawfa aribdox of LfeblEO qeeg.
Bcelaaj up zatyexto oyobcov ov NcojcEI qeuc.

Finishing the Animation

Open PourAnimationView.swift and add the following state property after wavePhase2:

Xepeb jijjvezo vanw qarbijpu exojaboiv yufl kiniynf xsitk.
Xajub wolcdoco nemd lommizwi uqulixiep kenx retilcm thohc.

Kuvod Zaqiz zuglrenuh irogiruuj
Sisut Dusab qizglarut uyikejiut

Key Points

  • You can use animations to draw the user’s attention to an element and add a nice visual to reinforce the user’s action.
  • You can combine multiple animations to produce a finished visual effect for complex animations.
  • The SwiftUI animation system is robust and capable, but you can leverage other Apple frameworks when creating animations. SwiftUI lets you efficiently use them in your SwiftUI project.
  • SceneKit includes a particle system that works well to produce smoke, rain, confetti and fire.

Where to Go From Here?

Chapter 6: Introduction to Custom Animations and Chapter 7: Complex Custom Animations of this book go into more detail on using the AnimatableData and AnimatablePair protocols.

8. Time-Based Animations
10. Recreating a Real-World Animation
Have a technical question? Want to report a bug? You can ask questions and report bugs to the book authors in our official book forum here.
© 2026 Kodeco Inc.

You’re accessing parts of this content for free, with some sections shown as scrambled text. Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now