今回はビューが表示された時に処理をおこなう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が初期化されていないため、フェードインの効果がなくなってしまう。