Animações de blocos

É possível animar os blocos de algumas maneiras diferentes, incluindo:

Mostrar uma transição de varredura

Para mostrar uma transição Limpar suave de um valor para outro, ative as animações de interpolação de um elemento, conforme mostrado no snippet de código abaixo:

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

Definir direção do arco

Se o bloco tiver um arco, talvez você não queira que a linha do arco ou o texto cresçam sempre na direção de texto padrão do idioma escolhido pelo usuário. Para especificar uma direção de crescimento de arco, use as APIs 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

Mostrar um deslize ou esmaecimento suave

Para indicar mais claramente que um elemento está aparecendo ou desaparecendo em um bloco ou para mostrar de forma mais sutil uma mudança de etapa no valor de um bloco, use os efeitos de esmaecer e deslizar nas animações de blocos.

Se um layout de blocos tiver um elemento que muda de valor, o bloco vai mostrar a animação de saída do elemento, atualizar o layout e mostrar a animação de entrada do elemento.

Transições Esmaecer

O snippet de código abaixo demonstra como realizar transições de esmaecimento e exibição gradual usando os métodos auxiliares de DefaultContentTransitions. Para definir objetos FadeInTransition e FadeOutTransition personalizados, chame setFadeIn() e setFadeOut(), respectivamente, nos métodos setter da transição.

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

Transições de slides

Este outro snippet de código demonstra como realizar transições de deslize de entrada e saída usando os métodos auxiliares de DefaultContentTransitions (link em inglês). Também é possível definir objetos SlideInTransition e SlideOutTransition personalizados chamando setSlideIn() e setSlideOut(), respectivamente, nos métodos setter da transição.

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

Mostrar uma transformação

Para chamar a atenção para um elemento ou área específica em um Bloco, é possível aplicar vários tipos de transformações, incluindo: rotação, dimensionamento e translação.

Muitos valores de ponto flutuante associados a transformações aceitam expressões dinâmicas, que permitem animar essas transformações.

Rotação

Para realizar uma rotação no sentido horário em torno de um eixo personalizável, use um código semelhante ao seguinte:

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

Dimensionamento

Para aumentar ou diminuir um elemento por fatores de escalonamento horizontal e vertical, use um código semelhante ao seguinte:

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

Tradução geométrica

Para mover um elemento por um número específico de pixels de densidade (dp) na tela horizontal ou verticalmente, use um código semelhante ao seguinte:

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

Não mostrar informações importantes durante uma animação

Há várias situações em que as animações são desativadas:

  • A renderização de blocos do sistema pode desativar as animações de todos os blocos.
  • Um bloco pode animar apenas quatro elementos por vez. Se você tentar animar mais do que isso ao mesmo tempo, nem todos os elementos terão animações.

Quando uma animação é desativada, os elementos ficam estáticos e mostram o valor final da animação. Por esse motivo, não dependa do comportamento da animação, como a duração dela, para mostrar informações importantes.