技术: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()
})
}
}
}
}