✍️

참고

주의하세요! Phase에서는 항상 업데이트와 개선이 거의 이루어지지 않습니다. 우리의 튜토리얼은 현재 앱과 약간 다를 수 있습니다.

이징

애니메이션을 한 단계 업그레이드할 수 있는 Phase에서 사용할 수 있는 이징의 유형을 살펴보겠습니다. 이징을 추가하는 것은 어렵지 않습니다: Phase는 키프레임 사이의 위치와 속성을 자동으로 계산합니다.
✍️

참고

이 글은 이전 글에서 설명한 애니메이션 기본 사항, 키프레임 및 보간에 대한 사전 지식이 있다고 가정하고 작성되었습니다.
잠깐! 먼저 애니메이션에 익숙해져 봅시다.

이징 조정

이징 옵션 보기

키프레임의 이징을 조작하려면 키프레임을 선택하고 속성 패널 하단에 있는 이징 컨텍스트 메뉴로 이동합니다.

이징 패널

이징 패널은 애니메이션 곡선의 시각적 표현과 함께 이를 설정하기 위한 몇 가지 옵션을 제공합니다. 주요 목적은 애니메이션의 매끄러움을 관리하고 연속된 키프레임 간의 상호 작용을 제어하는 것입니다.
유형
이 메뉴 옆에 있는 미리 설정된 곡선 모양을 선택하여 빠르게 적용할 수 있습니다. 선택 항목에는 다음이 포함되어 있습니다: 이즈 인, 이즈 아웃, 이즈 인 아웃이 있습니다. 이러한 프리셋 곡선은 편집 과정을 더욱 편리하게 만들어 줍니다. 이징 유형은 다음 섹션에서 설명해 드립니다.
베지에
아래 곡선은 두 점으로 정의되며, 그 좌표가 여기에 표시됩니다. 곡선의 왼쪽 하단에 연결된 점(B)이 첫 번째이고 왼쪽 상단에 연결된 점(T)이 두 번째입니다. 따라서 여기에 표시된 B 좌표(0.5, 0)와 T 좌표(0.88, 0.77)로 나눌 수 있습니다. 또는 압축된 표기법으로 나타낼 수도 있습니다: [Bx, By, Tx, Ty]. 이러한 점들은 직접 수정하거나 아래 표시된 연결된 핸들바 스타일의 점을 조절하여 자동으로 업데이트할 수 있습니다.
곡선 그리드
이것은 베지에 부분에서도 언급했듯이 이동할 수 있는 두 개의 핸들바 스타일 포인트가 있는 곡선을 추상적으로 표현한 것입니다. 연결된 점을 고정된 기준점에서 멀리 이동하면(핸들바를 길게 만들면) 이징 효과가 더 드라마틱해지는 경향이 있는 반면, 핸들바를 짧게 하면 일반적으로 반대 효과가 발생하여 더 부드럽게 만들어집니다.

이징 유형

Phase에서 제공하는 이징 프리셋 전체 목록입니다. 앞서 언급했듯이 핸들바를 수동으로 설정하면 이징 유형이 '사용자 지정'으로 변경됩니다. 그러나 이러한 사용자 지정에도 불구하고 동작은 여전히 아래에 표시된 프리렛 유형과 일치할 수 있다는 점에 유의하세요.
단계
거의 사용되지 않는 이 보간 기법은 다음 키프레임까지 이전 값을 유지합니다. 갑작스럽고 드라마틱한 변화를 표현하는 데 효과적이며 특히 색상 변화가 있는 시나리오에서 효과적입니다.
선형
이 이징 유형은 키프레임 사이의 속도를 균일하게 유지하여 객체 이동의 일관된 속도를 보장합니다. 균일한 동작을 유지하는 데는 적합하지만, 변화가 있는 부분에서는 끊기는 현상이 있을 수 있으므로 신중하게 적용해야 합니다.
이징 인
부드럽게 시작하여 빠르고 갑작스럽게 끝나는 완만한 느낌을 줍니다. 종종 '이즈 아웃'과 짝을 이루는 이 유형은 특히 부드럽게 시작해야 할 때 키 프레임 간의 부드럽게 이어갈 수 있게 해당 유형과 함께 사용합니다.
이징 아웃
이러한 유형의 이징은 키프레임 사이의 속도를 균일하게 하고 일관된 동작을 유지합니다. 종종 '이즈 인'과 함께 사용하면 부드러운 마무리와 함께 다음 키프레임으로 부드럽게 이어져 더욱 자연스러운 장면 전환이 가능하며, 특히 '이즈 인' 커브의 부드러운 시작과 함께 사용하면 효과적입니다.
이징 인 아웃
이 커브를 사용하면 키 프레임 사이의 속도를 균일하게 유지할 수 있으므로 부드러운 전환 효과를 낼 수 있습니다. 부드럽고 균형 잡힌 애니메이션 효과를 위해 가장 일반적으로 사용되며, 이러한 이유로 이징에 많이 사용됩니다.
이징 인 백
이 이징 유형은 키프레임 간에 균일한 속도로 진행되는 데, 의도적으로 곡선을 과도하게 조정하는 것이 특징입니다. 이 의도적인 결함은 부드러우면서도 독특한 장면 전환을 가능하게 하여 애니메이션에 예측할 수 없는 느낌을 더합니다.
이징 아웃 백
이징 아웃 백 기능을 사용하여 곡선을 일부러 과도하게 조정하면서 키프레임 사이의 속도를 일정하게 유지합니다. 마무리 부분이 정확하지 않으면 장면 전환의 부드러움이 향상되고 애니메이션에 독특한 느낌을 줄 수 있습니다.
이징 인 아웃 백
이 곡선은 시작과 끝 부분을 과도하게 조정하여 중간에서 빠르게 전환합니다. 이 이징 유형은 불규칙하게 동작할 가능성이 있지만 예측할 수 없는 요소를 도입하는 데 효과적으로 활용할 수 있습니다.

베지에 곡선에 대하여

이름에서 알 수 있듯이 보간된 값은 베지에 곡선을 기반으로 계산됩니다. 이 곡선은 선택한 키프레임의 포인트, 즉 바로 앞의 키프레임에 의해 결정됩니다.
이 곡선은 이전 키프레임을 (0, 0)으로 설정하고 선택한 키프레임을 (1, 1)로 설정한 그리드에 표시됩니다. 이러한 점은 백엔드 전용 계산용이며 실제 값은 크게 다를 수 있으므로 움직일 수 없습니다.
움직일 수 있는 것은 설정된 키프레임 포인트에서 벗어나는 두 개의 핸들바입니다. 이 핸들바의 끝 부분은 곡선을 굽히는 방향 포인트입니다.
곡선이 이 점들에 닿는 경우는 거의 없지만 (0, 0) 및 (1, 1)에서 멀어질수록 곡선은 더 많이 구부러집니다. 수학 용어로 이러한 점들은 입방 베지어 곡선을 형성하지만, 점들이 같으면 이차 곡선이나 선형 곡선으로 크기가 줄어들 수 있습니다.
방향(핸들바) 포인트는 X 차원이 0에서 1 사이로 고정되지만, Y 차원은 음수이거나 1을 초과할 수 있으므로 애니메이션에 흔들림이나 변화가 생길 수 있습니다. 모든 ‘백’ 이징 모드에는 이러한 특성이 있습니다. 값은 +/- 200,000 이상일 수 있지만, 어느 방향이든 값이 높으면 전체 곡선에 미치는 영향이 줄어듭니다.

애니메이션을 바로 시작해보세요

저희 무료 웹 기반 플랫폼으로 시작해보세요.