Pixi’VNAnimate (motion)
Learn how to animate Pixi’VN canvas components using the canvas.animate function, including examples of movement, rotation, fading, zooming, and mirroring.
Pixi’VN allows developers to animate canvas components using a function called canvas.animate. This function is a re-implementation of the animate function from the motion library, adapted to use PixiJS tickers for triggering animation events.
Use
canvas.animate is one of the most commonly used functions in Pixi’VN and is designed to be straightforward — though the underlying concept may not be immediately obvious at first. The idea is simple: you define a target state for a canvas component (e.g. a position, scale, or opacity) and a duration, and Pixi’VN will smoothly transition the component to that state frame by frame. Once the target is reached, the animation ends automatically.
For example, to move a component to position { x: 100, y: 50 } over one second, you pass { x: 100, y: 50 } as the keyframes and { duration: 1 } as the options. The keyframes parameter defines what to reach; options defines how to get there.
canvas.animate internally creates a Ticker. For advanced use cases — such as pausing, resuming, or stopping an animation — you can use the functions available to control Pixi’VN Tickers.
Here are some examples: