✍️
참고
주의하세요! Phase에서는 항상 업데이트와 개선이 거의 이루어지지 않습니다. 우리의 튜토리얼은 현재 앱과 약간 다를 수 있습니다.
트림 패스
트림 패스는 모션 그래픽과 벡터 기반 애니메이션에 더 풍부한 움직임을 표현하는 데 효과적인 기법입니다. 시간이 지남에 따라 패스를 따라 스트로크를 트리밍하거나 그리는 애니메이션을 적용하여 움직임이나 변형 효과를 만들 수 있습니다. 이 기법을 사용하면 도형이나 선의 특정 부분을 드러내거나 숨길 수 있어 역동적인 시각 효과를 연출할 수 있습니다.
트림 패스 만들기
트림 패스 메뉴 열기
- 트림 패스 효과를 적용할 도형을 그립니다. 간단한 직사각형, 원 또는 사용자 지정 벡터 패스도 가능합니다.
- 속성 패널에서 효과 옆에 있는 기호를 클릭하여 트림 패스 기능을 이용합니다. 이 작업을 수행하면 트림 패스 도구 상자가 나타납니다.
- 재생 헤드를 원하는 시작 지점으로 이동합니다. 보통 0초가 될 것입니다.
- 트림 패스의 시작과 끝을 각각 100%로 설정합니다.
- 플레이 해드를 원하는 끝 지점으로 이동합니다.
- 트림 패스의 시작을 0%로 설정하고 끝을 100%로 설정합니다. 0%인 경우 선이 보입니다재생을 누릅니다.
✍️
주의
특히 복잡한 애니메이션이나 특정 도형에서 트림 패스 애니메이션으로 채우기를 사용할 때는 주의하세요. 디자인이나 애니메이션에 따라 예상치 못한 시각 효과가 나타날 수 있습니다.
예를 들어, 채우기가 트림 패스 애니메이션에 제대로 정렬되지 않으면 원하지 않는 색상 변경이나 도형 모양에 일관성이 없는 현상이 발생할 수 있습니다. 또한 트림 패스 애니메이션에 패스 지우기가 포함된 경우 채우기 색상이 패스와 함께 삭제되어 의도하지 않은 효과가 발생할 수 있습니다.
항상 모든 애니메이션을 철저히 테스트하여 트림 패스 애니메이션 전체에서 채우기가 예상한 대로 동작하는지 확인하십시오.
도형은 기본적으로 0%에서 시작하고 100%에서 끝나지만 이 값을 조정하여 트림의 시작점과 끝점의 위치를 변경할 수 있습니다. 두 지점을 모두 100%로 설정하면 경로가 완전히 잘라져 캔버스에서 보이지 않게 됩니다. 반면 두 점을 모두 0%로 설정하면 선이 보이지 않게 됩니다.
오프셋
오프셋을 사용하여 팩맨 애니메이션 만들기
이전 단계에서는 오프셋과 키프레임을 구성하여 팩맨과 같은 애니메이션을 만들 수 있었습니다. 이를 통해 복잡하게 반복되는 패턴을 만들 수 있었기 때문에 열고 닫는 모션과 같은 다이내믹한 효과에 적합했습니다. 오프셋을 20%, 시작 지점을 10%로 설정하고 끝 지점을 100%로 유지했습니다. 그런 다음 이어지는 각 키프레임에 대해 오프셋 값을 변경하지 않고 이 시퀀스를 여러 번 반복하면서 20%에서 100%까지 애니메이션을 적용했습니다.
잘 모르는 분들을 위해 설명하자면, 트림 패스의 오프셋 속성은 애니메이션이 시작되는 경로의 지점을 나타냅니다. 이를 통해 패스를 따라 다듬을 애니메이션의 시작 위치를 설정할 수 있습니다. 패스 다듬기 애니메이션은 이 오프셋 지점에서 시작하여 애니메이션이 이동하면서 패스를 따라 움직입니다.
오프셋을 0%로 설정하면 트림 패스가 도형의 시작 부분에서 바로 시작됩니다. 간단히 말해서 패스의 보이는 부분이 도형의 시작점에서 시작됩니다. 오프셋 값이 증가하면 패스를 따라 트림의 시작점이 옮겨 집니다. 따라서 오프셋을 50%로 설정하면 트림이 패스의 중간에서 시작되어 도형의 후반부만 보입니다.
트림 패스 모드
트림 패스 모드 간의 차이를 보여주기
트림 패스 모드는 시간이 지남에 따라 패스를 표시하거나 지울 때 트림 패스 애니메이션이 작동하는 방식을 관리하는 옵션 또는 설정입니다. 이 모드는 애니메이션이 진행됨에 따라 애니메이션의 시작점과 끝점이 변경되는 방법을 결정합니다.
트림 패스를 적용하려면 모든 도형을 컨테이너로 그룹화하고 트림 패스를 컨테이너에 적용합니다. 모드 간에 이동하려면 드롭다운 메뉴를 사용합니다.
트림 패스 모드에는 두 가지 주요 모드가 있습니다: 동시모드과 개별모드입니다.
동시 모드
이 모드에서는 트림 패스 애니메이션의 시작점과 끝점이 모두 패스를 따라 함께 이동합니다. 애니메이션이 진행됨에 따라 패스의 보이는 부분이 서로 다른 위치에서 시작되고 끝나므로 동기화된 보기 또는 지우기 효과가 생성됩니다. 이 모드는 애니메이션이 전체 패스를 동일한 속도로 균일하게 표시하거나 지우도록 하려는 경우에 사용됩니다.
개별모드
이 모드에서는 트림 패스 애니메이션의 시작점과 끝점을 별도로 관리할 수 있습니다. 애니메이션이 진행됨에 따라 패스가 시작되는 위치와 끝나는 위치를 따로 설정할 수 있습니다. 따라서 패스를 표시하거나 지우는 방식에서 더 큰 유연성과 창의성을 발휘할 수 있습니다. 패스를 한 쪽에서 다른 쪽으로 그리거나 독특한 패턴으로 지우는 등의 효과를 만들 수 있습니다.
애니메이션을 바로 시작해보세요
저희 무료 웹 기반 플랫폼으로 시작해보세요.