SwiftUI-自定义启动闪屏动画-App启动闪屏曲线路径动画

立即下载用AI写一个

发布时间：2022-08-22

0人 | 浏览：1295次 | 收藏 |

技术：SwiftUI、SwiftUI3.0、动画闪屏、启动动画闪屏、启动闪屏曲线路径动画、动画灵感 - 来自德国的`freYfahrt`打车软件

运行环境：SwiftUI3.0 + Xcode13.4.1 + MacOS12.5 + iPhone Simulator iPhone 13 Pro Max

概述

使用SwiftUI做一个App启动闪屏logo定制曲线路径的案例

详细

### 一、运行效果
![请添加图片描述](https://img-blog.csdnimg.cn/661bef9fbd8945d4ae9977c084ba7842.gif)

### 二、项目结构图
![在这里插入图片描述](https://img-blog.csdnimg.cn/c49485669fff4ea48ec9fb76ae7505e4.png)

### 三、程序实现 - 过程
>思路: 
1.创建闪屏动画页面
2.画图 画出  `J 、| 、和J的倒放`、`2个小圆点` 然后控制动画
3.创建 主页 `导航 + 滚动视图 + N个图片`
4.处理闪屏动画结束 展示主页逻辑

#### 1.创建一个项目命名为 `SplashsAnimation`
![在这里插入图片描述](https://img-blog.csdnimg.cn/62c877296f7c4a448a44407c45550902.png)
![在这里插入图片描述](https://img-blog.csdnimg.cn/558ba81603d94cf39f46780870cfeb24.png)

#### 1.1.引入资源文件和颜色
> 颜色
> SplashColor `#DD8482`
> 随机图片5张

![在这里插入图片描述](https://img-blog.csdnimg.cn/562617924a9d4b28ac77fa75f21e28fc.png)

#### 1.2  设置启动闪屏的背景颜色跟闪屏背景颜色同步

![在这里插入图片描述](https://img-blog.csdnimg.cn/0310c2b29f114e109206f8460cccd594.png)

#### 2. 创建一个虚拟文件`New Group` 命名为 `View`
![在这里插入图片描述](https://img-blog.csdnimg.cn/33300d854c294656b7c83e49e86862d1.png)
![在这里插入图片描述](https://img-blog.csdnimg.cn/fc51a48e63b641c7b28ce3da74f13bef.png)

#### 2. 创建一个文件`New File`  选择`SwiftUI View`类型 命名为`SplashScreen`
![在这里插入图片描述](https://img-blog.csdnimg.cn/37bf7ae00271453b9ef55fbd7b89b78f.png)
![在这里插入图片描述](https://img-blog.csdnimg.cn/83ca565a956341feb36920ce4439cee2.png)

![在这里插入图片描述](https://img-blog.csdnimg.cn/d566b278cdd54eba806fa2ccd99b751d.png)

#### 3. 创建一个文件`New File`  选择`SwiftUI View`类型 命名为`Home` 
> 主要是: `展示` 闪屏过后的首页

![在这里插入图片描述](https://img-blog.csdnimg.cn/37bf7ae00271453b9ef55fbd7b89b78f.png)
![在这里插入图片描述](https://img-blog.csdnimg.cn/9bc11a5d821d4da1b9d465dcc4b354e9.png)
![在这里插入图片描述](https://img-blog.csdnimg.cn/ae9c51d9e4af4f2b99b12b05348564da.png)

![在这里插入图片描述](https://img-blog.csdnimg.cn/8d0bd215a87f48bfb85ed41bacc3191f.png)

### Code

#### ContentView - 主窗口
> 主要是展示主窗口`Home`和闪屏页面
> 一开始是闪屏页面 。闪屏动画执行完毕 就会偏移y为整个屏幕的高度。
> 所以首页需要判断是否动画结束完成 完成就进行一个偏移

```swift
//
//  ContentView.swift
//  Shared
//
//  Created by 李宇鸿 on 2022/8/19.
//

import SwiftUI

struct ContentView: View {
    // 当动画完成时做动作…
    @State var endAnimation : Bool = false
    var body: some View {
        
        ZStack {
            
            Home()
            // 一开始将首页y设置为0 动画过渡完毕 就偏移到整个屏幕的高度
                .offset(y:endAnimation ? 0 :  getRect().height)
            SplashScreen(endAnimation:$endAnimation)
        }
    }
}

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

```

#### Home - 主页
> 思路
> 1. 主要就是展示一个导航栏 + 滚动视图 + 多张图片

```swift
//
//  Home.swift
//  SplashsAnimation (iOS)
//
//  Created by 李宇鸿 on 2022/8/19.
//

import SwiftUI

struct Home: View {
    var body: some View {
        
        NavigationView{
            
            ScrollView(.vertical,showsIndicators: false) {
                
                VStack(spacing:20){
                    
                    ForEach(1...5,id:\.self){index in
                        
                        Image("Pic\(index)")
                            .resizable()
                            .aspectRatio(contentMode: .fit)
                            .frame(width: getRect().width - 30, height: 220)
                            .cornerRadius(15)
                    }
                }
                .padding(15)
            }
            .navigationTitle("Trending Posts")

}
    }
}

struct Home_Previews: PreviewProvider {
    static var previews: some View {
        Home()
    }
}

```

#### SplashScreen - 闪屏动画页面
>  做法思路
>  1. 画出几个图形 
>  `J 、| 、和J的倒放`、`2个小圆点`
>  ![在这里插入图片描述](https://img-blog.csdnimg.cn/858d8c0b8bfb4de88c4b24025434b222.png)
>  2. 通过逻辑去控制每一个的动画 - 注意其中` J 、| 、和J的倒放`是一个动画组
>  3. 控制动画结束之后 展示首页
>

```swift
//
//  SplashScreen.swift
//  SplashsAnimation (iOS)
//
//  Created by 李宇鸿 on 2022/8/19.
//

import SwiftUI

struct SplashScreen: View {
    
    
    
    // 动画属性……
    @State var startAnimation : Bool = false
    
    
    @State var circleAnimation1 : Bool = false
    @State var circleAnimation2 : Bool = false
    
    // 结束的动画
    @Binding var endAnimation : Bool

var body: some View {
        ZStack{
            Color("SplashColor")
            Group{
                
                // 自定义形状与动画…
                SplashShape()
                // 修剪
                    .trim(from: 0, to: startAnimation ? 1 : 0)
                // 描边得到轮廓
                    .stroke(Color.white,style: StrokeStyle(lineWidth: 30, lineCap: .round, lineJoin: .round))
                
                
                // 两个圆……
                Circle()
                    .fill(.white)
                    .frame(width: 35, height: 35)
                    .scaleEffect(circleAnimation1 ? 1 : 0)
                    .offset(x:-80, y: 22)
                
                
                Circle()
                    .fill(.white)
                    .frame(width: 35, height: 35)
                    .scaleEffect(circleAnimation2 ? 1 : 0)
                    .offset(x:80, y: -22)
            }
            // 默认尺寸
            .frame(width:220,height:130)
            // 如果是动画已经结束 就缩放到0.15倍
            .scaleEffect(endAnimation ? 0.15 :  0.9)
            .rotationEffect(.init(degrees: endAnimation ? 85: 0))
            
            // 底部文案
            VStack{
                Text("Powered by")
                    .font(.callout)
                    .fontWeight(.semibold)
                
                Text("宇夜iOS")
                    .font(.title2)
                    .fontWeight(.semibold)

}
            .frame(maxHeight:.infinity,alignment: .bottom)
            .foregroundColor(Color.white.opacity(0.8))
            .padding(.bottom,getSafeArea().bottom == 0 ? 15 : getSafeArea().bottom)
            .opacity(startAnimation ? 1 : 0)
            .opacity(endAnimation ? 0 : 1)
        }
        // 移动视图…
        .offset(y:endAnimation ? (-getRect().height * 1.5) : 0)
        .ignoresSafeArea()
        .onAppear {
            // 推迟开始……
            withAnimation(.spring().delay(0.15)){
                // 第一圈……
                circleAnimation1.toggle()
            }
            
            // 下一个形状……
            withAnimation(.interactiveSpring(response: 0.7, dampingFraction: 1.05, blendDuration: 1.05).delay(0.3)){
                startAnimation.toggle()
            }
            
            // 最后一个圆
            withAnimation(.spring().delay(0.7)){
                circleAnimation2.toggle()

}
            
            
            // 动画结束
            withAnimation(.interactiveSpring(response: 0.7, dampingFraction: 1.05, blendDuration: 1.05).delay(1.2)){
                endAnimation.toggle()
            }
            
        }
    }
}

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

// 扩展视图以获得屏幕框架…
extension View{
    func getRect()->CGRect{
        return UIScreen.main.bounds
    }
    
    // 安全的地方
    func getSafeArea()->UIEdgeInsets{
        guard let screen = UIApplication.shared.connectedScenes.first as? UIWindowScene else{
            return .zero
        }
        guard let safeArea = screen.windows.first?.safeAreaInsets else{
            return .zero
        }
        
        return safeArea
    }
}

struct SplashShape: Shape {
    // 画出3个路径 J | J的反转
    func path(in rect: CGRect) -> Path {
        return Path{ path in
            let mid = rect.width / 2
            let height = rect.height
            
            // 80 = 40:弧半径…
            path.move(to: CGPoint(x: mid - 80, y:height))
            path.addArc(center: CGPoint(x: mid - 40 , y: height), radius: 40, startAngle: .init(degrees: 180), endAngle: .zero, clockwise: true)
            
            // 直线……
            path.move(to: CGPoint(x: mid, y: height))
            path.addLine(to: CGPoint(x: mid, y: 0))
            
            // 另一个弧…
            path.addArc(center: CGPoint(x: mid + 40 , y: 0), radius: 40, startAngle: .init(degrees: -180), endAngle: .zero, clockwise: false)

}
    }
}

```

本实例支付的费用只是购买源码的费用，如有疑问欢迎在文末留言交流，如需作者在线代码指导、定制等，在作者开启付费服务后，可以点击“购买服务”进行实时联系，请知悉，谢谢

感谢

手机上随时阅读、收藏该文章？请扫下方二维码

SwiftUI-自定义启动闪屏动画-App启动闪屏曲线路径动画

概述

详细

相似例子推荐

评论

作者

评分详细

作者例子