Swift Customize Animations
Main Idea
Options and Order of modifiers
// Options 1 (repeat growing effect)
struct ContentView: View {
@State private var animationAmount = 1.0
var body: some View {
Button("Tap Me") {
animationAmount += 1
}
.padding(50)
.background(.red)
.foregroundColor(.white)
.clipShape(Circle())
.scaleEffect(animationAmount)
.animation(
.easeInOut(duration: 1)
.repeatForever(),
value: animationAmount
)
}
}
// Options 2 (Pulsating circle thing)
struct ContentView: View {
@State private var animationAmount = 1.0
var body: some View {
Button("Tap Me") {
// animationAmount += 1
}
.padding(50)
.background(.red)
.foregroundColor(.white)
.clipShape(Circle())
.overlay(
Circle()
.stroke(.red)
.scaleEffect(animationAmount)
.opacity(2 - animationAmount)
.animation(
.easeOut(duration: 1)
.repeatForever(autoreverses: false),
value: animationAmount
)
)
.onAppear {
animationAmount = 2
}
}
}
// Order of modifiers 1 (Control the animation stack)
struct ContentView: View {
@State private var enabled = false
var body: some View {
Button("Tap Me") {
enabled.toggle()
}
.frame(width: 200, height: 200)
.background(enabled ? .blue : .red)
.animation(nil, value: enabled)
.foregroundColor(.white)
.clipShape(RoundedRectangle(cornerRadius: enabled ? 60 : 0))
.animation(.interpolatingSpring(stiffness: 10, damping: 1), value: enabled)
}
}