今回はビューが表示された時に処理をおこなうonAppearメソッドを利用して、フェードインのアニメーションを実装する方法を紹介する。

サンプルコード

今回は表示/非表示を切り替えるトグルスイッチを配置し、トグルがONになったらImageビューをフェードインさせるサンプルアプリを作ってみた。

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
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が初期化されていないため、フェードインの効果がなくなってしまう。