SwiftUI: Animation

Mar 29 2022 Swift 5.5, iOS 15, Xcode 13

Part 1: Beginning with SwiftUI Animation

6. Spinner

Episode complete

Play next episode

Next
About this episode
See versions

Leave a rating/review

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

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

Take your career further with a Kodeco Pro subscription. 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.

This video Spinner was last updated on Mar 29 2022

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)