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

宇夜iOS

已于 2022-09-04 21:25:47 修改

阅读量593

点赞数

分类专栏： # SwiftUI模块文章标签： swiftui twitter iOS 启动页面 SVG

于 2022-09-02 23:54:03 首次发布

本文链接：https://blog.csdn.net/qq_42816425/article/details/126672113

版权

SwiftUI模块专栏收录该内容

49 篇文章 25 订阅

订阅专栏

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启动画面

概述

使用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()
               })
            }
        }

    }
}