Animation 在 animation 使用 SwiftUI 中的路徑之后

Question

我有兩條路徑我試圖以一個連續的動作（一個接一個）進行動畫處理。 我正在畫一個圓圈並試圖用一條線跟隨它。

@State private var revealStroke = false

Path { path in
                path.addArc(center: CGPoint(x: 100, y: 100), radius: CGFloat(50), startAngle: Angle(degrees: 0), endAngle: Angle(degrees: 360), clockwise: true)
                path.addLines([CGPoint(x: 200, y: 100), CGPoint(x: 150, y: 100)])
            }
            .trim(from: revealStroke ? 0 : 1, to: 1)
            .stroke(Color.purple, lineWidth: 3)
            .animation(Animation.easeOut(duration: 3))
            .onAppear() {
                self.revealStroke.toggle()
            }

Answer 1

您以錯誤的方式切換了trim ，應該這樣做to:

---

---

import SwiftUI

struct ContentView: View {
    
    @State private var startDraw: Bool = Bool()

    var body: some View {

        VStack(spacing: 30.0) {
            
            Path { path in
                
                path.addArc(center: CGPoint(x: 100, y: 100), radius: 50.0, startAngle: Angle(degrees: 0.0), endAngle: Angle(degrees: 360.0), clockwise: true)
                path.addLine(to: CGPoint(x: 200, y: 100))
                
            }
            .trim(from: 0.0, to: startDraw ? 1.0 : 0.0)
            .stroke(style: StrokeStyle(lineWidth: 10.0, lineCap: .round, lineJoin: .round))
            .shadow(color: Color.black.opacity(0.2), radius: 0.0, x: 20, y: 20)
            .frame(width: 250, height: 200, alignment: .center)
            .background(Color.yellow)
            .foregroundColor(Color.purple)
            .cornerRadius(10.0)
            .animation(Animation.easeOut(duration: 3), value: startDraw)

            Button("start") { startDraw.toggle() }.font(Font.body.bold())
            
        }
        .shadow(radius: 10.0)

    }
}