「SwitUI」動画を含むLaunch Screenの実装

📌 Launch Screen:Podaena

Launch Screenは、ユーザーがアプリケーションを起動するときに最初に遭遇する画面です.
スタート画面が視覚的に魅力的であれば、ユーザーにより大きな満足感を与えることができますが、スタート画面がなければ白い画面にロードするだけでは、最初からアプリケーションへの信頼度が失われる可能性があります.
だから、最初の画面は些細なように見えますが、決して些細ではありません.
さて今日は、より素晴らしいスタート画面のために、SWIFTUIにアニメーション制作のグラデーションのあるスタート画面を加えていきましょう.

💻 ウェルカムスクリーンの実装

Gradient

まず、画面の背景色を設定するには、最終位置:グラデーションバックグラウンドの実装に記述されたコードが使用されます.

LinearGradient(gradient: Gradient(colors: [Color("PrimaryColor"), Color("SubPrimaryColor")]),
                            startPoint: .top, endPoint: .bottom)
            .edgesIgnoringSafeArea(.all)

View for Launch Screen

次に、Launch Screenとして使用するビューを作成します.

extension ContentView {
    
    var launchScreenView: some View {
        
        ZStack(alignment: .center) {
            
            LinearGradient(gradient: Gradient(colors: [Color("PrimaryColor"), Color("SubPrimaryColor")]),
                            startPoint: .top, endPoint: .bottom)
            .edgesIgnoringSafeArea(.all)
            
            Image("LaunchScreenImage")
            
        }
        
    }
    
}

アプリケーションの開始点ContentViewの下に新しい拡張子を作成し、Assetに予め配置された画像を背景色に上書きしてViewを構成します.
次に、ContentViewでBoolタイプ変数とif文を使用してウェルカム画面を開きます.

struct ContentView: View {
    
    @State var isLoading: Bool = true
    
    var body: some View {
        
        ZStack {
            
            // 앱 화면
            Text("Launch Screen Demo").font(.largeTitle)
            
            // Launch Screen
            if isLoading {
                launchScreenView
            }
            
        }
        .onAppear {
            DispatchQueue.main.asyncAfter(deadline: .now() + 2, execute: {
                isLoading.toggle()
            })
        }
        
    }
}

アプリケーションは次の順序でレンダリングされます.

アプリケーションが実行されている場合、isLoading変数の初期値はtrueです.

ZStackで画面にテキストを表示(…)、上はifゲートを通るLaunchScreenで覆われています.

ZStackをレンダリングします.onAppear {...} を選択してもアクセスできます.

今から2秒後、isLoading変数の値が変更されます.(偽)

変数値が変化し、if文がfalseに変わり、アプリケーション画面に上書きされていたLaunch Screenが消えます.

構築結果は次のとおりです.

Animation

ここで顔を白くするために簡単な動画を流しましょう
ContentViewのコードを次のように変更します.

struct ContentView: View {
    
    @State var isLoading: Bool = true
    
    var body: some View {
        
        ZStack {
            
            // 1) CHANGED: zIndex added
            // 앱 화면
            Text("Launch Screen Demo\n: with Animation").font(.largeTitle).zIndex(0)
            
            // Launch Screen
            if isLoading {
            	// 2) CHANGED: transition and zIndex added
                launchScreenView.transition(.opacity).zIndex(1)
            }
            
        }
        .onAppear {
            DispatchQueue.main.asyncAfter(deadline: .now() + 2, execute: {
            	3) CHANGED: withAnimation added
                withAnimation { isLoading.toggle() }
            })
        }
        
    }
}

1)zIndex()は、ZStackがサブビューを自動的に認識できないため、アニメーションを適用しないことを防止するためである.
2)LaunchScreenViewが消えた場所にあります.遷移(.不透明)を追加します.
3)isLoading変数値を切り替える点をwithAnimation{}にバインドする.
前述したように、次のように消えていくアニメーションの開始画面が表示されます.

📌 の最後の部分

Animationを適用する方法と種類は上記の方法のほかにも多くあるが,今回の位置決めでは多くの方法が徐々に消えていく.transition(.不透明)を用いて実装を試みた.
個人的には、Frontend開発者の実力は、適切でユーザーフレンドリーなアニメーションの実現にかかっていると考えています.
勉强は终わりがない.もっと頑張ろう!

printf("Thank You!\n");
printf("Posted by Thirsty Developer\n");