Nothing Happens When Rotating An Image With Animation

Question

Created Oct ’22

Replies 1

Boosts 0

Views 1.4k

Participants 2

Hi. What could be the issue with this piece of code? I only want the image to rotate 360 degrees non stop

var body: some View {
  HStack {
      Image(systemName: "arrow.clockwise")
        .rotationEffect(Angle.degrees(360), anchor: .center)
        .animation(
          .linear(duration: 1.5)
          .repeatForever(autoreverses: false),
          value: UUID()
        )
      Text("Downloading ...")
    }
}

Even without the value attribute in the .animation, no animation happens. Am i missing something else?

Answered by BabyJ in 733057022

You have to tell SwiftUI when and what to animate. Currently, you have a static symbol image that has been rotated 360°, but hasn't been told to animate. Applying the animation(_:value:) modifier doesn't start the animation; it just tells SwiftUI what animation to do when the value changes.

Something like this should work:

@State private var rotationAngle: Double = 0

var body: some View {
    HStack {
        Image(systemName: "arrow.clockwise")
            .rotationEffect(.degrees(rotationAngle))
            .animation(.linear(duration: 1.5).repeatForever(autoreverses: false), value: rotationAngle)

        Text("Downloading ...")
    }
    .onAppear {
        rotationAngle = 360
    }
}

Answer 1 · Oct 18, 2022 12:03 AM

BabyJ OP

Oct ’22

Accepted Answer

You have to tell SwiftUI when and what to animate. Currently, you have a static symbol image that has been rotated 360°, but hasn't been told to animate. Applying the animation(_:value:) modifier doesn't start the animation; it just tells SwiftUI what animation to do when the value changes.

Something like this should work:

@State private var rotationAngle: Double = 0

var body: some View {
    HStack {
        Image(systemName: "arrow.clockwise")
            .rotationEffect(.degrees(rotationAngle))
            .animation(.linear(duration: 1.5).repeatForever(autoreverses: false), value: rotationAngle)

        Text("Downloading ...")
    }
    .onAppear {
        rotationAngle = 360
    }
}