🏁 학습할 내용Scroll effectColor treatmentsView transitionsText transitionsMetal shaders📜 Scroll effect 스크롤 시, 적용할 수 있는 다양한 effect를 살펴보자 🛞 ScrollTransition스크롤 시, 컨텐츠가 나타나고 사라질 때 적용할 전환 단계사이에 애니메이션을 적용 1️⃣ 파라미터 configurationScrollTransitionConfiguration 타입전환의 동작 종류를 정의, 스크롤 위치 변화에 대한 보간을 어떻게 애님에이션을 할 지.animated(_:): 불연속적 애니메이션.interactive(timeCurve: ...): 연속적 애니메이션.identity: 전환 애니메이션 사용 X axisAxis ..

📷 PhotoPicker 🧩 역할SwiftUI에서 시스템 갤러리를 쉽게 띄울수 있게 제공되는 뷰 🧱 구조생성자에 쓰이는 파라미터를 살펴보자. selection:Binding 또는 Binding갤러리에서 선택한 결과를 바인딩하는 파라미터maxSelectionCountInt?한번에 고를 수 있는 최대 항목 수, nil = 무제한selectionBehaviorPhotosPickerSelectionBehavior선택 처리에 대한 행동Behavior순서 보존 여부연속선택 제약 여부설명.default❌❌시스템 기본. 순서 관계 없음, 자유롭게 선택/해제 가능.ordered✅❌사용자가 선택한 순서를 유지. “1, 2, 3…” 번호가 붙음.continuous❌✅연속된 구간만 선택 가능. 떨어진 항목끼리는 동시에..

🏁 학습할 내용Animation phaseKeyframesTip and tricks ♻️ Animation phases 🧩 역할정해진 phase를 순환하며 애니메이션을 적용해주는 modifier 🤖 코드 및 결과 1️⃣ phaseAnimator(phase, content, animation)nonisolated public func phaseAnimator(_ phases: some Sequence, @ViewBuilder content: @escaping (PlaceholderContentView, Phase) -> some View, animation: @escaping (Phase) -> Animation? = { _ in .default }) -> some View where Phase..

👋 들어가기 전요즘 애니메이션과 트랜지션에 관심 많이 생겨.. 늦었지만 WWDC를 통해기초를 차근차근 다져나갈려고한다. 오늘은 WWDC23의 영상으로 SwiftUI의 애니메이션 탐험 파트를 살펴보자.🏁 학습할 내용뷰 업데이트 해부하기AnimatableAnimationTransaction🧑‍⚕️ 뷰 업데이트 해부하기 🤖 예시 코드 (시작, 애니메이션 X)struct ContentView: View { @State private var selected: Bool = false var body: some View { Image(systemName: "pencil") .resizable() .frame(width: 100, height..

👋 들어가기 전먼저 결과 이미지를 먼저 보자.구현을 위해 필요한 동작을 먼저 정리해보자. 탭 글자에 맞게, indicator의 너비가 변해야함다른 탭을 누르면, 해당 탭에 포커싱됨과 동시에 그 탭에 맞느 Content View가 보여야함Content View에서 Swipe하면, 인디케이도 동기화되어 움직여야함Content View의 종류는 모두 다를 수 있음 각 동작 구현을 위해 필요한 사전 개념은 다음과 같다. scrollTargetLayout: https://hamp.tistory.com/198@resultBuilder: https://hamp.tistory.com/285PreferenceKey: https://hamp.tistory.com/289ID: https://hamp.tistory.com/..

🏁 학습할 내용coordinateSpace@NameSpace활용🧭 CoordinateSpace 🤔 어디서 봤을까? GeometryReader proxy 쪽에서 frame정보를 얻을 때, 어떤 Coordinate로부터 가져올 지결정하게 되는데, 거기서 처음 접했던 것 같다. 🧱 구조CoordinateSpacepublic enum CoordinateSpace { // 뷰 계층구조의 최상단을 기준으로하는 global 좌표계 case global // 현재 뷰를 기준으로한 local 좌표계 case local // Hashable한 값으로 구분된 뷰의 좌표계 case named(AnyHashable)} CoordinateSpaceProtocol특정 좌표계를 갖고 있..