Example 1: withAnimation indicates animate effect while .transition indicates animate content. Default transition is .transition(.opacity).
struct AvatorView: View {
@State var show: Bool = false
var body: some View {
if show {
Text("good")
// .transition(.opacity) // default, same with and without.
}
Spacer()
Button("Animate") {
withAnimation(.easeInOut(duration: 1.0)) {
self.show.toggle() // has effect on show
}
}.padding(20)
}
}
Example 2: change .transition to have different animate conent (.scale)
struct AvatorView: View {
@State var show: Bool = false
var body: some View {
if show {
Text("good")
.transition(.scale)
}
Spacer()
Button("Animate") {
withAnimation(.easeInOut(duration: 1)) {
self.show.toggle()
}
}.padding(20)
}
}
Example 2: same effect as example 1 that associating animate effect with .transition. More explicitly.
struct AvatorView: View {
@State var show: Bool = false
var body: some View {
if show {
Text("good")
.transition(AnyTransition.opacity.animation(.easeInOut(duration: 1.0)))
}
Spacer()
Button("Animate") {
self.show.toggle()
}.padding(20)
}
}
Example 3: asymmetric
struct AvatorView: View {
@State var show: Bool = false
var body: some View {
if show {
Text("good")
.transition(.asymmetric(insertion: .opacity, removal: .scale))
}
Spacer()
Button("Animate") {
withAnimation(.easeInOut(duration: 1)) {
self.show.toggle()
}
}.padding(20)
}
}
Example 4: combined
struct AvatorView: View {
@State var show: Bool = false
var body: some View {
if show {
Text("good")
.transition(AnyTransition.opacity.combined(with: .slide))
}
Spacer()
Button("Animate") {
withAnimation(.easeInOut(duration: 1)) {
self.show.toggle()
}
}.padding(20)
}
}