POSTED BY
2023-09-18

Xcodeで新規Swift UIプロジェクトを作成すると以下のようなサンプルが作成されると思う。

//
//  ContentView.swift
//  MyUITest
//
//  Created by ServerNote.NET on 2023/09/17.
//

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundColor(.accentColor)
            Text("Hello, world!")
        }
        .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

これを以下のように変えることで、フェードイン・アウトを繰り返し、点滅するHello World VStackになる。

//
//  ContentViewFadeInOut.swift
//  MyUITest
//
//  Created by ServerNote.NET on 2023/09/18.
//

import SwiftUI

struct ContentViewFadeInOut: View {
    @State private var fadeInOut = true
    
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundColor(.accentColor)
            Text("Hello, world!")
        }
        .onAppear() {
            withAnimation(Animation.linear(duration:0.5)
                .repeatForever(autoreverses: true)) {
                    fadeInOut.toggle()
                }
        }.opacity(fadeInOut ? 0:1)
        .padding()
    }
}

struct ContentViewFadeInOut_Previews: PreviewProvider {
    static var previews: some View {
        ContentViewFadeInOut()
    }
}

フェードインで１回だけ登場させたい場合は以下。easeInOutをeaseInにして、durationが速いとわかりにくいので、5にしてスロー登場させている。リピートを切って、最初のfadeInOutフラグをtrueな状態にするのがポイント。

//
//  ContentViewFadeIn.swift
//  MyUITest
//
//  Created by ServerNote.NET on 2023/09/18.
//

import SwiftUI

struct ContentViewFadeIn: View {
    @State private var fadeInOut = true
    
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundColor(.accentColor)
            Text("Hello, world!")
        }
        .onAppear() {
            withAnimation(Animation.easeIn(duration:5)) {
            //    .repeatForever(autoreverses: true)) {
                    fadeInOut.toggle()
                }
        }.opacity(fadeInOut ? 0:1)
        .padding()
    }
}

struct ContentViewFadeIn_Previews: PreviewProvider {
    static var previews: some View {
        ContentViewFadeIn()
    }
}

逆に、フェードアウトだけさせたい場合は以下のようにすればよい。easeInOutをeaseOutにしている。

//
//  ContentViewFadeOut.swift
//  MyUITest
//
//  Created by ServerNote.NET on 2023/09/18.
//

import SwiftUI

struct ContentViewFadeOut: View {
    @State private var fadeInOut = false
    
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundColor(.accentColor)
            Text("Hello, world!")
        }
        .onAppear() {
            withAnimation(Animation.easeOut(duration:2)) {
            //    .repeatForever(autoreverses: true)) {
                    fadeInOut.toggle()
                }
        }.opacity(fadeInOut ? 0:1)
        .padding()
    }
}

struct ContentViewFadeOut_Previews: PreviewProvider {
    static var previews: some View {
        ContentViewFadeOut()
    }
}