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’re accessing parts of this content for free, with some sections shown as obfuscated text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

Heads up... You’re accessing parts of this content for free, with some sections shown as obfuscated text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

00:02Over 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)