Count Down Timer Animation SwiftUI

Photo by Charlie Wollborg on Unsplash

Today we will build a count down timer to learn animation on trim modifier. Shapes have trim modifier and it is animatable so we will see it in action with an example. Here is what final countdown timer will look like:

We will start with couple of State properties to keep track of progress and countdown.

@State private var progress = 1.0
@State private var count = 10

We also need a timer which will publish update every one second:

let timer = Timer.publish(every: 1, on: .main, in: .common).autoconnect()

So far, this is what we have in our view:

struct CountDownProgress: View {
    @State private var progress = 1.0
    @State private var count = 10
    let timer = Timer.publish(every: 1, on: .main, in: .common).autoconnect()
    
    var body: some View {
    
    }
}

Next, we will add a GeometryReader, VStack and a Stack. On GeometryReader, we will also set preferredColorScheme to be dark and 50 points of padding.

struct CountDownProgress: View {
    @State private var progress = 1.0
    @State private var count = 10
    let timer =…