Pixi’VNAnimer (motion)
Découvrez comment animer les composants canvas de Pixi’VN à l'aide de la fonction canvas.animate, avec des exemples de mouvement, rotation, fondu, zoom et effet miroir.
Pixi’VN permet aux développeurs d'animer des composants canvas à l'aide d'une fonction appelée canvas.animate. Cette fonction est une réimplémentation de la fonction animate de la bibliothèque motion, adaptée pour utiliser les tickers de PixiJS afin de déclencher les événements d'animation.
Utiliser
canvas.animate est l'une des fonctions les plus utilisées dans Pixi’VN et elle est conçue pour être simple à utiliser — même si le concept sous-jacent peut ne pas être immédiatement évident au premier abord. L'idée est simple : vous définissez un état cible pour un composant canvas (par exemple une position, une échelle ou une opacité) et une durée, et Pixi’VN fera passer le composant à cet état de manière fluide, image par image. Une fois la cible atteinte, l'animation se termine automatiquement.
Par exemple, pour déplacer un composant à la position { x: 100, y: 50 } en une seconde, vous passez { x: 100, y: 50 } comme keyframes et { duration: 1 } comme options. Le paramètre keyframes définit quoi atteindre ; options définit comment y parvenir.
canvas.animate crée un Ticker en interne. For advanced use cases — such as pausing, resuming, or stopping an animation — you can use the functions available to control Pixi’VN Tickers.
Voici quelques exemples :