Pixi’VN애니메이션 (motion)
canvas.animate 함수를 사용하여 Pixi’VN 캔버스 컴포넌트에 애니메이션을 적용하는 방법을 알아보세요. 이동, 회전, 페이드, 확대/축소, 미러링 예제를 포함합니다.
Pixi’VN을 사용하면 개발자는 canvas.animate라는 함수를 사용하여 캔버스 컴포넌트에 애니메이션을 적용할 수 있습니다. 이 함수는 motion 라이브러리의 animate 함수를 재구현한 것으로, 애니메이션 이벤트를 트리거하기 위해 PixiJS 티커를 사용하도록 조정되었습니다.
사용
canvas.animate는 Pixi’VN에서 가장 자주 사용되는 함수 중 하나이며, 사용하기 쉽도록 설계되었습니다. 다만 그 기본 개념은 처음에는 바로 와닿지 않을 수 있습니다. 아이디어는 간단합니다. 캔버스 컴포넌트의 목표 상태(예: 위치, 크기, 불투명도)와 지속 시간을 정의하면, Pixi’VN이 프레임마다 컴포넌트를 해당 상태로 부드럽게 전환합니다. 목표에 도달하면 애니메이션은 자동으로 종료됩니다.
예를 들어, 컴포넌트를 1초 동안 { x: 100, y: 50 } 위치로 이동시키려면, keyframes로 { x: 100, y: 50 }를, options로 { duration: 1 }를 전달합니다. keyframes 매개변수는 무엇을 달성할지를 정의하고, options는 어떻게 달성할지를 정의합니다.
canvas.animate는 내부적으로 Ticker를 생성합니다. For advanced use cases — such as pausing, resuming, or stopping an animation — you can use the functions available to control Pixi’VN Tickers.
다음은 몇 가지 예제입니다.