Prototype a Custom Toggle in SwiftUI

Part 2— Adding tap gestures and animation

In part one we created the basic elements of our toggle and styled them to match the designs. In part two we’ll learn how to add tap gestures and animations to make our prototype interactive.

Adding Animation

To update our page when we tap on the toggle we’ll use a State variable. State variables are monitored by Swift so when the variable changes from true/false we can use that as a trigger for animations. Take a look at the following changes.

• On line 5 we added our state variable with @State var toggleOn = false
• On line 32 we added an .onTapGesture to our ZStack that changes our toggleOn variable between true/false with self.toggleOn.toggle()
• On line 29 we’re adding a conditional statement that says if toggleOn is true change the offset to 18, otherwise -18.

At this point the knob should move back and forth when you tap it, however, there’s no animation. To make this interaction smoother add .animation(.spring()) below the padding.

Next, we’ll update some of the other modifiers to be conditionals just like we did with the offset. Here’s our code after we’ve made these changes:

One thing you might notice is that we didn’t have to add .animation to every element on the page. Instead, we added the animation modifier to our entire ZStack on line 39. Swift is clever enough to know that we want our animation applied to all views inside our stack which saves a bunch of time and code.

Adding the Rotating Illustration

In the designs we have an illustration sitting above our text views that changes from dark to light when we switch our toggle. To make things more interesting let’s animate the rotation of this image when our toggle is tapped.

Start by going back to the designs in Figma and export both the dark and light versions of our illustration as PDFs. Back in Xcode drag both images to our assets into Asset Catalog.

Importing illustrations from Figma

Back in ContentView put both images in a ZStack right above our Text views. Just like before we’ll use our toggleOn state to fade and rotate the images so we can achieve the 3d flip effect. We’ll also add the continue button to the bottom of our VStack with some styling. Here’s what the final code looks like:

Build and run your project in the device simulator to see the final result.

That’s all for this tutorial, thanks for reading!

👉 Visit my website

🐦 Follow Me on Twitter