I have two paths I'm trying to animate in one continuous motion (one after the other). I'm drawing a circle and trying to follow that up with a line.
@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()
}
You toggled trim
in wrong way that should be done in 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)
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.