ios – Clock Field Animation with SwiftUI

[ad_1]

I wish to create an animation like confirmed on this video.

I already created a view that exhibits the present time, splitted in three containers, however I dont know learn how to animate it. Thanks on your assist!

That is my enviroment object, which will get the present time:


import SwiftUI


class TimeManager: ObservableObject {
    @Printed var date = Date()
    @Printed var oldDate = Date()

    func timeString(timeFormat: String, date: Date) -> String {
        let formatter = DateFormatter()
        formatter.dateFormat = timeFormat
        
        let time = formatter.string(from: date)
        return time
    }
    
    // replace time
    var updateTimer: Timer {
        withAnimation(.spring()){
            Timer.scheduledTimer(withTimeInterval: 1, repeats: true,
                                 block: {_ in
                
                self.oldDate = self.date
                self.date = Date()
                
            })
        }
    }
}

And that is the view, which splits the time in containers:

struct BoxesView: View {
    
    @EnvironmentObject var timeManager: TimeManager
    
    var physique: some View {
        
        HStack(spacing: 30) {
            
            let timeElements = splitUpTime()
            
            ForEach(timeElements, id: .self) { timeElement in
                SingleBoxElement(textual content: timeElement)
            }
            
            
        }.ignoresSafeArea()
    }
    
    func splitUpTime() -> Array<String> {
        
        let splitDate = timeManager.timeString(timeFormat: "HH:mm:ss", date: timeManager.date).parts(separatedBy: ":")
        
        return splitDate
    }
}

struct SingleBox: View {
    
    let textual content: String
    
    var physique: some View {
            
            ZStack {
                
                RoundedRectangle(cornerRadius: 12)
                    .foregroundColor(.pink)
                
                Textual content(textual content)
                    .foregroundColor(.white)
                    .font(.title)
                    .fontWeight(.semibold)
                    .monospacedDigit()
                
                
            }.body(width: 90, peak: 90)
    }
}


[ad_2]

Leave a Reply