Create blog with2023-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- Create a boolean variable
isAnimated- Now we can use ternary operators to change the value of elements.
- use @State to update the view.
- 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- We use
withAnimation()to provide animation feature in view.- inside the button function, we wrap the toggle with
withAnimation()withAnimation(Animation.default){isAnimated.toggle()}
- inside the button function, we wrap the toggle with
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- We can also change the offset value and give rotationEffect to rounded rectangle for dynamic animations.
.offset(y: isAnimated ? 150 : 0)
.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- 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()}
}⚠️
.animation() ← isn’t allowed in visionOS.
use withAnimation(Animation.default) instead
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.
