Pixi’VNAnimieren (motion)
Erfahre, wie du Pixi’VN-Canvas-Komponenten mit der Funktion canvas.animate animierst, mit Beispielen für Bewegung, Rotation, Ein-/Ausblenden, Zoomen und Spiegeln.
Mit Pixi’VN können Entwickler Canvas-Komponenten mit einer Funktion namens canvas.animate animieren. Diese Funktion ist eine Neuimplementierung der Funktion animate aus der Bibliothek motion, angepasst, um PixiJS-Ticker zum Auslösen von Animationsereignissen zu verwenden.
Verwenden
canvas.animate ist eine der am häufigsten verwendeten Funktionen in Pixi’VN und wurde so gestaltet, dass sie einfach zu verwenden ist — auch wenn das zugrunde liegende Konzept auf den ersten Blick nicht sofort offensichtlich sein mag. Die Idee ist einfach: Du definierst einen Zielzustand für eine Canvas-Komponente (z. B. eine Position, Skalierung oder Deckkraft) und eine Dauer, und Pixi’VN wird die Komponente Bild für Bild sanft in diesen Zustand überführen. Sobald das Ziel erreicht ist, endet die Animation automatisch.
Um beispielsweise eine Komponente innerhalb einer Sekunde an die Position { x: 100, y: 50 } zu bewegen, übergibst du { x: 100, y: 50 } als keyframes und { duration: 1 } als options. Der Parameter keyframes definiert, was erreicht werden soll; options definiert, wie es erreicht werden soll.
canvas.animate erstellt intern einen Ticker. Für fortgeschrittene Anwendungsfälle — wie das Pausieren, Fortsetzen oder Stoppen einer Animation — kannst du die Funktionen zur Steuerung von Pixi’VN-Tickern verwenden.
Hier sind einige Beispiele: