【SwiftUI模块】0022、SwiftUI搭建一个带有SVG剪辑和反向遮罩的时尚Twitter启动画面

SwiftUI模块系列 - 已更新22篇
SwiftUI项目 - 已更新2个项目
往期Demo源码下载

技术:SwiftUI、SwiftUI3.0、SVG、Twitter、启动页面
运行环境:
SwiftUI3.0 + Xcode13.4.1 + MacOS12.5 + iPhone Simulator iPhone 13 Pro Max

概述

使用SwiftUI搭建一个带有SVG剪辑和反向遮罩的时尚Twitter启动画面

详细

一、运行效果

二、项目结构图

设置启动的logo和背景颜色

三、程序实现 - 过程

思路:
1.设置主页
2.添加一个背景
3.通过一个图片和背景进行混合

1.创建一个项目命名为 TwitterShapeAnimation

1.1.引入资源文件和颜色

颜色
BG #4FA6DF
Twitter的截图1张
logo2张

Code

ContentView - 主窗口

主要是展示主窗口Home

//
//  ContentView.swift
//  Shared
//
//  Created by 李宇鸿 on 2022/9/3.
//

import SwiftUI

struct ContentView: View {
    
    
    var body: some View {
    
    
        SplashScreen()
    }
}

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


struct SplashScreen : View{
    
    
    
    @State var splashAnimation: Bool = false

    @Environment(\.colorScheme) var scheme

    
    var body: some View{
    
    
        ZStack {
    
    

            //我们将简单地使用图像演示的目的....
            Image(scheme == .dark ? "homeDark" :  "home")
                .resizable()
                .aspectRatio(contentMode: .fill)
            
            // 躲在home直到飞溅动画开始…
                .opacity(splashAnimation ? 1 : 0)
            
            Color("BG")
            //屏蔽Twitter SVG图像…
            //从xcode 12，我们可以直接使用svg从资产目录....
                .mask(
                    // 反向掩蔽与弯曲....的帮助
                    
                    Rectangle()
                        .overlay(
                            Image("logo-svg")
                                .resizable()
                                .aspectRatio(contentMode: .fit)
                                .frame(width: 80, height: 80)
                                .scaleEffect(splashAnimation  ? 35: 1)
                                .blendMode(.destinationOut)
                        )

                )
            // 通过手势测试启动效果
//                .onTapGesture{
    
    
//                    withAnimation(.easeOut(duration: 0.4), {
    
    
//                        splashAnimation.toggle()
//                    })
//                }

        }
        .preferredColorScheme(splashAnimation ? nil: .light)
        .ignoresSafeArea()
        .onAppear{
    
    
            DispatchQueue.main.asyncAfter(deadline: .now()+0.4) {
    
    
                withAnimation(.easeOut(duration: 0.4), {
    
    
                   splashAnimation.toggle()
               })
            }
        }

    }
}