今回はビューが表示された時に処理をおこなうonAppearメソッドを利用して、フェードインのアニメーションを実装する方法を紹介する。
サンプルコード
今回は表示/非表示を切り替えるトグルスイッチを配置し、トグルがONになったらImageビューをフェードインさせるサンプルアプリを作ってみた。
struct ContentView: View {
@State var opacity = 0.0
@State var flg = false
var body: some View {
VStack {
Toggle(isOn: $flg, label: {
Text("表示/非表示")
})
.padding()
if(flg) {
Image("pasta")
.opacity(opacity)
// アニメーションの適用
.animation(.linear(duration: 3))
// ビューが表示された時の処理
.onAppear {
self.opacity = 1.0
}
// ビューが非表示になった時の処理
.onDisappear {
self.opacity = 0.0
}
}
}
}
}
フェードインはopacity(透過度)をアニメーション付きで変化させることで表現する。
opacityは状態変数として定義し、また画像の表示状態を表すflgも状態変数として定義しておく。(2行目、3行目)
Toggleビューにflg状態変数をバインドさせ、トグルがONになった時にflgがtrueとなる。(7行目)
trueになった時、12行目以降のif文内のコードが実行され、Imageビューの表示に合わせてonAppearメソッドが発火する。
25行目のonDisappearメソッドは、ビューが非表示になった時に実行され、ここでopacityの値を初期化させている。
この処理を省くと、2度目以降の表示処理の時にopacityが初期化されていないため、フェードインの効果がなくなってしまう。