SwiftUI 고급 애니메이션 만드는 방법: 모양 모핑

SwiftUI 고급 애니메이션 만드는 방법: 모양 모핑

 

Accelerate 라이브러리가 있는 VectorArithmetic 프로토콜을 사용하여 복잡한 SwiftUI 보기를 효율적으로 애니메이션할 수 있는 방법을 보여 드리겠습니다.

레귤러 .animate() 기능은 이미 보기에 애니메이션 효과를 주는 강력한 방법을 제공합니다. 그러나 그 사용은 단순 변환으로 제한됩니다.

이 가이드에서는 다음을 사용하여 복잡한 SwiftUI 보기를 효율적으로 애니메이션할 수 있는 방법을 보여 드리겠습니다. VectorArithmetic 프로토콜 Accelerate 빠른 계산을 위한 라이브러리.

이 가이드 과정에서 우리는 모핑 구체 용암 램프 거품에서 영감을 얻은 애니메이션. 흔들리는 용암 거품의 일종.

💡 제안된 기술은 더 복잡한 다른 애니메이션에서도 사용할 수 있습니다.

흔들리는 거품

애니메이션은 두 상태 간의 전환으로 생각할 수 있습니다. 그리고 이 전환은 원활해야 합니다! 이 부드러운 전환을 표시하려면 SwiftUI가 단계 사이를 그리는 방법을 알아야 합니다.

두 모양(상태) 간의 부드러운 변경

애니메이션 가능한 벡터

애니메이션의 핵심 아이디어는 지속적으로 변경될 수 있는 속성으로 개체의 상태를 표현하는 것입니다.

예를 들어 개체의 위치 지정을 애니메이션으로 만들려고 하고 개체에 정수 좌표가 있는 경우 한 좌표에서 다른 좌표로 원활하게 이동하는 개체의 프레임 사이를 만드는 것은 불가능합니다. 반대로 개체의 위치가 부동 소수점 변수로 표시되면 새 좌표가 얻어질 때까지 개체의 좌표를 점진적으로 변경할 수 있습니다.

복잡한 애니메이션도 마찬가지입니다. 그러나 일반적으로 상태는 단일 부동 변수로 나타낼 수 없습니다. 이 경우 우리가 사용할 AnimatableVector. 다음을 따르는 수학적 벡터를 나타냅니다. VectorArithmetic 규약.

💡두 개의 애니메이션 단계가 다음을 준수하는 객체로 표현되는 경우 VectorArithmetic 프로토콜을 사용하면 SwiftUI는 벡터 사이를 계산하고 전환을 그릴 수 있습니다.

그만큼 AnimatableVector 꽤 간단합니다. 좌표 배열을 저장하고 이에 대한 기본 수학 연산을 정의합니다. 아래 코드에서 Accelerate는 빠른 계산에 사용됩니다.

벡터에 여러 값만 포함된 경우 가속을 사용하면 너무 많은 오버헤드가 발생할 수 있습니다. 따라서 애니메이션을 몇 가지 값으로 표현할 수 있는 경우 Accelerate 없이 연산자를 다시 작성하는 것이 좋습니다.

흔들리는 거품

따라서 이미 말했듯이 애니메이션의 단계를 다음과 같이 정의해야 합니다. AnimatableVector 그래서 SwiftUI는 모든 프레임 사이를 마술처럼 그릴 수 있습니다.

원으로 이를 수행하려면 먼저 어떻게든 원을 사용할 수 있도록 해야 합니다. 동요. 이것은 곡선을 사용한 근사를 통해 수행됩니다. 모핑 효과를 만들기 위해 AnimatableVector 모든 특정 지점에서 반경을 수정합니다.

그게 다야

벡터의 첫 번째 좌표는 첫 번째 근사점의 거리에 얼마나 더해야 하는지 알려줍니다. 두 번째는 두 번째 점 등에 대한 것입니다.

아래 gif에서 모든 특정 지점의 반경이 어떻게 변하고 SwiftUI가 부드럽게 변하는지 볼 수 있습니다. 곡선의 제어점도 표시됩니다.

애니메이션의 개념이 결정됩니다. 코딩할 시간입니다!

내가 말했듯이 주요 아이디어는 곡선으로 원을 근사하는 것입니다. 대략적인 제어점은 다음과 같습니다. (4/3)*tan(pi/(2n)) 가 있는 원의 한 점으로부터의 거리 n 세그먼트.

우리는 다음을 준수하는 객체로 원을 나타낼 것입니다. Shape 규약. SwiftUI가 애니메이션할 대상을 알기 위해서는 다음을 정의해야 합니다. animatableData 특성. 이것이 SwiftUI가 프레임 사이에 애니메이션을 적용하는 데 사용할 것입니다.

약간의 선형 대수와 모든 점 좌표가 계산됩니다. 에 대한 몇 가지 고급 작업 CGVector 그리고 CGPoint 필요합니다:

마지막으로 구현 Shape:

마지막으로 View에서 이 모양을 사용할 수 있습니다. 흔들림 효과를 만들기 위해서는 반경 수정을 담당하는 벡터를 변경해야 합니다.

이것은 타이머로 할 수 있습니다.

타이머 사용

타이머의 콜백에서 모핑 벡터를 무작위로 변경할 것입니다. 또한 한 번에 모든 포인트를 변경하는 것이 이상해 보이므로 일부만 애니메이션으로 만들 것입니다.

예를 들어 생성된 거품을 결합하고 애니메이션하여 화면 주위를 표류할 수 있습니다. 또한 이 가이드를 진행하면서 AnimatableVector 프로젝트에서 사용할 수 있는 구조입니다.

결과를 자유롭게 공유하세요!

더 흔들리는 거품

블로그에서 내 iOS 섹션을 확인하여 더 유용한 팁을 알아보세요.