언어 (188) 썸네일형 리스트형 레스토랑 메뉴 SwiftUI Showcase - Kavsoft (iOS 인터렉티브 애니메이션) 결과물🤟🏻: 이용자들에게 어플리케이션을 사용하기 전, 기본 UI의 기능을 소개하는 튜토리얼 애니메이션 이번 애니메이션을 학습하게된 계기 🔫: UI/UX의 디자인 및 애니메이션은 시각적인 화려함과 재미에 대해 중요도를 높이 평가할 수 있다. 또한, 이용자들에게 별도의 사용설명서 혹은 지침을 제공하지 않더라도 디자인 혹은 애니메이션을 통해 어플리케이션의 기능을 자연스럽게 이용 및 기능을 사용할 수 있도록 유도하는 것이 매우 중요하다. Reference ✂️ : https://youtu.be/I9v-zqrE8gI 과정 🎩: 한개의 모델과 2개의 View로 구성하였으며 사용된 코드 중 학습한 코드에 대해 공부하고자 한다. 기본 View를 구성하는 것은 Mapkit과 TabView를 활용하여 구성하였다. 이번 클.. SwiftUI Curved Custom Tab Bar - Kavsoft (iOS 인터렉티브 애니메이션) 결과물🤟🏻: 메뉴 클릭시 해당 메뉴로 이동하는 애니메이션 이번 애니메이션을 학습하게된 계기 🔫: Custom shape와 path를 활용하여 메뉴 아이콘 선택 전환에 따른 path 변화를 애니메이션으로 표현 Reference ✂️ : https://youtu.be/XZuc8WnZIS4 과정 🎩: Step 1. Tab bar 메뉴로 사용할 아이콘들과 명칭을 View 하단에 배치 import SwiftUI enum Tab: String, CaseIterable { case home = "Home" case services = "Services" case partners = "Partners" case activity = "Activity" // SF Symbol Image var systemImage: St.. SwiftUI Metaball Animation - Kavsoft (iOS 인터렉티브 애니메이션) 결과물🤟🏻: 원 도형 두개를 사용하여 Metaball 효과를 보여주는 Metaball menu & 여러개의 RoundedRectangle을 사용하여 Metaball 효과를 보여주는 Clubbed 메뉴 이번 애니메이션을 학습하게된 계기 🔫: Canvas와 mask를 공부하며 이전에 학습한 다이나믹 아일랜드와 이미지가 합쳐지는 효과 및 아이콘 전환시 Blur를 활용한 효과에 응용된 Metaball Animation을 파고파고 🚣🏻♂️ Reference ✂️ : https://www.youtube.com/watch?v=hfKGLJejAEw 과정 🎩: Step 1. Asset에 Gradient 색상으로 사용할 색상 설정 동일한 계열의 색상을 연한색, 진한색으로 설정하여 그라데이션 효과를 줄 수 있다. Step.. SwiftUI, 아이콘전환 인터렉티브 애니메이션(shape morphing) 결과물🤟🏻: 아이콘 전환시 부드럽게 넘어가는 느낌의 애니메이션 이번 애니메이션을 학습하게된 계기 🔫: 이전 포스팅에서 다이나믹 아일랜드와 이미지가 합쳐지는 듯한 효과를 학습했었다. https://april21st.tistory.com/185 Kavsoft채널에서 Metaball Effect로 소개된 애니메이션이며 Cavas shape과 blur효과를 적절히 사용한 것이다. Metaball Effect와 비슷한 방식으로 Blur효과를 적절히 사용하여 아이콘 전환 애니메이션을 학습 및 탐구 Reference ✂️ : https://www.youtube.com/watch?v=HVNxfI8XYMw 과정 🎩: Step 1. 아이콘(이미지) View 설정 struct ResolvedImage: View { @Bin.. SwiftUI, 인터렉티브 다이나믹 아일랜드 스크롤 애니메이션 만들기[1] 목표🦾: 아래의 예시와 같이 화면을 아래로 스크롤 할때 다이나믹아일랜드와 상호작용을 보여주는 애니메이션 제작(따라하기) 참고한 자료👀: Kavsoft채널의 Dynamic Island Metaball Scroll Effect https://youtu.be/ZS_TjVkHmP8 계기💄: 완성된 Animate iOS 어플을 클론코딩하기 위해 Full-course를 따라하던 중, 스크롤 효과를 이해하고 탐구하기 위해 Kavsoft 채널에서 관련 콘텐츠를 찾아 봄 과정 🎩: Step 1. example 화면을 구성 스크롤 과정에서 이미지 하단의 숫자가 변하는 것을 볼 수 있다. 해당 숫자는 이미지 상단의 CG[변수 scrollProgress]값을 표시한다. [CG값이란? 참고!] https://velog.io/@.. SwiftUI Blur 효과/ UIBlurEffect import SwiftUI struct ContentView: View { var body: some View { ZStack{ GeometryReader{ proxy in let frame = proxy.frame(in: .global) Image("yamon") .resizable() .frame(width: frame.size.width, height: frame.size.height) } GeometryReader{ proxy in BlurView(style: .light) } } .ignoresSafeArea(.all, edges: .all) } } struct BlurView: UIViewRepresentable { let style: UIBlurEffect.Style func makeUIVi.. Playground 코딩 배우기 2 총 개수 모으기 let totalGems = randomNumberOfGems var gemCounters = 0 while gemCounters != totalGems{ if isBlocked && isBlockedLeft{ turnRight() } else if isBlocked && isBlockedRight{ turnLeft() } else { moveForward() } if isOnGem{ collectGem() gemCounters += 1 } } 시작시 주어지는 랜덤갯수만큼 보석을 획득하면 종료되도록 하였다. 조건문으로 totalGems와 gemCounters를 비교하여 같은 값이 되면 종료하도록 하였다. 단순한 문제라고 생각하며 외계인이 워프 전에는 오른쪽으로 워프 후에는 왼쪽으로 방향을 바꿔야하는 것을.. 이전 1 2 3 4 ··· 24 다음
