Pixi’VNAnimar (motion)
Aprende a animar componentes canvas de Pixi’VN usando la función canvas.animate, con ejemplos de movimiento, rotación, desvanecimiento, zoom y efecto espejo.
Pixi’VN permite a los desarrolladores animar componentes canvas usando una función llamada canvas.animate. Esta función es una reimplementación de la función animate de la biblioteca motion, adaptada para usar los tickers de PixiJS para activar eventos de animación.
Usar
canvas.animate es una de las funciones más utilizadas en Pixi’VN y está diseñada para ser sencilla de usar, aunque el concepto subyacente puede no resultar evidente al principio. La idea es simple: defines un estado objetivo para un componente canvas (por ejemplo, una posición, escala u opacidad) y una duración, y Pixi’VN hará la transición del componente a ese estado de manera fluida, fotograma a fotograma. Una vez alcanzado el objetivo, la animación termina automáticamente.
Por ejemplo, para mover un componente a la posición { x: 100, y: 50 } en un segundo, pasas { x: 100, y: 50 } como keyframes y { duration: 1 } como options. El parámetro keyframes define qué alcanzar; options define cómo llegar allí.
canvas.animate crea internamente un Ticker. For advanced use cases — such as pausing, resuming, or stopping an animation — you can use the functions available to control Pixi’VN Tickers.
Aquí tienes algunos ejemplos: