SwiftUI에서 앱 스토어와 같은 다운로드 애니메이션 빌드하는 방법

SwiftUI에서 앱 스토어와 같은 다운로드 애니메이션 빌드하는 방법

 

SwiftUI 기본 애니메이션 전투

SwiftUI는 의심할 여지 없이 지금까지 Apple의 가장 완벽한 걸작 중 하나입니다. SwiftUI를 사용하면 더 간결한 코드를 사용하여 매우 복잡한 기능을 구현할 수 있습니다.

최근에 나는 애니메이션에 대해 약간의 지식을 배웠다. 이 최신 프레임워크를 사용하면 매우 부드러운 애니메이션 효과를 쉽게 얻을 수 있습니다.

이전 사진은 다음에 안내할 데모입니다. App Store에서 앱을 다운로드할 때의 애니메이션과 비슷하지만 일부 위치에서 다릅니다. Enter 버튼을 탭하면 버튼이 로딩 원으로 바뀝니다. 시스템 로드가 완료되면 애니메이션의 끝을 나타내는 확인 표시가 나타납니다.

자세한 내용이 알고 싶으시면 아래 GIF를 참고하시면 됩니다.

체크 표시

먼저 체크 표시의 애니메이션을 그려 봅시다.

새 SwiftUI 파일을 만들고 이름을 지정했습니다. CheckView, 아무 이름으로나 설정할 수 있습니다. 그림을 그릴 때 다음을 사용해야 합니다. Path 수업.

선을 그리는 원리는 실제로 매우 간단합니다. 수학에서 우리는 두 점이 직선을 정의한다는 것을 알고 있습니다. 체크 표시의 모양을 그리려면 3개의 점이 필요합니다. 직선 위에 있지 않은 세 점으로 삼각형을 결정할 수 있기 때문에 삼각형을 그린 후 체크 표시의 두 변을 선택하는 것만으로 체크 표시의 모양을 성공적으로 그릴 수 있습니다.

사용 addLines(_ lines: [CGPoint]) 기능을 사용하여 배치하려는 점을 추가할 수 있습니다.

확인 표시를 더 잘 레이아웃하려면 다음을 사용해야 합니다. GeometryReader 그리기 도구. GeometryReader, 애플의 말로는 콘텐츠를 자체 크기 및 좌표 공간의 함수로 정의하는 컨테이너 보기입니다. 이 보기는 상위 레이아웃에 유연한 기본 크기를 반환합니다.

보기의 중앙에 체크 표시를 합시다.

이 코드를 통해 시뮬레이터에 작은 보라색 체크 표시가 나타나는 것을 볼 수 있습니다.

하지만 어떻게 움직이게 할까요?

유형의 변수가 필요합니다. Bool나는 그것을 설정 checkViewAppear. 본문 앞에 이 변수를 선언해야 합니다.

@State private var checkViewAppear = false

참고로 .animation() 함수는 체크 표시에 애니메이션을 추가할 수 있으므로 경로 뒤에 이 함수를 추가하고 매개변수를 수정합니다. .trim(from:, to :).

인스턴스 메소드 onAppear(perform:) 이 보기가 나타날 때 수행할 작업을 추가할 수 있는 기회를 제공합니다.

이제 실시간 미리보기를 탭하면 확인 표시가 나타날 때 애니메이션을 볼 수 있습니다.

버튼 보기

새 SwiftUI 보기를 만들고 이름을 지정했습니다. ButtonAnimationView.swift.

나중에 만들 뷰를 살펴보십시오. 배경 보기로 둥근 사각형 위에 둥근 사각형이 포함되어 있습니다. HStack 이미지 보기와 텍스트 보기를 포함하는 보기. 그럼 부터 시작해보자 ZStack 보다.

여기에서 다음 그림과 같이 둥근 사각형을 만듭니다.

이제 추가 HStack 이미지 보기와 텍스트 보기를 포함하는 보기.

이제 버튼 보기가 완료되었으므로 보기에 애니메이션을 추가하기만 하면 됩니다.

이전에 보았던 gif로 돌아가서 버튼을 탭한 후 보기가 원형 보기로 바뀌는 것을 볼 수 있습니다. 또 뭔데? 원 보기의 색상은 버튼 보기와 다릅니다.

이 변경을 처리하려면 값이 다른 값에 기록되었을 때 뷰를 변경할 수 있는 값을 읽고 쓸 수 있는 속성 래퍼 유형이 필요합니다. 나는 그것을 설정 downloadButtonTapped:

@State private var downloadButtonTapped = false

이제 버튼을 탭했을 때 버튼 보기의 너비를 변경합니다.

RoundedRectangle(cornerRadius: 30)
···
.frame(width: self.downloadButtonTapped ? 60 : 300, height: 60)
···

버튼을 탭하면 보기의 배경색이 흰색으로 바뀌고 foregroundColor 보라색이 됩니다:

RoundedRectangle(cornerRadius: 30)
···
.foregroundColor(self.downloadButtonTapped ? .purple : Color(red: 230/255, green: 230/255, blue: 230/255))
.background(self.downloadButtonTapped ? .white : Color(red: 230/255, green: 230/255, blue: 230/255))
···

이제 인스턴스 메소드를 사용하십시오. onTapGesture(count:perform:) 둥근 사각형 보기가 탭 제스처를 인식할 때 수행할 작업을 추가합니다.

RoundedRectangle(cornerRadius: 30)
···
.onTapGesture {
withAnimation(.default) {
self.downloadButtonTapped = true
}
}

숨기려면 HStack 탭 제스처 후에 보기의 값이 downloadButtonTapped 와 동등하다 true.

if !downloadButtonTapped {
HStack {
Image("riding").resizable().frame(width: 30, height: 30)
Text("Enter")
}.font(.headline)
}

라이브 미리보기를 켜면 둥근 사각형 보기가 원형 보기로 바뀌는 방법을 보여주는 애니메이션이 표시됩니다.

이제 원에 작은 부분이 누락되도록 만들고 회전해야 합니다. 두 가지 새 속성 래퍼 유형을 추가합니다.

@State private var loading = false
@State private var fullcircle = false

원을 불완전하게 만들려면 다음 코드를 변경하십시오.

RoundedRectangle(cornerRadius: 30)
.trim(from: 0, to: self.fullcircle ? 0.95 : 1)
···

인스턴스 메소드 추가 rotationEffect(_:anchor:) 직전 onTapGesture 원형 보기를 회전하는 방법:

RoundedRectangle(cornerRadius: 30)
···
.rotationEffect(Angle(degrees: self.loading ? 0 : -1440))
···

그리고 업데이트 onTapGesture 방법:

RoundedRectangle(cornerRadius: 30)
···
.onTapGesture {
withAnimation(.default) {
self.downloadButtonTapped = true
self.fullcircle = true        
}
}

당신은 혼란스러워 할 수 있습니다 loading 재산은 에 포함되지 않습니다 onTapGesture 방법. 회전 애니메이션은 둥근 사각형 보기가 원형 보기가 되는 애니메이션 뒤에 있기 때문에 — 속성을 추가하면 onTapGesture 방법을 사용하면 애니메이션이 우리에게 필요한 것이 아니며 애니메이션의 지속 시간이 너무 짧다는 것을 알게 될 것입니다.

원 회전 애니메이션을 처리하려면 새로운 기능이 필요합니다. startProcessing(). 생성해 보겠습니다.

struct ButtonAnimationView: View {
···
private func startProcessing() {
withAnimation(Animation.linear(duration: 5)) {
self.loading = true
}
}
}

이 함수를 언제 호출합니까? 분명히 이미지보기와 텍스트보기가 사라진 후에 추가하십시오. onDisappear 방법 HStack 보다:

if !downloadButtonTapped {
HStack {
Image("riding").resizable().frame(width: 30, height: 30)
Text("Enter")
}.font(.headline)
.onDisappear() {
self.startProcessing()
}
}

이제 둥근 사각형 보기를 탭한 후 회전 애니메이션을 볼 수 있습니다.

CheckView와 버튼 보기 결합

회전 애니메이션의 몇 초 전에 CheckView 원 보기 위에 나타납니다. 그리고 그들은 동시에 완료됩니다. 따라서 다음을 표시할 새 속성 래퍼 유형이 필요합니다. CheckView 표시됩니다:

@State private var completed = false

에서 startProcessing 메서드에서는 애니메이션이 5초 안에 완료된다고 가정하므로 이제 4초 후에 가정합니다. CheckView 표시됩니다:

struct ButtonAnimationView: View {
···
private func startProcessing() {
withAnimation(Animation.linear(duration: 5)) {
self.loading = true
}        DispatchQueue.main.asyncAfter(deadline: .now() + 4) {
self.completed = true
self.fullcircle = false
}    
}
}

이제 추가 CheckView ~로 ZStack 보다:

if completed {
CheckView()
.offset(x: -5, y: 9)
.foregroundColor(.purple)
}

이제 라이브 미리보기에서 전체 애니메이션을 볼 수 있습니다.