Visualizza animazione

Prova Compose

Jetpack Compose è il toolkit UI consigliato per Android. Scopri come utilizzare le animazioni in Compose.

Animare le proprietà →

Puoi utilizzare il sistema di animazione delle visualizzazioni per eseguire un'animazione tweened sulle visualizzazioni. L'animazione tweened calcola l'animazione con informazioni come il punto di partenza, il punto di arrivo, le dimensioni, la rotazione e altri aspetti comuni di un'animazione.

Un'animazione tweened può eseguire una serie di trasformazioni semplici (posizione, dimensioni, rotazione, e trasparenza) sui contenuti di un oggetto View. Pertanto, se hai un oggetto TextView, puoi spostare, ruotare, ingrandire o ridurre il testo. Se ha un' immagine di sfondo, questa verrà trasformata insieme al testo. Il animation package fornisce tutte le classi utilizzate in un'animazione tweened.

Una sequenza di istruzioni di animazione definisce l'animazione tweened, definita da codice XML o Android. Come per la definizione di un layout, è consigliabile utilizzare un file XML perché è più leggibile, riutilizzabile e sostituibile rispetto alla codifica hardcoded dell'animazione. Nell'esempio seguente viene utilizzato XML. (Per saperne di più sulla definizione di un'animazione nel codice dell'applicazione anziché in XML, consulta la classe AnimationSet e altre sottoclassi Animation.)

Le istruzioni di animazione definiscono le trasformazioni che vuoi che si verifichino, quando si verificheranno e per quanto tempo devono essere applicate. Le trasformazioni possono essere sequenziali o simultanee . Ad esempio, puoi fare in modo che i contenuti di un TextView si spostino da sinistra a destra e poi ruotino di 180 gradi oppure che il testo si sposti e ruoti contemporaneamente. Ogni trasformazione accetta un insieme di parametri specifici per quella trasformazione (dimensioni iniziali e finali per la modifica delle dimensioni, angolo iniziale e finale per la rotazione e così via), nonché un insieme di parametri comuni (ad esempio, ora di inizio e durata). Per fare in modo che più trasformazioni avvengano contemporaneamente, assegna loro la stessa ora di inizio; per renderle sequenziali, calcola l'ora di inizio più la durata della trasformazione precedente.

Il file XML di animazione si trova nella directory res/anim/ del progetto Android. Il file deve avere un singolo elemento root: si tratta di un singolo <alpha>, <scale>, <translate>, <rotate>, elemento interpolatore o <set> che contiene gruppi di questi elementi (che possono includere un altro <set>). Per impostazione predefinita, tutte le istruzioni di animazione vengono applicate contemporaneamente. Per farle avvenire in sequenza, devi specificare l'attributo startOffset, come mostrato nell'esempio seguente.

Il seguente XML di uno degli ApiDemos viene utilizzato per allungare, quindi ruotare e ruotare contemporaneamente un oggetto View.

<set android:shareInterpolator="false">
    <scale
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:fromXScale="1.0"
        android:toXScale="1.4"
        android:fromYScale="1.0"
        android:toYScale="0.6"
        android:pivotX="50%"
        android:pivotY="50%"
        android:fillAfter="false"
        android:duration="700" />
    <set android:interpolator="@android:anim/decelerate_interpolator">
        <scale
           android:fromXScale="1.4"
           android:toXScale="0.0"
           android:fromYScale="0.6"
           android:toYScale="0.0"
           android:pivotX="50%"
           android:pivotY="50%"
           android:startOffset="700"
           android:duration="400"
           android:fillBefore="false" />
        <rotate
           android:fromDegrees="0"
           android:toDegrees="-45"
           android:toYScale="0.0"
           android:pivotX="50%"
           android:pivotY="50%"
           android:startOffset="700"
           android:duration="400" />
    </set>
</set>

Le coordinate dello schermo (non utilizzate in questo esempio) sono (0,0) nell'angolo in alto a sinistra e aumentano man mano che si scende e si va a destra.

Alcuni valori, come pivotX, possono essere specificati in relazione all'oggetto stesso o al relativo elemento padre. Assicurati di utilizzare il formato corretto per ciò che vuoi ("50" per il 50% rispetto all'elemento padre, o "50%" per il 50% rispetto a se stesso).

Puoi determinare come viene applicata una trasformazione nel tempo assegnando un Interpolator. Android include diverse sottoclassi Interpolator che specificano varie curve di velocità: ad esempio, AccelerateInterpolator indica a una trasformazione di iniziare lentamente e accelerare. Ognuna ha un valore dell'attributo che può essere applicato in XML.

Con questo XML salvato come hyperspace_jump.xml nella directory res/anim/ del progetto, il seguente codice lo farà riferimento e lo applicherà a un oggetto ImageView del layout.

AnimationUtils.loadAnimation(this, R.anim.hyperspace_jump).also { hyperspaceJumpAnimation ->
    findViewById<ImageView>(R.id.spaceshipImage).startAnimation(hyperspaceJumpAnimation)
}

ImageView spaceshipImage = (ImageView) findViewById(R.id.spaceshipImage);
Animation hyperspaceJumpAnimation = AnimationUtils.loadAnimation(this, R.anim.hyperspace_jump);
spaceshipImage.startAnimation(hyperspaceJumpAnimation);

In alternativa a startAnimation(), puoi definire un'ora di inizio per l' animazione con Animation.setStartTime(), quindi assegnare l'animazione alla visualizzazione con View.setAnimation().

Per saperne di più sulla sintassi XML, sui tag e sugli attributi disponibili, consulta Risorse di animazione.

Nota: indipendentemente da come l'animazione può spostarsi o ridimensionarsi, i limiti della visualizzazione che la contiene non si adatteranno automaticamente per ospitarla. Tuttavia, l'animazione verrà comunque disegnata oltre i limiti della visualizzazione e non verrà ritagliata. Tuttavia, il ritaglio si verificherà se l'animazione supera i limiti della visualizzazione principale.