Pixi’VNAnimazione (motion)
Scopri come animare i componenti canvas di Pixi’VN utilizzando la funzione canvas.animate, con esempi di movimento, rotazione, dissolvenza, zoom e capovolgimento.
Pixi’VN consente agli sviluppatori di animare i componenti canvas utilizzando una funzione chiamata canvas.animate. Questa funzione è una reimplementazione della funzione animate della libreria motion, adattata per utilizzare i ticker di PixiJS per attivare gli eventi di animazione.
Utilizzo
canvas.animate è una delle funzioni più usate in Pixi’VN ed è progettata per essere semplice da usare, anche se il concetto alla base potrebbe non essere immediatamente ovvio all'inizio. L'idea è semplice: definisci uno stato di destinazione per un componente canvas (ad es. una posizione, una scala o un'opacità) e una durata, e Pixi’VN farà passare gradualmente il componente a quello stato, fotogramma dopo fotogramma. Una volta raggiunto l'obiettivo, l'animazione termina automaticamente.
Ad esempio, per spostare un componente nella posizione { x: 100, y: 50 } in un secondo, passi { x: 100, y: 50 } come keyframes e { duration: 1 } come options. Il parametro keyframes definisce cosa raggiungere; options definisce come arrivarci.
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.
Ecco alcuni esempi: