[英]Animation after animation working with Path in SwiftUI
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:
您以错误的方式切换了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)
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.