스위프트SwiftUI의 아이폰iPhone SE 2022 배경 화면

조회수 719

지난 주에 저는 Photoshop을 사용하여 새로운 Apple iPhone SE 배경 화면을 만드는 방법에 대한 튜토리얼을 작성했습니다. 정말 재미있는 작은 튜토리얼이었고 다른 디자이너가 Figma에서 동일한 효과를 만드는 것을 보았습니다. 재능 있는 사람들과 놀라운 도구를 마음대로 사용할 수 있다는 사실이 놀랍습니다. 같은 이미지를 염두에 두고 SwiftUI를 사용하여 코드로 다시 생성하기로 결정했고 꽤 아름다운 결과와 함께 재미있는 연습으로 판명되었습니다.

참고: 그라데이션에 약간의 밴딩이 있습니다. 내 지식은 SwiftUI에 대해 제한적이지만 솔루션이 있다고 확신합니다. 또한 내 애니메이션에 이상한 결함이 있지만 실제로 필요한 것은 아닙니다. 여기 내가 한 일이 있습니다.

비디오 미리보기


1 단계

간단한 직사각형 보기로 시작합니다. 내 구조체를 ColorBar라고 불렀습니다.


2 단계

그런 다음 그라디언트에 대해 5개의 다른 변수를 만들고 직사각형 채우기에 적용했습니다. 처음과 마지막 색상은 불투명도로 0을 사용했습니다. 또한 startPoint가 .top이고 endPoint가 .bottom인지 확인하십시오.

struct ColorBar: View {
       
var g1:Color = Color(red: 95 / 255, green: 71 / 255, blue: 202 / 255)
var g2:Color = Color(red: 255 / 255, green: 175 / 255, blue: 196 / 255)
var g3:Color = Color(red: 230 / 255, green: 210 / 255, blue: 173 / 255)
var g4:Color = Color(red: 244 / 255, green: 160 / 255, blue: 18 / 255)
var g5:Color = Color(red: 228 / 255, green:0 / 255, blue: 0 / 255)
var body: some View {
Rectangle().fill(
LinearGradient(gradient: Gradient(colors: [g1.opacity(0),g1,g2,g3,g4,g5,g5.opacity(0)]), startPoint: .top, endPoint: .bottom))

}
}


3단계

모든 것을 합친다. 먼저 수동으로 모든 작업을 수행했습니다. 즉, 9개의 colorBar 인스턴스를 추가하고 프레임 수정자를 사용하여 높이 값을 변경했습니다. 높이 차이의 기준으로 사용할 승수라는 간단한 변수를 만들었습니다.


결론

그 후 저는 ForEach로 프로세스를 자동화하는 데 더 많은 시간을 할애합니다. 여전히 개념에 대해 어려움을 겪지만 여기에 최종 코드가 있습니다. 아! 또한 앱을 열 때와 탭할 때 막대에 애니메이션을 적용했습니다.

여기에서 GitHub를 통해 다운로드하고 Playgrounds가 있는 iPad에서도 시도할 수 있습니다.

//
// ContentView.swift
// SEBG
//
// Created by Fabio Sasso on 3/12/22.
//
import SwiftUI

struct ContentView: View {
var multiplier:CGFloat = 60
var steps:Int = 9
var half:Int = 5
var gStart:Color = Color(red: 29 / 255, green: 6 / 255, blue: 74 / 255)
var gEnd:Color = Color(red: 54 / 255, green: 4 / 255, blue: 2 / 255)
@State var aniBar: Bool = false
var body: some View {
GeometryReader { geometry in
ZStack{
HStack(alignment: .center, spacing:0){
ForEach((1...steps), id: \.self) { i in
if(i <= half){
ColorBar().frame(height: self.aniBar ? geometry.size.height - (multiplier * CGFloat(i)) : geometry.size.height).zIndex(Double(half - (i-half))).shadow(color: Color.black.opacity(self.aniBar ? 0.1 : 0),radius: 5 ).animation(Animation.easeInOut(duration:4))
//geometry.size.height - (multiplier * CGFloat(i))
}
else{
ColorBar().frame(height: self.aniBar ? geometry.size.height - (multiplier * CGFloat(half - (i-half))) : geometry.size.height).zIndex(Double(i)).shadow(color: Color.black.opacity(self.aniBar ? 0.1 : 0),radius: 5 ).animation(Animation.easeInOut(duration:4))
}
}
}.frame(height: geometry.size.height)
}.background(LinearGradient(gradient: Gradient(colors: [gStart,gEnd]), startPoint: .top, endPoint: .bottom))
}.edgesIgnoringSafeArea(.all)
.onAppear{
self.aniBar.toggle()
}
.onTapGesture{
self.aniBar.toggle()
}
}
}

struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
struct ColorBar: View {
var g1:Color = Color(red: 95 / 255, green: 71 / 255, blue: 202 / 255)
var g2:Color = Color(red: 255 / 255, green: 175 / 255, blue: 196 / 255)
var g3:Color = Color(red: 230 / 255, green: 210 / 255, blue: 173 / 255)
var g4:Color = Color(red: 244 / 255, green: 160 / 255, blue: 18 / 255)
var g5:Color = Color(red: 228 / 255, green:0 / 255, blue: 0 / 255)
var body: some View {
Rectangle().fill(
LinearGradient(gradient: Gradient(colors: [g1.opacity(0),g1,g2,g3,g4,g5,g5.opacity(0)]), startPoint: .top, endPoint: .bottom))

}
}