Pushing the Apple Watch Breath app to another levelSource Apple ©Guided Breathing exercises have been acknowledged for their potential benefits towards mental and physical health. They can help reduce stress, increase focus, and promote better sleep. In light of this, Apple has integrated a simple yet effective Breathe app in its watchOS, promoting mindfulness and wellness among its users.In this article, we set out to engineer a similar experience to the Apple Watch Breathe app, but with a significant enhancement. Our goal is to construct a dynamic and customizable breathing animation utilizing SwiftUI — Apple’s powerful and innovative UI toolkit. This breathing animation not only presents a visually calming experience, but it also brings an added layer of adaptability. What sets our version apart is the capacity for developers and users to customize various parameters, such as the duration of breath in and out, the holding periods, and even the number of breath cycles. This advanced feature makes our interpretation of the Breathe app more flexible and suited to individual user needs, pushing the concept of a breathing app to a whole new level.Our goal is to create an immersive, flexible component that can be integrated into a wide variety of health and wellness apps, enabling users to personalize their guided breathing exercises according to their comfort and requirements. Let’s dive in to understand how we can leverage SwiftUI’s capabilities to create this user-friendly, interactive feature.Explaining the CodeWe start by defining the state and properties of our BreatheView:struct BreatheView: View { @State private var animate = false @State private var breathsTaken = 0 @State private var animationPhase: AnimationPhase = .breatheIn @State private var rotationAngle: Double = 0 let breatheInDuration: Double let breatheOutDuration: Double let holdInDuration: Double let holdOutDuration: Double let numberOfBreaths: IntThe @State property wrapper is used for properties that will change over time and cause the view to re-render. animate controls whether the animation is in the "breathe in" or "breathe out" phase, breathsTaken keeps track of how many breath cycles have been completed, and animationPhase stores the current phase of the animation.Subsequently, we established multiple constants to dictate the specifics of our animation. These constants are integral to the customizability of our feature, providing control over the duration of each phase of the animation — the breathing in, holding the breath in, breathing out, and holding the breath out — along with the total number of breath cycles to be completed. This design choice ensures that the animation can be tailored to meet various user preferences and needs, providing a personalized guided breathing experience for each individual user.Moving forward, we will introduce the AnimationPhase enum, a key player in our code structure. This enum will encapsulate the four potential stages of the breathing cycle: 'breathing in', 'holding in', 'breathing out', and 'holding out'. By distinctly representing these phases within our enum, we can easily manage the transitions between different stages of the breath cycle, ensuring a smooth, rhythmic flow that aligns with the natural process of breathing. enum AnimationPhase { case breatheIn, holdIn, breatheOut, holdOut }As we proceed in our exploration of the BreatheView code, the initializer emerges as a significant asset. This particular function doesn't just permit customization of our breathing animation—it actively facilitates it. It is designed to accept parameters that define the durations of each phase—breathing in, holding breath in, breathing out, and holding breath out—as well as the total count of breaths in a single cycle.The strength of this design lies in its adaptability and user-centric approach. When instantiating a BreatheView, the parameters can be fine-tuned to cater to the unique needs or preferences of each user. Even in situations where no specific arguments are provided, the initializer will revert to a set of default values, ensuring the breathing animation remains operational and effective.This level of personalization is what sets our BreatheView apart, even outpacing the original Breathe app from Apple in terms of adaptability. It is this feature that makes our BreatheView not just versatile, but also more attuned to individual user needs.In this way, you can create custom breathing exercises, like Box Breathing, Wim Hof breathing, etc. init( breatheInDuration: Double = 3, breatheOutDuration: Double = 3, holdInDuration: Double = 1, holdOutDuration: Double = 1, numberOfBreaths: Int = 0 ) { self.breatheInDuration = breatheInDuration self.breatheOutDuration = breatheOutDuration self.holdInDuration = holdInDuration self.holdOutDuration = holdOutDuration self.numberOfBreaths = numberOfBreaths }Moving forward in our implementation, we arrive at the body property of the BreatheView. This property represents the visual aspect of our component, and it's here where the magic of our breathing animation comes to life.At the heart of the body property, we find a ZStack. This SwiftUI element allows us to layer views on top of one another, creating a sense of depth and visual complexity. In our case, the ZStack houses eight distinct Circle views. These circles are the visual embodiment of the breaths in our animation, pulsating rhythmically in sync with the user's guided breathing exercise.The circles’ expansion and contraction are controlled by animation states, creating an engaging visual that mirrors the act of breathing. As the user breathes in, the circles expand, mimicking the filling of lungs with air. Conversely, as the user breathes out, the circles contract, reflecting the release of breath.This dynamic visual representation of the breathing process is not just aesthetically pleasing, but it also provides a tangible point of focus for the user during the exercise. By visually encapsulating the rhythm of breathing, the animation aids in enhancing the user’s mindfulness and immersion in the exercise, further elevating the effectiveness of the guided breathing experience.var body: some View { // Define the gradient colors let gradientStart = Color(red: 32/255, green: 217/255, blue: 210/255) // Light teal let gradientEnd = Color(red: 12/255, green: 232/255, blue: 255/255) // Greenish-blue let gradient = LinearGradient(gradient: Gradient(colors: [gradientStart, gradientEnd]), startPoint: .topLeading, endPoint: .bottomTrailing) ZStack { ForEach(0..