Adding Animation

2023-12-29

❓

withAnimation()

We can add an animation in SwiftUI, using withAnimation()

Let’s create a button and a rounded rectangle with following elements.

import SwiftUI

struct ContentView: View {

	var body: some View {
		VStack{
			Button("Button"){

			}//Button
			
			RoundedRectangle(cornerRadius: 50)
				.fill(Color.orange)
				.frame(width: 150, height: 100)
				.frame(depth: 0)
		}//VStack



	}//body
}//struct

swift

Create a boolean variable isAnimated
1. Now we can use ternary operators to change the value of elements.
1. use @State to update the view.
1. use .toggle() to change the boolean.

import SwiftUI

struct ContentView: View {

	@State var isAnimated: Bool = false

	var body: some View {
		VStack{
			Button("Button"){
				isAnimated.toggle()
			}//Button
			
			RoundedRectangle(cornerRadius: isAnimated ? 25.0 : 50)
				.fill(isAnimated ? Color.green : Color.orange)
				.frame(width: isAnimated ? 100 : 150, height: 100)
				.frame(depth: isAnimataed ? 200 : 0)
		}//VStack



	}//body
}//struct

swift

We use withAnimation() to provide animation feature in view.
1. inside the button function, we wrap the toggle with withAnimation()
  1. withAnimation(Animation.default){isAnimated.toggle()}

import SwiftUI

struct ContentView: View {

	@State var isAnimated: Bool = false

	var body: some View {
		VStack{
			Button("Button"){
				withAnimation(Animation.default){isAnimated.toggle()}
			}//Button
			
			RoundedRectangle(cornerRadius: isAnimated ? 25.0 : 50)
				.fill(isAnimated ? Color.green : Color.orange)
				.frame(width: isAnimated ? 100 : 150, height: 100)
				.frame(depth: isAnimataed ? 200 : 0)
		}//VStack



	}//body
}//struct

swift

We can also change the offset value and give rotationEffect to rounded rectangle for dynamic animations.
1. .offset(y: isAnimated ? 150 : 0)
1. .rotationEffect(Angle(degrees: isAnimated ? 180 : 0))

import SwiftUI

struct ContentView: View {

	@State var isAnimated: Bool = false

	var body: some View {
		VStack{
			Button("Button"){
				withAnimation(Animation.default){isAnimated.toggle()}
			}//Button
			
			RoundedRectangle(cornerRadius: isAnimated ? 25.0 : 50)
				.fill(isAnimated ? Color.green : Color.orange)
				.frame(width: isAnimated ? 100 : 150, height: 100)
				.offset(y: isAnimated ? 150 : 0)
				.rotationEffect(Angle(degrees: isAnimated ? 180 : 0))
				.frame(depth: isAnimataed ? 200 : 0)
		}//VStack



	}//body
}//struct

swift

We can provide a delayed animation or repeating animation by adding .delay(double) or .repeatCount()

Button("Button"){
withAnimation(Animation.default
.delay(2.0)){isAnimated.toggle()}
}

Button("Button"){
withAnimation(Animation.default
.repeatCount(5, autoreverses: true)){isAnimated.toggle()}
}

swift

⚠️

.animation() ← isn’t allowed in visionOS.
use withAnimation(Animation.default) instead

In SwiftUI, animations can be added using withAnimation(). A button and a rounded rectangle can be created, with a boolean variable isAnimated used to change the value of elements. The withAnimation() function provides animation features in the view, and can be used to change the offset value and give rotation effects for dynamic animations. Delayed or repeating animations can be added using .delay(double) or .repeatCount(). Note that .animation() is not allowed in visionOS, use withAnimation(Animation.default) instead.

Adding Animation

Subscribe to our newsletter

You might also like:

N - Voice Record

MagnificationGesture

.onLongPressGesture

SwiftUI_visionOS_Note

Adding Animation

Subscribe to our newsletter

You might also like:

N - Voice Record

MagnificationGesture

.onLongPressGesture