 Apple Lover Developer & Artist

영속적인 디자인에 현대의 공감을 채워넣는 공방입니다

반응형

 Apple 72

Lecture 7 Review Part 2: ViewModifier Animation

지난 시간에 카드에 대해 UI Animation을 구현해보기 위해 ViewModifier로 재정의 해보 았다. 애니메이션 동작 원리 및 구현 방법을 배우기 전에 몇가지 애니메이션의 황금률에 해당되는 기본원칙 몇가지를 배워보자! 가장 먼저 이해해야 할 것은 오직 변경사항만 애니메이션 할 수 있다. 아무것도 변하지 않는다면 애니메이션을 구현할 수 없다. 애니메이션을 구현할 수 있는 변경 사항에는 무엇이 있을까? ViewModifier에 대한 인수 Shapes 생성에 대한 인수 UI에 View의 존재 여부 애니메이션이 이미 완료된 사용자 변경 사항을 보여준다는 점이다. 여튼 어떻게 애니메이션을 구현할 수 있는가? 암묵적으로 애니메이션을 파라미터로 사용하는 .animation이라는 특수 ViewModifier를..

Lecture 7 Review Part 1: ViewModifier Animation

Animation SwiftUI에서 애니메이션이 어떻게 동작하는가? 모바일 UI 측면에서 애니메이션은 중요한 요소이기 때문에 SwiftUI에서는 이를 쉽게 구현할 수 있도록 설계해두었다. 애니메이션을 구현할 수 있는 방법으로 Shape를 활용해 보는 방법이 존재한다. 예를들어 Memorize 앱에서 카드의 뒷쪽에 파이 모양의 카운트 다운 타이머를 사용하는 경우가 해당된다. 이 때에는 Angle을 활용하여 애니메이션을 구현하였다. 또다른 방법으로 ViewModifier를 사용하는 방법이 존재한다. 그렇다면 ViewModifier은 무엇인가? 우리는 이미 ViewModifier를 사용해본 경험이 있다. 예를들어 aspectRatio, padding, foregroundColor, font와 같은 것들이 해당..

Lecture 6 Review Part 3: Protocols Shapes

Shape Protocol Shape 프로토콜은 View를 상속받고 있는 프로토콜이다. 즉, Shape도 View의 일종이라는 것이다. SwiftUI에서 이미 Shape를 사용해본 적이 있다. RoundedRectangle Circle Capsule etc... 위에서 언급된 도형을 기본적으로 사용한다면 foreground color를 사용하여 View 내부 색깔을 채우게 될 것이다. 하지만 stroke 혹은 fill modifier 를 사용하여 윤곽선만 그리거나 내부에 색깔을 채우도록 설정할 수도 있다. 생각해보면 뭔가 이상한게 있다. stroke를 쓰던 fill을 쓰던 메서드의 인자로 Color가 넘어가거나 Gradient가 넘어가는 등 타입을 가리고 있지 않기 때문이다. 위와 같이 동작할 수 있었던..

Lecture 6 Review Part 2: Protocols Shapes

이전 강좌에서 배운 사항을 실제로 Demo를 통해 이해해보는 시간이다. 가장 좋은 방법은 SwiftUI에서 사용되는 ScrollView나 LazyVGrid의 인자로 View가 들어가는 원리에 대해 파악해보는 것이다. 구현 목표는 화면 크기에 맞추기 위해 모든 카드를 올바른 크기로 유지하는 View Combiner를 정의하는 것이다. 새로 구현할 Combiner가 이미 구현되었다고 가정하고 사용하고 있다. 주석처리한 코드의 역할을 수행하는 Combiner이며 아직 정의되지 않았기 때문에 오류가 뜨고 있음을 확인할 수 있다. 지금바로 새로운 AspectVGrid를 만들어보도록 하자! AspectVGrid라는 새로운 Swift 파일을 생성하였다. 우측에 정의한 것처럼 이 View Combiner를 사용할 때 ..

반응형