Looping a sequence of withAnimation functions - swift

Question

I'm creating a loading animation in SwiftUI (since Lottie is not supported for WatchOS and I can't get SDWebImageLottieCoder to work together with SwiftUI). This animation consists of a function called animateSpinner which goes over a bunch of withAnimation functions together with Dispatchqueue to mimic keyframes (delay was not working either).
Now this allows me to play the animation once, but how can I change the function to play forever ?
I tried looking into putting it inside a timer, or to use "while true" but all were unsuccessful.
Any ideas ?
struct MyView: View {
#State private var intro = false
#State private var mainIn = false
#State private var mainOut = false
#State private var outro = false
#State private var hideIntro: Bool = false
#State private var hideMainIn = true
#State private var hideMainOut = true
#State private var hideOutro = true
var body: some View {
ZStack {
// 01. Light Circle from background to right side
CirclesAnimated(lightCircleScaleFrom: 0.1, lightCircleScaleTo: 0.125, darkCircleScaleFrom: 0.15, darkCircleScaleTo: 0.125, lightCirclePositionFrom: 0, lightCirclePositionTo: 25, darkCirclePositionFrom: 0, darkCirclePositionTo: -25, lightCircleDarknessFrom: -0.5, lightCircleDarknessTo: -0.25,darkCircleDarknessFrom: 0, darkCircleDarknessTo: -0.25, frontCircle: .dark, animate: $intro)
.opacity(hideIntro ? 0 : 1)
// 02. Light Circle from right side to foreground.
CirclesAnimated(lightCircleScaleFrom: 0.125, lightCircleScaleTo: 0.15, darkCircleScaleFrom: 0.125, darkCircleScaleTo: 0.1, lightCirclePositionFrom: 25, lightCirclePositionTo: 0, darkCirclePositionFrom: -25, darkCirclePositionTo: 0, lightCircleDarknessFrom: -0.25, lightCircleDarknessTo: 0, darkCircleDarknessFrom: -0.25, darkCircleDarknessTo: -0.5, frontCircle: .light, animate: $mainIn)
.opacity(hideMainIn ? 0 : 1)
// 03. Light Circle from foreground to left side
CirclesAnimated(lightCircleScaleFrom: 0.15, lightCircleScaleTo: 0.125, darkCircleScaleFrom: 0.1, darkCircleScaleTo: 0.125, lightCirclePositionFrom: 0, lightCirclePositionTo: -25, darkCirclePositionFrom: 0, darkCirclePositionTo: 25, lightCircleDarknessFrom: 0, lightCircleDarknessTo: -0.25, darkCircleDarknessFrom: -0.5, darkCircleDarknessTo: -0.25, frontCircle: .light, animate: $mainOut)
.opacity(hideMainOut ? 0 : 1)
// 04. Light Circle from left side to background
CirclesAnimated(lightCircleScaleFrom: 0.125, lightCircleScaleTo: 0.1, darkCircleScaleFrom: 0.125, darkCircleScaleTo: 0.15, lightCirclePositionFrom: -25, lightCirclePositionTo: 0, darkCirclePositionFrom: 25, darkCirclePositionTo: 0, lightCircleDarknessFrom: -0.25, lightCircleDarknessTo: -0.5, darkCircleDarknessFrom: -0.25, darkCircleDarknessTo: 0, frontCircle: .dark, animate: $outro)
.opacity(hideOutro ? 0 : 1)
}
.onAppear {
animateSpinner()
}
}
private func animateSpinner() {
withAnimation(Animation.easeInOut(duration: 1)) {
intro.toggle()
}
DispatchQueue.main.asyncAfter(deadline: .now() + 1) {
self.hideIntro = true
self.hideMainIn = false
withAnimation(Animation.easeInOut(duration: 1)) {
mainIn.toggle()
}
}
DispatchQueue.main.asyncAfter(deadline: .now() + 2) {
self.hideMainIn = true
self.hideMainOut = false
withAnimation(Animation.easeInOut(duration: 1)) {
mainOut.toggle()
}
}
DispatchQueue.main.asyncAfter(deadline: .now() + 3) {
self.hideMainOut = true
self.hideOutro = false
withAnimation(Animation.easeInOut(duration: 1)) {
outro.toggle()
}
}
}
}
enum FrontCircle {
case light
case dark
}
struct CirclesAnimated: View {
var lightCircleScaleFrom: CGFloat
var lightCircleScaleTo: CGFloat
var darkCircleScaleFrom: CGFloat
var darkCircleScaleTo: CGFloat
var lightCirclePositionFrom: CGFloat
var lightCirclePositionTo: CGFloat
var darkCirclePositionFrom: CGFloat
var darkCirclePositionTo: CGFloat
var lightCircleDarknessFrom: Double
var lightCircleDarknessTo: Double
var darkCircleDarknessFrom: Double
var darkCircleDarknessTo: Double
var frontCircle: FrontCircle
#EnvironmentObject var theme: ThemeSelectionService
#Binding var animate: Bool
var body: some View {
if frontCircle == .dark {
ZStack {
Circle()
.scale(animate ? lightCircleScaleTo : lightCircleScaleFrom)
.foregroundColor(theme.lightColor)
.offset(x: animate ? lightCirclePositionTo : lightCirclePositionFrom)
.brightness(animate ? lightCircleDarknessTo : lightCircleDarknessFrom)
Circle()
.scale(animate ? darkCircleScaleTo : darkCircleScaleFrom)
.foregroundColor(theme.darkColor)
.offset(x: animate ? darkCirclePositionTo : darkCirclePositionFrom)
.brightness(animate ? darkCircleDarknessTo : darkCircleDarknessFrom)
}
} else {
ZStack {
Circle()
.scale(animate ? darkCircleScaleTo : darkCircleScaleFrom)
.foregroundColor(theme.darkColor)
.offset(x: animate ? darkCirclePositionTo : darkCirclePositionFrom)
.brightness(animate ? darkCircleDarknessTo : darkCircleDarknessFrom)
Circle()
.scale(animate ? lightCircleScaleTo : lightCircleScaleFrom)
.foregroundColor(theme.lightColor)
.offset(x: animate ? lightCirclePositionTo : lightCirclePositionFrom)
.brightness(animate ? lightCircleDarknessTo : lightCircleDarknessFrom)
}
}
}
}

Answer 1

Here's an alternative way to do the animation. I try to avoid DispatchQueues in the middle of animations because they can be glitchy at times. I used a Timer to update a counter with circlePositions 0,1,2,3 and updated modifiers based on the circle's position. I incorporated an offset for the 2nd circle so that it's always 2 positions ahead of the first one.
struct MyView: View {
let timer = Timer.publish(every: 1, on: .main, in: .common).autoconnect()
#State var counter: Int = 0
var body: some View {
ZStack {
Circle()
.scaleEffect(getScale(n: 0))
.offset(x: getOffset(n: 0))
.brightness(getBrightness(n: 0))
.zIndex(getZIndex(n: 0))
Circle()
.scaleEffect(getScale(n: 2))
.offset(x: getOffset(n: 2))
.brightness(getBrightness(n: 2))
.zIndex(getZIndex(n: 2))
}
.foregroundColor(.blue)
.onReceive(timer, perform: { _ in
withAnimation(Animation.easeInOut(duration: 1.0)) {
counter = getPosition(n: 1)
}
})
// TO BE DELETED
.overlay(
Text("\(counter) : \(getPosition(n: 2))")
.foregroundColor(.red)
.animation(nil)
, alignment: .top
)
}
func getPosition(n circleOffset: Int) -> Int {
return (counter + circleOffset) % 4
}
func getScale(n circleOffset: Int) -> CGFloat {
switch getPosition(n: circleOffset) {
case 1: return 0.075
case 3: return 0.125
default: return 0.1
}
}
func getOffset(n circleOffset: Int) -> CGFloat {
switch getPosition(n: circleOffset) {
case 0: return -25
case 2: return 25
default: return 0
}
}
func getBrightness(n circleOffset: Int) -> Double {
switch getPosition(n: circleOffset) {
case 1: return -0.5
case 3: return 0
default: return -0.25
}
}
func getZIndex(n circleOffset: Int) -> Double {
switch getPosition(n: circleOffset) {
case 0, 3: return 2
default: return 1
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
MyView()
}
}