feat: loading indicator animation

This commit is contained in:
Ryan Zhao 2023-09-27 16:34:12 +10:00
parent f86ace0969
commit d9a5d38497
1 changed files with 37 additions and 19 deletions

View File

@ -3,14 +3,15 @@
import SwiftUI
public struct ActivityIndicator: View {
@State private var trimTo: Double = 0.05
@State private var strokeStart: Double = 0.95
@State private var strokeEnd: Double = 1.0
@State private var shorten: Bool = false
@State private var rotation: Double = 0
@State private var isRotating: Bool = false
public var body: some View {
GeometryReader { (geometry: GeometryProxy) in
Circle()
.trim(from: 0, to: trimTo)
.trim(from: strokeStart, to: strokeEnd)
.stroke(
themeColor: .borderSeparator,
style: StrokeStyle(
@ -22,24 +23,41 @@ public struct ActivityIndicator: View {
width: geometry.size.width,
height: geometry.size.height
)
.rotationEffect(.degrees(rotation))
.animation(
Animation.timingCurve(0.5, 1, 0.25, 1, duration: 1.5),
value: self.shorten
)
.rotationEffect(!self.isRotating ? .degrees(0) : .degrees(360))
}
.aspectRatio(1, contentMode: .fit)
.onAppear {
withAnimation(
Animation
.timingCurve(0.4, 0.0, 0.2, 1.0, duration: 1.5)
.repeatForever(autoreverses: false)
) {
self.isRotating = true
}
self.trimStroke()
Timer.scheduledTimerOnMainThread(withTimeInterval: 1.5, repeats: true) { _ in
if self.shorten {
self.trimTo = 0.05
self.rotation += 540
} else {
self.trimTo = 0.95
self.rotation += 180
}
self.shorten = !self.shorten
self.trimStroke()
}
}
}
private func trimStroke() {
self.shorten = !self.shorten
if self.shorten {
self.strokeStart = 0.0
self.strokeEnd = 1.0
} else {
self.strokeStart = 0.0
self.strokeEnd = 0.0
}
withAnimation(.linear(duration: 1.5)) {
if self.shorten {
self.strokeStart = 1.0
} else {
self.strokeEnd = 1.0
}
}
}
@ -50,8 +68,8 @@ struct ActivityIndicator_Previews: PreviewProvider {
ActivityIndicator()
.foregroundColor(.black)
.frame(
width: 24,
height: 24
width: 40,
height: 40
)
}
}