|
import SwiftUI |
|
|
|
struct AnimatedStateButton: View { |
|
|
|
@State private var show1 = false |
|
@State private var show2 = false |
|
@State private var show3 = false |
|
@State private var show4 = false |
|
@State private var show5 = false |
|
@State private var show6 = false |
|
@State private var show7 = false |
|
@State private var show8 = false |
|
@State private var show9 = false |
|
@State private var show10 = false |
|
@State private var show11 = false |
|
|
|
var body: some View { |
|
VStack(spacing: 16) { |
|
|
|
// no effect no animation |
|
Button { |
|
show1.toggle() |
|
} label: { |
|
Label("Graph", systemImage: "chevron.right.circle") |
|
.labelStyle(.iconOnly) |
|
.imageScale(.large) |
|
} |
|
|
|
// OK |
|
Button { |
|
show2.toggle() |
|
} label: { |
|
Label("Graph", systemImage: "chevron.right.circle") |
|
.labelStyle(.iconOnly) |
|
.imageScale(.large) |
|
.rotationEffect(.degrees(show2 ? 90 : 0)) |
|
.scaleEffect(show2 ? 1.5 : 1) |
|
} |
|
|
|
// OK custom animation |
|
Button { |
|
show3.toggle() |
|
} label: { |
|
Label("Graph", systemImage: "chevron.right.circle") |
|
.labelStyle(.iconOnly) |
|
.imageScale(.large) |
|
.rotationEffect(.degrees(show3 ? 90 : 0)) |
|
.scaleEffect(show3 ? 1.5 : 1) |
|
.animation(.spring(), value: show3) |
|
} |
|
|
|
// no rotation animation |
|
Button { |
|
show4.toggle() |
|
} label: { |
|
Label("Graph", systemImage: "chevron.right.circle") |
|
.labelStyle(.iconOnly) |
|
.imageScale(.large) |
|
.rotationEffect(.degrees(show4 ? 90 : 0)) |
|
.animation(nil, value: show4) |
|
.scaleEffect(show4 ? 1.5 : 1) |
|
.animation(.spring(), value: show4) |
|
} |
|
|
|
// OK |
|
Button { |
|
withAnimation { |
|
show5.toggle() |
|
} |
|
} label: { |
|
Label("Graph", systemImage: "chevron.right.circle") |
|
.labelStyle(.iconOnly) |
|
.imageScale(.large) |
|
.rotationEffect(.degrees(show5 ? 90 : 0)) |
|
.scaleEffect(show5 ? 1.5 : 1) |
|
} |
|
|
|
// no rotate animation |
|
Button { |
|
withAnimation { |
|
show6.toggle() |
|
} |
|
} label: { |
|
Label("Graph", systemImage: "chevron.right.circle") |
|
.labelStyle(.iconOnly) |
|
.imageScale(.large) |
|
.rotationEffect(.degrees(show6 ? 90 : 0)) |
|
.animation(nil, value: show6) |
|
.scaleEffect(show6 ? 1.5 : 1) |
|
} |
|
|
|
// too slow |
|
Button { |
|
withAnimation(.easeInOut(duration: 4)) { |
|
show7.toggle() |
|
} |
|
} label: { |
|
Label("Graph", systemImage: "chevron.right.circle") |
|
.labelStyle(.iconOnly) |
|
.imageScale(.large) |
|
.rotationEffect(.degrees(show7 ? 90 : 0)) |
|
.scaleEffect(show7 ? 1.5 : 1) |
|
} |
|
|
|
// OK |
|
Button { |
|
show8.toggle() |
|
} label: { |
|
Image(systemName: "chevron.right.circle") |
|
.labelStyle(.iconOnly) |
|
.imageScale(.large) |
|
.rotationEffect(.degrees(show8 ? 90 : 0)) |
|
.scaleEffect(show8 ? 1.5 : 1) |
|
} |
|
|
|
// OK state effect other view |
|
Button { |
|
withAnimation { |
|
show9.toggle() |
|
} |
|
} label: { |
|
Image(systemName: "chevron.right.circle") |
|
.labelStyle(.iconOnly) |
|
.imageScale(.large) |
|
.rotationEffect(.degrees(show9 ? 90 : 0)) |
|
.scaleEffect(show9 ? 1.5 : 1) |
|
} |
|
|
|
// no scale animation |
|
Button { |
|
withAnimation { |
|
show10.toggle() |
|
} |
|
} label: { |
|
Image(systemName: "chevron.right.circle") |
|
.labelStyle(.iconOnly) |
|
.imageScale(.large) |
|
.scaleEffect(show10 ? 1.5 : 1) |
|
.animation(nil, value: show10) |
|
.rotationEffect(.degrees(show10 ? 90 : 0)) |
|
} |
|
|
|
// no animation |
|
Button { |
|
withAnimation(.none) { |
|
show11.toggle() |
|
} |
|
} label: { |
|
Image(systemName: "chevron.right.circle") |
|
.labelStyle(.iconOnly) |
|
.imageScale(.large) |
|
.scaleEffect(show11 ? 1.5 : 1) |
|
.rotationEffect(.degrees(show11 ? 90 : 0)) |
|
} |
|
|
|
} |
|
} |
|
} |
|
|
|
#Preview { |
|
AnimatedStateButton() |
|
} |
