Swift 复选标记动画的问题

您应该将勾选标记为Shape.这样，SwiftUI就可以为您处理布局，并且您不需要使用offset将其放在正确的位置.

以下是Shape实现的示例，基于您的Path中的点

struct CheckmarkShape: Shape {
    func path(in rect: CGRect) -> Path {
        var path = Path()
        let fifthWidth = rect.width / 5
        let quarterHeight = rect.height / 4
        path.move(to: .init(x: rect.minX + fifthWidth, y: rect.minY + 2 * quarterHeight))
        path.addLine(to: .init(x: rect.minX + 2 * fifthWidth, y: rect.minY + 3 * quarterHeight))
        path.addLine(to: .init(x: rect.minX + 4 * fifthWidth, y: rect.minY + quarterHeight))
        return path
    }
}

CheckmarkView可能看起来像这样:

@State var borderInit: Bool = false
@State var spinArrow: Bool = false
@State var dismissArrow: Bool = false
@State var displayCheckmark: Bool = false

var body: some View {
    ZStack {
        Color.black.ignoresSafeArea()
        Circle()
            .strokeBorder(style: StrokeStyle(lineWidth: borderInit ? 10 : 64))
            .frame(width: 128, height: 128)
            .foregroundColor(borderInit ? .white : .black)
            .animation(.easeOut(duration: 3).speed(1.5), value: borderInit)
            .onAppear() {
                borderInit.toggle()
            }
        
        // Arrow Icon
        Image(systemName: "arrow.2.circlepath")
            .frame(width: 80, height: 80)
            .font(.largeTitle)
            .foregroundColor(.white)
            .rotationEffect(.degrees(spinArrow ? 360 : -360))
            .opacity(dismissArrow ? 0 : 1)
            .animation(.easeOut(duration: 2), value: dismissArrow)
            .animation(.easeOut(duration: 2), value: spinArrow)
            .onAppear() {
                spinArrow.toggle()
                withAnimation(Animation.easeInOut(duration: 1).delay(1)) {
                    self.dismissArrow.toggle()
                }
            }
        CheckmarkShape()
            .trim(from: 0, to: displayCheckmark ? 1 : 0)
            .stroke(style: StrokeStyle(lineWidth: 10, lineCap: .round, lineJoin: .round))
            .frame(width: 100, height: 100)
            .foregroundColor(displayCheckmark ? .white : .black)
            .animation(.bouncy.delay(2), value: displayCheckmark)
            .onAppear() {
                displayCheckmark.toggle()
            }
    }
}

您应该将value参数传递给所有animation修饰符.不含value的版本已被弃用.

由于您使用了 spring 动画，因此我假设您希望复选标记的笔画在其应该结束的地方移动一点beyond，然后反弹.您可以通过扩展Shape实现中的箭头路径并将trim动画为小于1的内容来实现这一点.

struct CheckmarkShape: Shape {
    func path(in rect: CGRect) -> Path {
        var path = Path()
        let fifthWidth = rect.width / 5
        let quarterHeight = rect.height / 4
        path.move(to: .init(x: rect.minX + fifthWidth, y: rect.minY + 2 * quarterHeight))
        path.addLine(to: .init(x: rect.minX + 2 * fifthWidth, y: rect.minY + 3 * quarterHeight))
        path.addLine(to: .init(x: rect.minX + 5 * fifthWidth, y: rect.minY))
        return path
    }
}

.trim(from: 0, to: displayCheckmark ? 0.75 : 0)