質問
animationモディファイアとwithAnimationの違いはなんですか?
理解しようと思って、下記のサンプルを書いてみたのですが、同様の動きをする場合としない場合があることはわかったのですが、どのようなときに違いが生まれるのか等、イマイチわかりませんでした。
書いてみたサンプル
animationモディファイアとwithAnimation、どちらで書いてもアニメーションする例
animationモディファイア版
import SwiftUI
struct ContentView: View {
@State private var scale: CGFloat = 1.0
var body: some View {
VStack {
Rectangle().frame(
width: 100,
height: 100
)
.scaleEffect(
scale
)
.animation(
.default
)
Button(
"scale +",
action: {
scale += 0.5
}
)
}
}
}
withAnimation版
import SwiftUI
struct ContentView: View {
@State private var scale: CGFloat = 1.0
var body: some View {
VStack {
Rectangle().frame(
width: 100,
height: 100
)
.scaleEffect(
scale
)
Button(
"scale +",
action: {
withAnimation {
scale += 0.5
}
}
)
}
}
}
withAnimationの場合のみアニメーションする例
animationモディファイア版
import SwiftUI
struct ContentView: View {
@State var flag = false
var body: some View {
ZStack {
if flag {
FirstView(
flag: $flag
)
} else {
SecondView(
flag: $flag
)
}
}
}
}
struct FirstView: View {
@Binding var flag: Bool
var body: some View {
ZStack {
Color.green.ignoresSafeArea()
Button(
"Button",
action: {
flag.toggle()
}
)
}
.transition(.opacity)
.animation(.default)
}
}
struct SecondView: View {
@Binding var flag: Bool
var body: some View {
ZStack {
Color.yellow.ignoresSafeArea()
Button(
"Button",
action: {
flag.toggle()
}
)
}
.transition(.opacity)
.animation(.default)
}
}
withAnimation版
import SwiftUI
struct ContentView: View {
@State var flag = false
var body: some View {
ZStack {
if flag {
FirstView(
flag: $flag
)
} else {
SecondView(
flag: $flag
)
}
}
}
}
struct FirstView: View {
@Binding var flag: Bool
var body: some View {
ZStack {
Color.green.ignoresSafeArea()
Button(
"Button",
action: {
withAnimation {
flag.toggle()
}
}
)
}
.transition(.opacity)
}
}
struct SecondView: View {
@Binding var flag: Bool
var body: some View {
ZStack {
Color.yellow.ignoresSafeArea()
Button(
"Button",
action: {
withAnimation {
flag.toggle()
}
}
)
}
.transition(.opacity)
}
}