SwiftUI: Animation

Mar 29 2022 · Swift 5.5, iOS 15, Xcode 13

Part 1: Beginning with SwiftUI Animation

06. Spinner

Episode complete

Play next episode

Next
About this episode

Leave a rating/review

See forum comments
Cinema mode Mark complete Download course materials
Previous episode: 05. Challenge: Rotation Next episode: 07. Multiple Stages

Get immediate access to this and 4,000+ other videos and books.

Take your career further with a Kodeco Personal Plan. With unlimited access to over 40+ books and 4,000+ professional videos in a single subscription, it's simply the best investment you can make in your development career.

Learn more Already a subscriber? Sign in.

Heads up... You've reached locked video content where the transcript will be shown as obfuscated text.

Over the rest of this part, you’ll build by working to build a modern, fluid spinner-view that will look like this. The beginnings of that spinner, however, are rather humble.

      ZStack {
        ForEach(/*@START_MENU_TOKEN@*/0 ..< 5/*@END_MENU_TOKEN@*/) { index in
          Leaf()
        }
      }
ForEach(0..<leavesCount)
  struct Leaf: View {
    let rotation: Angle

    var body: some View {
        ForEach(0..<leavesCount) { item in
          Leaf(
            rotation: .init(degrees: <#T##Double#>)
          )
        }
            rotation: .init(degrees: .init(index) / .init(leavesCount))
 .init(leavesCount) * 360)
        .frame(width: 20, height: 50)
        .rotationEffect(rotation)
    }
        .offset(x: 0, y: 70)
        .rotationEffect(rotation)
    }
  let leavesCount = 12
  @State var currentIndex = -1
  
  var body: some View {
  
  func animate() {
    Timer.scheduledTimer(withTimeInterval: 0.15, repeats: <#T##Bool#>, block: <#T##(Timer) -> Void#>)
  }
    Timer.scheduledTimer(withTimeInterval: 0.15, repeats: true) { timer in

    }
    Timer.scheduledTimer(withTimeInterval: 0.15, repeats: true) { timer in
      currentIndex = (currentIndex + 1) % leavesCount
    }
    let rotation: Angle
    let isCurrent: Bool

    var body: some View {

            rotation: .init(degrees: .init(index) / .init(leavesCount) * 360),
            isCurrent: index == currentIndex
          )
.stroke(isCurrent ? Color.white : .gray, lineWidth: 8)
        .rotationEffect(rotation)
        .animation(.easeIn(duration: <#T##Double#>)), value: isCurrent)
    }
.animation(.easeInOut(duration: 🟩 0.5), value: isCurrent)
.animation(.easeIn(duration: 🟩 1.5), value: isCurrent)
        .frame(width: 20, height: 50)
        .offset(
          isCurrent
            ? .init(width: 10, height: 0)
            : .init(width: 40, height: 70)
        )
        .rotationEffect(rotation)
            : .init(width: 40, height: 70)
        )
        .scaleEffect(isCurrent ? 0.5 : 1)
        .rotationEffect(rotation)