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. Pour des cas d'utilisation avancés — comme mettre en pause, reprendre ou arrêter une animation — vous pouvez utiliser les fonctions disponibles pour contrôler les Tickers de Pixi’VN.
Voici quelques exemples :