Kachelanimationen

Es gibt verschiedene Möglichkeiten, Kacheln zu animieren:

Schwenk-Übergang anzeigen

Wenn Sie einen reibungslosen Übergang von einem Wert zum nächsten anzeigen möchten, können Sie Tween-Animationen für ein Element aktivieren, wie im folgenden Code-Snippet gezeigt:

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

Bogenrichtung festlegen

Wenn Ihre Kachel einen Bogen enthält, möchten Sie möglicherweise nicht, dass die Bogenlinie oder der Text immer in der Standardtextrichtung für die ausgewählte Sprache des Nutzers wächst. Verwenden Sie die ArcDirection APIs, um die Wachstumsrichtung eines Bogens anzugeben:

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

Eine glatte Überblendung oder einen reibungslosen Übergang anzeigen

Wenn Sie deutlicher zeigen möchten, dass ein Element in einer Kachel erscheint oder verschwindet, oder eine Stufenänderung des Werts einer Kachel dezenter darstellen möchten, verwenden Sie in Ihren Kachelanimationen Einblend- und Schiebeeffekte.

Wenn ein Ansichtslayout ein Element enthält, dessen Wert sich ändert, wird in der Ansicht die Ausblendungsanimation des Elements angezeigt. Anschließend wird das Layout aktualisiert und die Einblendungsanimation des Elements wird wiedergegeben.

Übergänge mit Ausblendung

Das folgende Code-Snippet zeigt, wie mithilfe der Hilfsmethoden von DefaultContentTransitions Übergänge mit Ein- und Ausblenden ausgeführt werden. Wenn Sie benutzerdefinierte FadeInTransition- und FadeOutTransition-Objekte definieren möchten, rufen Sie in den Methoden zum Festlegen der Übergänge jeweils setFadeIn() und setFadeOut() auf.

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

Folienübergänge

Dieses andere Code-Snippet zeigt, wie Sie mithilfe der Hilfsmethoden von DefaultContentTransitions Ein- und Ausblendübergänge ausführen. Sie können auch benutzerdefinierte SlideInTransition- und SlideOutTransition-Objekte definieren, indem Sie in den Methoden zum Festlegen der Übergänge jeweils setSlideIn() und setSlideOut() aufrufen.

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

Transformation anzeigen

Wenn Sie die Aufmerksamkeit auf ein bestimmtes Element oder einen bestimmten Bereich in einer Kachel lenken möchten, können Sie verschiedene Arten von Transformationen anwenden, z. B. Drehung, Skalierung und Verschiebung.

Viele Gleitkommawerte, die mit Transformationen verknüpft sind, akzeptieren dynamische Ausdrücke, mit denen sich diese Transformationen animieren lassen.

Ausrichtung

Wenn Sie eine Drehung im Uhrzeigersinn um einen anpassbaren Drehpunkt ausführen möchten, verwenden Sie Code, der dem folgenden ähnelt:

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

Skalierung

Wenn Sie ein Element horizontal und vertikal skalieren möchten, verwenden Sie Code wie den folgenden:

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

Geometrische Verschiebung

Wenn Sie ein Element horizontal oder vertikal um eine bestimmte Anzahl von Dichtepixeln (dp) auf dem Bildschirm verschieben möchten, verwenden Sie Code wie den folgenden:

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

Wichtige Informationen nicht in der Mitte einer Animation anzeigen

In folgenden Fällen sind Animationen deaktiviert:

  • Durch das Kachel-Rendering des Systems werden möglicherweise Animationen für alle Kacheln deaktiviert.
  • Auf einer Kachel können jeweils nur vier Elemente animiert werden. Wenn Sie versuchen, mehr als vier Elemente gleichzeitig zu animieren, wird nicht für alle eine Animation angezeigt.

Wenn eine Animation deaktiviert ist, sind die Elemente statisch und zeigen den Endwert der Animation an. Verwenden Sie daher nicht das Verhalten der Animation, z. B. die Dauer, um wichtige Informationen zu präsentieren.