Why is rotationEffect moving vertically too?

I have my animation for the rotation working beautifully, but the image is also moving vertically. Why?

struct SyncView: View {
	@State var isSyncing = false

	let animation: Animation = Animation.linear(duration: 2.0).repeatForever(autoreverses: false)

	 var body: some View {
		 VStack(spacing: 16) {
			 HStack {
				 VStack(alignment: .leading) {
					 Text("Linked Device's Name")
					 Text("Updating (Last update: Oct 1, 2022)")
						 .font(.callout)
						 .foregroundColor(.gray)
				 }
				 Spacer()
				 Text(Image(systemName: "arrow.triangle.2.circlepath"))
					 .foregroundStyle(Color.yellow)
					 .font(.title)
					 .rotationEffect(Angle.degrees(isSyncing ? 360 : 0))
					 .animation(animation, value: isSyncing)
			 }
		 }
		 .padding()
		 .onAppear {
			isSyncing = true
		 }
	 }
}

Replies

I tested your exact code and it works perfectly.

  • @Claude31 Are you testing on a live device or just the preview window in Xcode? It shows fine in the preview window, but on the simulator (iOS 16.1) and real device (iOS 16.2 beta) it acts as I illustrated above.

  • Interestingly, this works properly on the iPad simulator

Add a Comment