[英]SwiftUI animation: How to stagger repeating animation with delay
尝试在 SwiftUI 中实现以下动画并发现这是不可能的:
总结一下效果:一个重复的脉冲,以交错的延迟为每个片段设置动画。 对于每个细分市场:
此外,每个“脉冲”之间都有延迟。
使用 SwiftUI 最接近此效果的是使用.repeatForever
修饰符的连续重复动画。 (下面的代码。暂时忽略时间不匹配。)
如何在动画的每个循环之间添加延迟?
下面是我的代码的结果:
import SwiftUI
struct ArrowShape : Shape {
func path(in rect: CGRect) -> Path {
var path = Path()
path.move(to: CGPoint(x: 0, y: 0))
path.addLine(to: CGPoint(x: rect.size.width, y: rect.size.height/2.0))
path.addLine(to: CGPoint(x: 0, y: rect.size.height))
return path
}
}
struct Arrows: View {
private let arrowCount = 3
@State var scale:CGFloat = 1.0
@State var fade:Double = 0.5
var body: some View {
ZStack {
Color(red: 29.0/255.0, green: 161.0/255.0, blue: 224.0/255.0).edgesIgnoringSafeArea(.all)
HStack{
ForEach(0..<self.arrowCount) { i in
ArrowShape()
.stroke(style: StrokeStyle(lineWidth: CGFloat(10),
lineCap: .round,
lineJoin: .round ))
.foregroundColor(Color.white)
.aspectRatio(CGSize(width: 28, height: 70), contentMode: .fit)
.frame(maxWidth: 20)
.animation(nil)
.opacity(self.fade)
.scaleEffect(self.scale)
.animation(
Animation.easeOut(duration: 0.8)
.repeatForever(autoreverses: true)
.delay(0.2 * Double(i))
)
}
}
.onAppear() {
self.scale = 1.2
self.fade = 1.0
}
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
Arrows()
}
}
我认为你可以使用 Timer 和 DispatchQueue 来实现它,试试这个,看看它是否按你想要的方式工作
struct Arrows: View {
private let arrowCount = 3
let timer = Timer.publish(every: 2, on: .main, in: .common).autoconnect()
@State var scale:CGFloat = 1.0
@State var fade:Double = 0.5
var body: some View {
ZStack {
Color(red: 29.0/255.0, green: 161.0/255.0, blue: 224.0/255.0).edgesIgnoringSafeArea(.all)
HStack{
ForEach(0..<self.arrowCount) { i in
ArrowShape()
.stroke(style: StrokeStyle(lineWidth: CGFloat(10),
lineCap: .round,
lineJoin: .round ))
.foregroundColor(Color.white)
.aspectRatio(CGSize(width: 28, height: 70), contentMode: .fit)
.frame(maxWidth: 20)
.animation(nil)
.opacity(self.fade)
.scaleEffect(self.scale)
.animation(
Animation.easeOut(duration: 0.5)
//.repeatForever(autoreverses: true)
.repeatCount(1, autoreverses: true)
.delay(0.2 * Double(i))
)
}.onReceive(self.timer) { _ in
self.scale = self.scale > 1 ? 1 : 1.2
self.fade = self.fade > 0.5 ? 0.5 : 1.0
DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
self.scale = 1
self.fade = 0.5
}
}
}
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.