IOS (21) 썸네일형 리스트형 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를 비교하여 같은 값이 되면 종료하도록 하였다. 단순한 문제라고 생각하며 외계인이 워프 전에는 오른쪽으로 워프 후에는 왼쪽으로 방향을 바꿔야하는 것을.. Playground 코딩 배우기2 - 스위치 모으기 var gemCounters = 0 var switchCounters = 0 while (gemCounters == 0) || gemCounters != switchCounters{ while (switchCounters == 0) || gemCounters != switchCounters{ if isBlockedLeft && isBlocked { turnRight() } else { moveForward() } if isOnGem{ collectGem() gemCounters += 1 } if isOnClosedSwitch{ toggleSwitch() switchCounters += 1 } } } 보석 갯수는 랜덤으로 생성되며 보석 갯수와 동일한 숫자의 스위츠를 켜야한다. 조건없는 무한 반복으로 진행하.. SwiftUI-100Days - WeSplit 전체 코드 import SwiftUI struct ContentView: View { @State private var checkAmount = 0.0 @State private var numberOfPeople: Int = 2 @State private var tipPercentage = 20 @FocusState private var amountIsFocused: Bool let tipPercentages = [10, 15, 20, 25, 0] var totalPerPerson: Double{ let peopleCount = Double(numberOfPeople + 2) let tipSelection = Double(tipPercentage) let tipValue = checkAmount / 10.. 이전 1 2 3 다음
