animation2 SwiftUI)토스 주식 탭 애니메이션 구현하기 구현환경 iOS 16.4 +, iPhone 14 Pro Max 기준으로 SwiftUI를 사용하였다. 다크모드 대응은 따로 안했다. 내 폰이 12프맥이라서 실제 토스 앱과 사이즈를 비슷하게 하기 위해 이번에도 14프맥을 기준으로 구현했다. 목표 애니메이션 구현 + 애니메이션이 포함된 뷰를 구현하기 1. 목표 애니메이션: 토스증권 옆 종합지수가 번갈아가면서 보여지는 애니메이션 2. 네비게이션 바 부분: 스크롤이 올라가면서 서서히 드러나는 1번과 동일한 애니메이션 3. 내 주식 & 오늘의 발견 버튼 부분 - 스크롤이 올라가면 네비게이션바 부분까지만 올라갔다가 이후엔 고정되어 네비게이션바의 역할을 함 - 버튼을 누르면 탭이 바뀌고, 버튼 밑의 라인이 옆으로 매끄럽게 이동함 과정 및 고민 1. 애니메이션 구현부 .. 2023. 6. 6. SwiftUI) 토스 애니메이션 구현해보기 앱에 필요한 것은 사용자가 원하는 서비스를 제공하는 것, 사용성이 있다. 토스 앱을 사용해보면 상큼발랄한 애니메이션이 여기저기 보이고 이로 인해 앱에서 젊은 바이브와 간편하다는 느낌을 받을 수 있다. 토스 앱에 들어간 애니메이션 중 하나를 구현해보았다. 구현환경 iOS 16.0 +, iPhone 14 Pro Max 기준으로 SwiftUI를 사용하였고 사용된 라이브러리는 로티(Lottie)이다. 내 폰이 12프맥이라서 실제 토스 앱과 사이즈를 비슷하게 하기 위해 14프맥으로 설정했다. 목표 애니메이션 구현 + 애니메이션이 포함된 뷰를 구현하기 과정 및 고민 1. 셀모양을 Rectangle()로 할지 VStack에 백그라운드를 줄지 고민이 됐다. Rectangle로 하면 오버레이나 ZStack으로 UI들을 .. 2023. 5. 23. 이전 1 다음
