如何摆脱不需要的 SwiftUI 动画？

Question

我有一个黑色圆圈，当应用程序启动时，我希望它的 X 偏移量从 0 变为 100 并带有动画。换句话说，我希望圆圈随着动画向右移动，直到它接触到灰色框的右边缘。我还希望圆圈的颜色在它接触到灰色框的右边缘时突然从黑色变为蓝色而没有动画。

正如您在下面看到的，即使我的代码没有指定它应该随着动画改变颜色，圆圈也会随着动画逐渐从黑色变为蓝色。

我怎样才能摆脱这个不需要的动画，并在圆圈接触到灰色框的边缘时突然改变颜色？

import SwiftUI

struct ContentView: View {
    @State var circleOffset:CGFloat = 0
    var body: some View {
        HStack {
            Circle()
                .frame(width: 100)
                .offset(x: circleOffset)
                .foregroundColor(circleOffset == 100 ? .blue : .black)
        }
        .frame(width: 300, height: 150)
        .background(Color.gray)
        .onAppear{
            withAnimation(.linear(duration: 2)) {
                circleOffset = 100
            }
        }
    }
}

Answer 1

您在同一状态上加入颜色更改，您已将其设置为动画，因此如果您需要立即更改颜色，您必须使用不同的、不可动画的状态更新它，例如

struct ContentView: View {
    @State var circleOffset:CGFloat = 0
    @State var toggleColor = false
    var body: some View {
        HStack {
            Circle()
                .frame(width: 100)
                .foregroundColor(toggleColor ? .blue : .black)
                .offset(x: circleOffset)
        }
        .frame(width: 300, height: 150)
        .background(Color.gray)
        .onAppear{
            withAnimation(.linear(duration: 2)) {
                circleOffset = 100
            }
            DispatchQueue.main.asyncAfter(deadline: .now() + 2) {
                toggleColor.toggle()
            }
        }
    }
}

使用 Xcode 13 / iOS 15 测试