Animazioni riquadri

Puoi animare i riquadri in diversi modi, tra cui:

Mostrare una transizione con movimento circolare

Per mostrare un passaggio graduale da un valore all'altro, puoi attivare le animazioni tween per un elemento, come mostrato nello snippet di codice seguente:

private var startValue = 15f
private var endValue = 105f
private val animationDurationInMillis = 2000L // 2 seconds

override fun onTileRequest(requestParams: RequestBuilders.TileRequest): ListenableFuture<Tile> {
    val circularProgressIndicator =
        CircularProgressIndicator.Builder()
            .setProgress(
                FloatProp.Builder(/* static value */ 0.25f)
                    .setDynamicValue(
                        // Or you can use some other dynamic object, for example
                        // from the platform and then at the end of expression
                        // add animate().
                        DynamicFloat.animate(
                            startValue,
                            endValue,
                            AnimationSpec.Builder()
                                .setAnimationParameters(
                                    AnimationParameters.Builder()
                                        .setDurationMillis(animationDurationInMillis)
                                        .build()
                                )
                                .build(),
                        )
                    )
                    .build()
            )
            .build()

    return Futures.immediateFuture(
        Tile.Builder()
            .setResourcesVersion(RESOURCES_VERSION)
            .setTileTimeline(Timeline.fromLayoutElement(circularProgressIndicator))
            .build()
    )
}
Animations.kt

Imposta la direzione dell'arco

Se il riquadro contiene un arco, potresti non volere che la linea o il testo dell'arco aumenti sempre nella direzione predefinita del testo per la lingua scelta dall'utente. Per specificare la direzione di crescita di un arco, utilizza le API ArcDirection:

public override fun onTileRequest(
    requestParams: RequestBuilders.TileRequest
): ListenableFuture<Tile> {
    return Futures.immediateFuture(
        Tile.Builder()
            .setResourcesVersion(RESOURCES_VERSION)
            .setTileTimeline(
                Timeline.fromLayoutElement(
                    EdgeContentLayout.Builder(deviceParameters)
                        .setResponsiveContentInsetEnabled(true)
                        .setEdgeContent(
                            Arc.Builder()
                                // Arc should always grow clockwise.
                                .setArcDirection(LayoutElementBuilders.ARC_DIRECTION_CLOCKWISE)
                                .addContent(
                                    ArcLine.Builder()
                                        // Set color, length, thickness, and more.
                                        // Arc should always grow clockwise.
                                        .setArcDirection(
                                            LayoutElementBuilders.ARC_DIRECTION_CLOCKWISE
                                        )
                                        .build()
                                )
                                .build()
                        )
                        .build()
                )
            )
            .build()
    )
}
Animations.kt

Mostrare una dissolvenza o una transizione graduale

Per indicare più chiaramente che un elemento viene visualizzato o nascosto in un riquadro o per mostrare in modo più sottile una variazione graduale del valore di un riquadro, utilizza gli effetti di dissolvenza e scorrimento nelle animazioni dei riquadri.

Se un layout dei riquadri contiene un elemento il cui valore cambia, il riquadro mostra l'animazione di uscita dell'elemento, quindi aggiorna il layout e mostra l'animazione di entrata dell'elemento.

Transizioni con dissolvenza

Il seguente snippet di codice mostra come eseguire transizioni di tipo fade-in e fade-out utilizzando i metodi di assistenza di DefaultContentTransitions. Per definire oggetti FadeInTransition e FadeOutTransition personalizzati, chiama setFadeIn() e setFadeOut(), rispettivamente, nei metodi setter della transizione.

public override fun onTileRequest(
    requestParams: RequestBuilders.TileRequest
): ListenableFuture<Tile> {
    // Assumes that you've defined a custom helper method called
    // getTileTextToShow().
    val tileText = getTileTextToShow()
    return Futures.immediateFuture(
        Tile.Builder()
            .setResourcesVersion(RESOURCES_VERSION)
            .setTileTimeline(
                Timeline.fromLayoutElement(
                    Text.Builder(this, tileText)
                        .setModifiers(
                            Modifiers.Builder()
                                .setContentUpdateAnimation(
                                    AnimatedVisibility.Builder()
                                        .setEnterTransition(DefaultContentTransitions.fadeIn())
                                        .setExitTransition(DefaultContentTransitions.fadeOut())
                                        .build()
                                )
                                .build()
                        )
                        .build()
                )
            )
            .build()
    )
}
Animations.kt

Transizioni di diapositive

Questo altro snippet di codice mostra come eseguire transizioni di scorrimento verso l'interno e verso l'esterno utilizzando i metodi di assistenza di DefaultContentTransitions. Puoi anche definire oggetti SlideInTransition e SlideOutTransition personalizzati chiamando rispettivamente setSlideIn() e setSlideOut() nei metodi di impostazione della transizione.

public override fun onTileRequest(
    requestParams: RequestBuilders.TileRequest
): ListenableFuture<Tile> {
    // Assumes that you've defined a custom helper method called
    // getTileTextToShow().
    val tileText = getTileTextToShow()
    return Futures.immediateFuture(
        Tile.Builder()
            .setResourcesVersion(RESOURCES_VERSION)
            .setTileTimeline(
                Timeline.fromLayoutElement(
                    Text.Builder(this, tileText)
                        .setModifiers(
                            Modifiers.Builder()
                                .setContentUpdateAnimation(
                                    AnimatedVisibility.Builder()
                                        .setEnterTransition(
                                            DefaultContentTransitions.slideIn(
                                                ModifiersBuilders.SLIDE_DIRECTION_LEFT_TO_RIGHT
                                            )
                                        )
                                        .setExitTransition(
                                            DefaultContentTransitions.slideOut(
                                                ModifiersBuilders.SLIDE_DIRECTION_LEFT_TO_RIGHT
                                            )
                                        )
                                        .build()
                                )
                                .build()
                        )
                        .build()
                )
            )
            .build()
    )
}
Animations.kt

Mostrare una trasformazione

Per attirare l'attenzione su un elemento o un'area specifici in un riquadro, puoi applicare diversi tipi di trasformazioni, tra cui rotazione, ridimensionamento e traslazione.

Molti valori in virgola mobile associati alle trasformazioni accettano espressioni dinamiche, che ti consentono di animare queste trasformazioni.

Rotazione

Per eseguire una rotazione in senso orario attorno a un punto di rotazione personalizzabile, utilizza un codice simile al seguente:

return Futures.immediateFuture(
    Tile.Builder()
        .setResourcesVersion(RESOURCES_VERSION)
        .setTileTimeline(
            Timeline.fromLayoutElement(
                Text.Builder(this, someTileText)
                    .setModifiers(
                        Modifiers.Builder()
                            .setTransformation(
                                ModifiersBuilders.Transformation.Builder()
                                    // Set the pivot point 50 dp from the left edge
                                    // and 100 dp from the top edge of the screen.
                                    .setPivotX(dp(50f))
                                    .setPivotY(dp(100f))
                                    // Rotate the element 45 degrees clockwise.
                                    .setRotation(degrees(45f))
                                    .build()
                            )
                            .build()
                    )
                    .build()
            )
        )
        .build()
)
Animations.kt

Scalabilità

Per aumentare o diminuire le dimensioni di un elemento in base a fattori di scala orizzontale e verticale, utilizza un codice simile al seguente:

return Futures.immediateFuture(
    Tile.Builder()
        .setResourcesVersion(RESOURCES_VERSION)
        .setTileTimeline(
            Timeline.fromLayoutElement(
                Text.Builder(this, someTileText)
                    .setModifiers(
                        Modifiers.Builder()
                            .setTransformation(
                                ModifiersBuilders.Transformation.Builder()
                                    // Set the pivot point 50 dp from the left edge
                                    // and 100 dp from the top edge of the screen.
                                    .setPivotX(dp(50f))
                                    .setPivotY(dp(100f))
                                    // Shrink the element by a scale factor
                                    // of 0.5 horizontally and 0.75 vertically.
                                    .setScaleX(FloatProp.Builder(0.5f).build())
                                    .setScaleY(
                                        FloatProp.Builder(0.75f).build()
                                    )
                                    .build()
                            )
                            .build()
                    )
                    .build()
            )
        )
        .build()
)
Animations.kt

Traslazione geometrica

Per spostare un elemento di un numero specifico di pixel di densità (dp) sullo schermo horizontalmente o verticalmente, utilizza un codice simile al seguente:

return Futures.immediateFuture(
    Tile.Builder()
        .setResourcesVersion(RESOURCES_VERSION)
        .setTileTimeline(
            Timeline.fromLayoutElement(
                Text.Builder(this, someTileText)
                    .setModifiers(
                        Modifiers.Builder()
                            .setTransformation(
                                ModifiersBuilders.Transformation.Builder()
                                    // Translate (move) the element 60 dp to the right
                                    // and 80 dp down.
                                    .setTranslationX(dp(60f))
                                    .setTranslationY(dp(80f))
                                    .build()
                            )
                            .build()
                    )
                    .build()
            )
        )
        .build()
)
Animations.kt

Non mostrare informazioni importanti nel mezzo di un'animazione

Esistono diverse situazioni in cui le animazioni sono disattivate:

  • Il rendering dei riquadri del sistema potrebbe disattivare le animazioni per tutti i riquadri.
  • Una scheda può animare solo 4 elementi alla volta. Se provi ad animare più di 4 elementi contemporaneamente, non tutti mostreranno un'animazione.

Se un'animazione è disattivata, gli elementi sono statici e mostrano il valore finale dell'animazione. Per questo motivo, non fare affidamento sul comportamento dell'animazione, come la sua durata, per mostrare informazioni importanti.