LaunchView/启动页 的实现

1. 创建启动画板,LaunchScreen.storyboard 添加组件如图:

2. 项目中设置只支持竖屏,添加启动画板,如图:

3. 创建启动画面动画视图,LaunchView.swift

Swift 复制代码
import SwiftUI

/// 启动视图
struct LaunchView: View {
    /// 字符串转换为字符串数组,字符串中包含单个字母组成
    @State private var loadingText: [String] = "Loading your portfolio...".map { String($0) }
    /// 是否显示文字
    @State private var showLoadingText: Bool = false
    /// 计时器
    private let timer = Timer.publish(every: 0.1, on: .main, in: .common).autoconnect()
    /// 计数
    @State private var counter: Int = 0
    /// 循环次数
    @State private var loops: Int = 0
    /// 是否显示启动 View
    @Binding var showLaunchView: Bool
    
    var body: some View {
        ZStack {
            // 背景颜色
            Color.launch.background.ignoresSafeArea()
            // 图标
            Image("logo-transparent")
                .resizable()
                .frame(width: 100, height: 100)
            // 文字
            ZStack {
                if showLoadingText {
                    HStack(spacing: 0) {
                        ForEach(loadingText.indices, id: \.self) { index in
                            Text(loadingText[index])
                                .font(.headline)
                                .fontWeight(.heavy)
                                .foregroundColor(Color.launch.accent)
                                .offset(y: counter == index ? -5 : 0)
                        }
                    }
                    .transition(AnyTransition.scale.animation(.easeIn))
                }
            }
            .offset(y: 70)
        }
        .onAppear {
            showLoadingText.toggle()
        }
        .onReceive(timer) { _ in
            // 添加弹簧动画
            withAnimation(.spring()) {
                let lastIndex = loadingText.count - 1
                if counter == lastIndex {
                    counter = 0
                    // 循环多少次
                    loops += 1
                    // 检查次数
                    if loops >= 2 {
                        showLaunchView = false
                    }
                }else{
                    counter += 1
                }
            }
        }
    }
}

struct LaunchView_Previews: PreviewProvider {
    static var previews: some View {
        LaunchView(showLaunchView: .constant(true))
    }
}

4. 启动结构体中添加版本适配、启动页、主页,SwiftfulCryptoApp.swift

Swift 复制代码
import SwiftUI

@main
struct SwiftfulCryptoApp: App {
    /// 主 ViewModel
    @StateObject private var viewModel = HomeViewModel()
    /// 是否显示启动 View
    @State private var showLaunchView: Bool = true
    
    init() {
        // 修改导航栏中标题的颜色, 适配 iOS 15 导航栏背景自动更改为默认颜色
        if #available(iOS 15, *) {
            let barAppearance = UINavigationBarAppearance()
            barAppearance.configureWithOpaqueBackground()  // 重置背景和阴影颜色
            barAppearance.titleTextAttributes = [.foregroundColor: UIColor(Color.theme.accent) ]
            barAppearance.largeTitleTextAttributes = [.foregroundColor: UIColor(Color.theme.accent)]
            barAppearance.backgroundColor = UIColor(Color.theme.background)  // 设置导航栏背景色
            // let buttonAppearance = UIBarButtonItemAppearance()
            // buttonAppearance.normal.titleTextAttributes = [
            //    .foregroundColor: UIColor(Color.theme.accent)
            // ]
            //appBarAppearance.buttonAppearance = buttonAppearance
            UINavigationBar.appearance().standardAppearance = barAppearance // 带scroll滑动的页面
            UINavigationBar.appearance().scrollEdgeAppearance = barAppearance // 常规页面
            UINavigationBar.appearance().compactAppearance = barAppearance
        }else{
            UINavigationBar.appearance().largeTitleTextAttributes = [.foregroundColor: UIColor(Color.theme.accent)]
            UINavigationBar.appearance().titleTextAttributes = [.foregroundColor: UIColor(Color.theme.accent)]
            UINavigationBar.appearance().backgroundColor = UIColor(Color.theme.background)
            UINavigationBar.appearance().tintColor = UIColor(Color.theme.accent) //前景色,按钮颜色
            //UINavigationBar.appearance().barTintColor = UIColor(Color.theme.background) //背景色,导航条背景色
            // 更改表格背景颜色
            UITableView.appearance().backgroundColor = .clear
        }
    }
    
    var body: some Scene {
        WindowGroup {
            ZStack {
                NavigationView {
                    HomeView()
                    //.navigationBarHidden(true)
                }
                // 适配 iPad 导航栏
                .navigationViewStyle(.stack)
                // 环境对象中添加 view model,便于每个 View 都能够去访问
                .environmentObject(viewModel)
                .accentColor(Color.theme.accent)
                // 防止 Z 堆栈跳转时产生混乱问题
                ZStack {
                    // 是否显示启动 View
                    if showLaunchView {
                        LaunchView(showLaunchView: $showLaunchView)
                        //.transition(.move(edge: .leading))
                        // transition: 过渡动画 .scale(scale: 0)
                            .transition(.move(edge: .leading))
                    }
                }
                .zIndex(2.0)
            }
        }
    }
}

5. 效果图:

相关推荐
yngsqq1 小时前
037集——JoinEntities连接多段线polyline和圆弧arc(CAD—C#二次开发入门)
开发语言·c#·swift
麦田里的守望者江1 小时前
KMP 中的 expect 和 actual 声明
android·ios·kotlin
_黎明3 小时前
【Swift】字符串和字符
开发语言·ios·swift
ZVAyIVqt0UFji4 小时前
iOS屏幕共享技术实践
macos·ios·objective-c·cocoa
hfxns_6 小时前
iOS 18.2 Beta 4开发者预览版发布,相机新增辅助功能
ios
AirDroid_cn16 小时前
如何控制自己玩手机的时间?两台苹果手机帮助自律
ios·智能手机·ipad·手机使用技巧·苹果手机使用技巧
郝晨妤18 小时前
鸿蒙原生应用开发元服务 元服务是什么?和App的关系?(保姆级步骤)
android·ios·华为od·华为·华为云·harmonyos·鸿蒙
tealcwu19 小时前
【Unity踩坑】在Mac上安装Cocoapods失败
unity·ios·游戏引擎
名字不要太长 像我这样就好21 小时前
【iOS】iOS的轻量级数据库——FMDB
数据库·ios·sqlite·objective-c
@解忧杂货铺21 小时前
Android和IOS的区别
android·ios·cocoa