如何在不創建 SwiftUI 中的子視圖的情況下為路徑設置動畫

Question

是否可以在不創建子視圖的情況下為路徑設置動畫？

例如。

struct ContentView: View {
    @State private var end = 0.0
        
    var body: some View {
        VStack {
            Button("Press me") {
                withAnimation {
                    end += 100
                }
            }
           
            Path { path in
                path.move(to: .zero)
                path.addLine(to: CGPoint(x: end, y: end))
            }
            .stroke()
        }
    }
}

我知道我們可以將Path提取到 SubView 中並使用animatableData屬性為其設置動畫，但是，我想知道如果不這樣做（直接為Path設置動畫）是否可以實現。

我嘗試過什么：我認為讓ContentView可動畫化並在ContentView本身中使用所需的animatableData屬性會有所幫助。

例如。

struct ContentView: View {
    @State private var end = 0.0

    var animatableData: Double {
        get { end }
        set { end = newValue }
    }
        
    var body: some View {
        VStack {
            Button("Press me") {
                withAnimation {
                    end += 100
                }
            }
           
            Path { path in
                path.move(to: .zero)
                path.addLine(to: CGPoint(x: end, y: end))
            }
            .stroke()
        }
    }
}

不幸的是，這沒有用。 我還嘗試向Path添加.animation修飾符，但仍然沒有完成工作。

是否可以在不將其包裝在Shape或不同類型的子視圖中的情況下為該Path設置動畫？ 我不希望在不將Path包裝在不同視圖中的情況下更改end並使更改動畫化。

提前致謝！

Answer 1

您可以將.trim修飾符與.animation修飾符一起使用。

struct PathAnimationView: View {
    @State private var end = 0.0
    @State private var trimStart: CGFloat = 0
    @State private var trimEnd: CGFloat = 0

    var body: some View {
        VStack {
            Button("Press me") {
                withAnimation {
                    trimStart = 0.0
                    end += 100
                    trimEnd = 1
                }
            }
            Path { path in
                path.move(to: .zero)
                path.addLine(to: CGPoint(x: end, y: end))
            }
            .trim(from: trimStart, to: trimEnd)
            .stroke()
            .animation(.easeOut(duration: 1.0), value: 1)
        }
    }
}

限制：.trim 將從頭到尾動畫一次路徑。

所以更好的用戶Shape class 來做到這一點。