Animazione (motion)

Pixi'VN consente agli sviluppatori di animare i componenti canvas utilizzando una funzione chiamata animate. Questa funzione è una reimplementazione della funzione animate della libreria motion, adattata per utilizzare i ticker PixiJS per attivare eventi di animazione.

Cos'è motion? motion è una popolare libreria JavaScript che offre un modo semplice e potente per creare animazioni. Puoi leggere di più a riguardo qui.

Esistono due varianti di questa funzione:

• animate: Progettato per animare elementi PixiJS o Pixi'VN utilizzati per l'interfaccia utente. Pixi’VN non salva lo stato corrente delle animazioni create con questa funzione. Poiché è identico alla funzione animate di motion, non verrà spiegata ulteriormente qui.
• canvas.animate: Progettato per animare i componenti canvas di Pixi'VN. Salva lo stato corrente delle animazioni, consentendo di ripristinare lo stato di un'animazione da un salvataggio. Questa funzione presenta alcune differenze rispetto alla funzione originale animate, che verranno spiegate in dettaglio di seguito.

Usa

La funzione canvas.animate funziona come segue: Lo sviluppatore definisce uno stato del componente da raggiungere (ad esempio, la sua posizione x-y). Una volta avviata l'animazione, viene attivato continuamente un evento per aggiornare il componente finché non raggiunge lo stato desiderato. È possibile personalizzare ulteriormente l'animazione con varie opzioni.

Questa funzione ha i seguenti parametri:

• components: I componenti PixiJS da animare. Può trattarsi di un singolo componente, di un array di componenti o di una stringa che rappresenta l'alias del componente.
• keyframes: Si tratta di un oggetto contenente le proprietà da animare e i valori da raggiungere.
• options (Opzionale): Opzioni aggiuntive per l'animazione, tra cui durata, easing e ticker. Le seguenti opzioni estendono quelle di motion:
  • aliasToRemoveAfter (Opzionale): Una matrice di stringhe contenente gli alias dei componenti canvas da rimuovere al termine dell'animazione.
  • tickerIdToResume (Opzionale): Una stringa contenente l'id del ticker da riprendere al termine dell'animazione.
  • tickerAliasToResume (Opzionale): Se si desidera riprendere i ticker precedentemente sospesi, fornire gli alias dei componenti canvas i cui ticker devono essere ripresi.
  • forceCompleteBeforeNext (Opzionale): Un valore booleano che indica se l'animazione deve essere completata prima del successivo step del gioco. Se true, il gioco forzerà il completamento dell'animazione prima di procedere.
• priority (Opzionale): La priorità del ticker PixiJS. Questo parametro imposta la priorità del ticker. Il valore predefinito è UPDATE_PRIORITY.NORMAL.

La funzione restituisce l'id del ticker creato per animare i componenti.

Qui trovi alcuni esempi:

Sequenza

La funzione canvas.animate può essere utilizzata anche per creare sequenze di animazioni.

Per creare una sequenza, è possibile passare array come valori delle proprietà nell'oggetto keyframes. In questo caso, puoi usare la proprietà times per specificare la temporizzazione di ciascun fotogramma chiave.

Ad esempio:

import { canvas, newLabel, showImage } from "@drincs/pixi-vn";

export const startLabel = newLabel("start_label", [
    async () => {
        const alien = await showImage("alien"); 
        canvas.animate( 
            alien, 
            { 
                xAlign: [0, 1, 1, 0, 0], 
                yAlign: [0, 0, 1, 1, 0], 
            }, 
            { repeat: Infinity, duration: 10 } 
        ); 
    },
]);

Sequenze della linea temporale

Un altro modo per creare sequenze di animazione con canvas.animate è utilizzare una timeline. Ciò è utile quando si desidera concatenare più animazioni non strettamente lineari. È possibile fornire una matrice di fotogrammi chiave, in cui ogni fotogramma chiave è un oggetto con le proprietà da animare e i relativi valori, insieme ad opzioni di animazione facoltative.

Ad esempio:

import { canvas, newLabel, showImage } from "@drincs/pixi-vn";

export const startLabel = newLabel("start_label", [
    async () => {
        const alien = await showImage("alien"); 
        canvas.animate( 
            alien, 
            [ 
                [{ xAlign: 0, yAlign: 0 }, { ease: "circInOut" }], 
                [{ xAlign: 1, yAlign: 0 }, { ease: "backInOut" }], 
                [{ xAlign: 1, yAlign: 1 }, { ease: "linear" }], 
                [{ xAlign: 0, yAlign: 1 }, { ease: "anticipate" }], 
                [{ xAlign: 0, yAlign: 0 }, { ease: "easeOut" }], 
            ], 
            { repeat: 10, duration: 10 } 
        ); 
    },
]);

Metodi

La funzione canvas.animate è basata su Pixi'VN Tickers, quindi puoi utilizzare tutte le funzioni disponibili per controllare Pixi'VN Tickers.