I want to run three different animations, A , B ,C, A, B, C alternating like that, over different time periods, like 30s(A), 10s(B), 10s(C), 40s(A), 10s(B), 10s (C), 50s(A), 10s(B), 10s(C) etc

for example, something like:

var body: some View {

   @State var isAnimating:Bool = false
   VStack {
      ZStack {

         //A: shows on first cycle only (hides on the others) at 0-30s, 50s-90s, 120s-170s
         Circle()
            .opacity(isAnimating? 1.0 : 0)

         //B: shows on second cycle only (hides on the others) at 30-40s, 90s-100s, 170s-180s
         Triangle()
            .offset(x: isAnimating ? 100 : 0, 
                    y: isAnimating ? 100 : 0)

         //C: shows on third cycle only (hides on the others) at 40-50s, 110s-120s, 180s-190s
         Triangle()
            .frame(width: isAnimating ? 100 : 0, height:isAnimating ? 100 : 0)
      }
   
     Button {
         isAnimating.toggle()
     } label: {
       Text("Toggle animation sequence")
     }
   }

}

The three animations swap in and out depending which part of the “cycle” we are in. and the entire thing runs duration=190s

User can also cancel animations mid cycle, so they need to be cancellable. I have something more basic right now in a viewModel with a DispatchWorkItem but need to adapt this to work with multiple animations over multiple durations.