ios – Clock Field Animation with SwiftUI


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 {
            Timer.scheduledTimer(withTimeInterval: 1, repeats: true,
                                 block: {_ in
                self.oldDate =
       = 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)
    func splitUpTime() -> Array<String> {
        let splitDate = timeManager.timeString(timeFormat: "HH:mm:ss", date: ":")
        return splitDate

struct SingleBox: View {
    let textual content: String
    var physique: some View {
            ZStack {
                RoundedRectangle(cornerRadius: 12)
                Textual content(textual content)
            }.body(width: 90, peak: 90)


Leave a Reply