2022. 8. 16. 15:04ㆍSwiftUI/SwiftUI 소개
이 자습서에서는 Landmarks 앱을 사용하는 동안 사용자가 걷는 하이킹을 추적하기 위한 그래프가 포함된 보기를 애니메이션합니다. 수정자를 사용하면 animation(_:)보기에 애니메이션 효과를 주는 것이 얼마나 쉬운지 알 수 있습니다.
시작 프로젝트를 다운로드하고 이 튜토리얼을 따르거나 완성된 프로젝트를 열고 코드를 직접 탐색하십시오.
예상 시간 : 20분
Xcode version : 13.1 이상
섹션 1
앱에 하이킹 데이터 추가
애니메이션을 추가하려면 먼저 애니메이션을 적용할 무언가가 필요합니다. 이 섹션에서는 하이킹 데이터를 가져와 모델링한 다음 해당 데이터를 그래프에 정적으로 표시하기 위해 미리 작성된 뷰를 추가합니다.
1 단계
다운로드한 파일의 리소스 폴더에서 프로젝트의 리소스 그룹으로 파일을 드래그합니다 . 마침을 클릭하기 전에 "필요한 경우 항목 복사"를 선택해야 합니다.hikeData.json
2 단계
메뉴 항목 파일 > 새로 만들기 > 파일을 사용하여 프로젝트의 모델 그룹에서 호출되는 새 Swift 파일을 만듭니다 .Hike.swift
구조 와 마찬가지로 Landmark구조 는 해당 데이터 파일의 키와 일치하는 속성을 Hike따르고 있습니다.Codable
3단계
hikes배열을 모델 개체에 로드 합니다.
@Published하이킹 데이터를 처음 로드한 후에는 절대 수정하지 않기 때문에 속성 으로 표시할 필요가 없습니다 .
4단계
Hikes다운로드한 파일의 Resources 폴더에서 프로젝트의 Views 그룹으로 폴더를 드래그합니다 . 마침을 클릭하기 전에 "필요한 경우 항목 복사" 및 "그룹 만들기"를 선택해야 합니다.
새로운 보기에 익숙해지십시오. 그들은 함께 작동하여 모델에 로드된 하이킹 데이터를 표시합니다.
5단계
HikeView.swift 에서 실시간 미리보기를 켜고 그래프 표시 및 숨기기를 실험합니다.
각 단계의 결과를 실험할 수 있도록 이 자습서 전체에서 실시간 미리 보기를 사용하십시오.
섹션 2
개별 보기에 애니메이션 추가
Equatable 뷰에서 modifier 를 사용하면 animation(_:) SwiftUI는 뷰의 애니메이션 가능한 속성에 대한 모든 변경 사항을 애니메이션으로 만듭니다. 보기의 색상, 불투명도, 회전, 크기 및 기타 속성은 모두 애니메이션 가능합니다. 보기가 동일하지 않으면 수정자를 사용하여 지정된 값이 변경될 때 애니메이션을 시작할 수 있습니다. animation(_:value:)
1 단계
HikeView.swift 에서 값 변경 시 시작되는 애니메이션 수정자를 추가하여 버튼 회전에 대한 애니메이션을 켭니다. showDetail
2 단계
그래프가 표시될 때 버튼을 더 크게 만들어 애니메이션 가능한 또 다른 변경 사항을 추가합니다.
애니메이션 수정자는 감싸는 뷰 내에서 애니메이션 가능한 모든 변경 사항에 적용됩니다.
3단계
애니메이션 유형을 에서 로 변경 합니다 .easeInOutspring()
SwiftUI에는 미리 정의되거나 사용자 정의된 여유가 있는 기본 애니메이션과 스프링 및 유동 애니메이션이 포함됩니다. 애니메이션의 속도를 조정하거나, 애니메이션이 시작되기 전에 지연을 설정하거나, 애니메이션이 반복되도록 지정할 수 있습니다.
4단계
수정자 바로 위에 다른 애니메이션 수정자를 추가하여 회전에 대한 애니메이션을 끄십시오 .scaleEffect
실험
회전을 위해 SwiftUI를 가지고 가십시오. 다양한 애니메이션 효과를 결합하여 가능한 것을 확인하십시오.
5단계
다음 섹션으로 이동하기 전에 두 애니메이션 수정자를 모두 제거하십시오.
섹션 3
상태 변경의 효과 애니메이션
개별 보기에 애니메이션을 적용하는 방법을 배웠으므로 이제 상태 값을 변경하는 위치에 애니메이션을 추가할 차례입니다.
여기에서는 사용자가 버튼을 탭하고 상태 속성을 토글할 때 발생하는 모든 변경 사항에 애니메이션을 적용합니다. showDetail
1 단계
withAnimation 함수에 대한 호출로 showDetail.toggle() 호출을 래핑합니다 .
속성의 영향을 받는 두 보기 (공개 버튼 및 보기)에는 이제 애니메이션 전환이 있습니다. showDetailHikeDetail
애니메이션을 느리게 하여 SwiftUI 애니메이션이 어떻게 중단되는지 확인하십시오.
2 단계
4초 길이의 basic애니메이션을 함수에 전달합니다.withAnimation
수정자에 전달한 것과 동일한 종류의 애니메이션을 함수에 전달할 수 있습니다 .withAnimationanimation(_:value:)
3단계
애니메이션 중간에 그래프 보기를 열고 닫는 실험을 합니다.
4단계
다음 섹션을 계속하기 전에 호출의 입력 매개변수를 제거하여 기본 애니메이션을 사용하도록 함수를 복원하십시오.withAnimation
섹션 4
보기 전환 사용자 정의
기본적으로 보기는 페이드 인 및 페이드 아웃을 통해 화면 안팎으로 전환됩니다. transition(_:) 수정자를 사용하여 이 전환을 사용자화할 수 있습니다 .
1 단계
transition(_:) 조건부 표시에 수정자를 추가합니다 .HikeView
이제 그래프가 시야에 들어오고 사라지면서 나타나거나 사라집니다.
2 단계
방금 추가한 전환을 의 정적 속성으로 추출하고 보기의 전환 수정자에서 새 속성에 액세스합니다.AnyTransition
이렇게 하면 사용자 지정 전환을 확장할 때 코드가 깔끔하게 유지됩니다.
3단계
move(edge:)그래프가 같은 쪽에서 들어오고 나가도록 전환을 사용하도록 전환합니다.
4단계
수정자를 사용 하여 뷰가 나타나고 사라질 때 서로 다른 전환을 제공합니다.asymmetric(insertion:removal:)
섹션 5
복잡한 효과를 위한 애니메이션 구성
막대 아래에 있는 버튼을 클릭하면 그래프가 세 가지 다른 데이터 세트 간에 전환됩니다. 이 섹션에서는 구성된 애니메이션을 사용하여 그래프를 구성하는 캡슐에 동적이고 물결치는 전환을 제공합니다.
1 단계
HikeView 에서 기본값으로 변경하고 showDetailtrue 미리 보기를 캔버스에 고정합니다.
이렇게 하면 다른 파일에서 애니메이션 작업을 하는 동안 컨텍스트에서 그래프를 볼 수 있습니다.
2 단계
HikeGraph.swif 에서 새 애니메이션을 정의하고 생성된 각 그래프 캡슐에 적용합니다.tripple
3단계
애니메이션을 스프링 애니메이션으로 전환하고 댐핑 비율이 감소하여 막대가 뛰게 만듭니다.
실시간 미리보기에서 고도, 심박수, 페이스 사이를 전환하여 애니메이션 효과를 볼 수 있습니다.
4단계
애니메이션 속도를 약간 높여 각 막대가 새 위치로 이동하는 데 걸리는 시간을 줄입니다.
5단계
그래프에서 캡슐의 위치를 기반으로 하는 각 애니메이션에 지연을 추가합니다.
6단계
그래프 간에 전환할 때 사용자 지정 애니메이션이 어떻게 잔물결 효과를 제공하는지 관찰하십시오.
다음 튜토리얼로 이동하기 전에 미리보기의 고정을 해제해야 합니다.
https://developer.apple.com/tutorials/swiftui/animating-views-and-transitions
'SwiftUI > SwiftUI 소개' 카테고리의 다른 글
| 프레임워크 통합 - UIKit과의 인터페이스 (0) | 2022.08.16 |
|---|---|
| 앱 디자인 및 레이아웃 - 복잡한 인터페이스 구 (0) | 2022.08.16 |
| 드로잉 및 애니메이션 - 경로 및 모양 그리기 (0) | 2022.08.16 |
| SwiftUI 요점 - 사용자 입력 처리 (0) | 2022.08.12 |
| SwiftUI 요점 - 목록 작성 및 탐색 (0) | 2022.08.12 |