Animation 在SwiftUI中设置日期更改动画

我正在努力创建一个日期值不断变化的动画。下面是一个简化的例子。其目的是在日期从原始值更新为新值时，使用不断变化的值更新文本视图。非常感谢您的帮助

struct DateAnimationView: View {

    @State var date = Date()

    typealias AnimatableData = Date

    var animatableData: Date{
        get{date}
        set{date = newValue}
    }

    var body: some View {
        VStack{
            Text(date, style: .time)
                .padding()
            
            Button(action:{
                withAnimation(.linear(duration: 3.0)){
                    date.addTimeInterval(60 * 60 * 3)
                }
            }){
                Text("Add 3 hours")
            }
                .padding()
            Spacer()
        }
    }
}

另一次尝试也失败了：

struct InnerView: View {
    var date: Date
    var interval: TimeInterval
        
    typealias AnimatableData = TimeInterval
    
    var animatableData: TimeInterval{
        get{interval}
        set{interval = newValue}
    }
    
    var body: some View{
        Text(date.addingTimeInterval(interval), style: .time)
    }
}

struct DateAnimationView: View{
    @State var isOn: Bool = false
    var body: some View{
        VStack{
            InnerView(date: Date(), interval: isOn ? 60*60*3 : 0)
            Button(action:{
                isOn.toggle()
            }){
                Text("Go")
            }
        }
    }
}

---

基本思想是，您需要为正在设置动画的组件指定一个id。SwiftUI在重画时使用此id了解它是同一组件还是新组件。如果它是一个新组件，它将删除旧组件，并在动画中添加一个新组件。下面的代码实现了动画

struct DateAnimationView: View {
    @State var date = Date()

    typealias AnimatableData = Date

    var animatableData: Date{
        get{date}
        set{date = newValue}
    }

    var body: some View {
        VStack{
            Text(date, style: .time)
                .padding()
                .id(String(date.hashValue))
            
            Button(action:{
                withAnimation(.linear(duration: 3.0)){
                    date.addTimeInterval(60 * 60 * 3)
                }
            }){
                Text("Add 3 hours")
            }
                .padding()
            Spacer()
        }
    }
}

---

解决方案解决了类似的问题。

感谢您的快速响应。不幸的是，添加id似乎没有按预期工作。现在，两个日期值简单地叠加在一起。说清楚一点，我希望看到文本在接近新时间时“计算”时间值。（即：8:13->8:42->9:15->10:22->11:13）