このページは Cloud Translation API によって翻訳されました。

タイルアニメーション

タイルでは、次のようなさまざまなアニメーションアプローチがサポートされています。

トゥイーンアニメーションを使用したスイープ遷移
タイル内外へのアニメーションのスムーズなフェードとスライド
Lottie アニメーション。

スイープ遷移を表示する

ある値から別の値へのスムーズなスイープを表示するには、次のコードスニペットに示すように、要素のトゥイーンアニメーションを有効にします。

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

円弧の方向を設定する

タイルに弧が含まれている場合、弧の線やテキストがユーザーが選択した言語のデフォルトのテキスト方向で常に拡大されることを望まないことがあります。円弧の成長方向を指定するには、ArcDirection API を使用します。

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

スムーズなフェードまたはスライドを表示する

明確にタイルでの要素の表示と非表示を表したり、タイルの値の段階的な変化を自然に示したりするには、タイルアニメーションでフェード効果とスライド効果を使用します。

タイルレイアウトに値が変更された要素が含まれている場合、タイルは要素の終了アニメーションを表示した後で、レイアウトを更新して要素の開始アニメーションを表示します。

フェード遷移

次のコードスニペットは、DefaultContentTransitions のヘルパーメソッドを使用して、フェードインとフェードアウトの遷移を実行する方法を示しています。カスタムの FadeInTransition オブジェクトと FadeOutTransition オブジェクトを定義するには、遷移セッターメソッドで setFadeIn() と setFadeOut() をそれぞれ呼び出します。

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

スライド遷移

このコードスニペットは DefaultContentTransitions のヘルパーメソッドを使用して、スライドインとスライドアウトの遷移を実行する方法を示しています。カスタムの SlideInTransition オブジェクトと SlideOutTransition オブジェクトを定義する場合は、遷移セッターメソッドで setSlideIn() と setSlideOut() をそれぞれ呼び出します。

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

変換を表示する

タイル内の特定の要素や領域に注目を集めるために、回転、スケーリング、変換など、いくつかの種類の変換を適用できます。

変換に関連付けられた多くの浮動小数点値は、動的式を受け入れます。これにより、これらの変換をアニメーション化できます。

回転

カスタマイズ可能なピボットポイントを中心とした時計回りの回転を実行するには、次のようなコードを使用します。

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

スケーリング

要素を水平方向と垂直方向のスケーリングファクタで拡大または縮小するには、次のようなコードを使用します。

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

幾何変換

画面上で要素を特定の数の密度ピクセル（dp）だけ水平または垂直に移動するには、次のようなコードを使用します。

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

Lottie アニメーション

タイルは、画像と同様の構文を使用して、Lottie アニメーションの再生をサポートしています。

class LottieAnimation : TileService() {

    val lottieResourceId = "lottie_animation"

    override fun onTileRequest(requestParams: RequestBuilders.TileRequest): ListenableFuture<Tile> {

        val layout =
            LayoutElementBuilders.Image.Builder()
                .setWidth(dp(150f))
                .setHeight(dp(150f))
                .setResourceId(lottieResourceId)
                .build()

        return Futures.immediateFuture(
            Tile.Builder()
                .setResourcesVersion(RESOURCES_VERSION)
                .setTileTimeline(Timeline.fromLayoutElement(layout))
                .build()
        )
    }

    override fun onTileResourcesRequest(
        requestParams: ResourcesRequest
    ): ListenableFuture<Resources> {

        val lottieImage =
            ResourceBuilders.ImageResource.Builder()
                .setAndroidLottieResourceByResId(
                    ResourceBuilders.AndroidLottieResourceByResId.Builder(R.raw.lottie)
                        .setStartTrigger(createOnVisibleTrigger())
                        .build()
                )
                .build()

        return Futures.immediateFuture(
            Resources.Builder()
                .setVersion(requestParams.version)
                .addIdToImageMapping(lottieResourceId, lottieImage)
                .build()
        )
    }
}
Animations.kt

次の点にご注意ください。

サポートされているのは Lottie ファイルの一部のみです。次のいずれかの検証ツールを使用して互換性を確認します。
- オンライン検証ツール: https://skottie.skia.org/。[Compatibility Report] セクションで、ファイルは [Specification Errors]、[Specification Warnings]（Common Properties は無視）、[Low Power Profile Errors] のテストに合格する必要があります。
- Rust 検証ライブラリ: https://github.com/google/lottie-tools。
Lottie の再生は、メジャーバージョンが 1 以上、マイナーバージョンが 500 以上のタイルレンダラでサポートされます。指定されたアニメーションがサポートされていない場合、アニメーションは表示されませんが、タイルの残りの部分は想定どおりにレンダリングされます。必要に応じて、静止画像などのフォールバックオプションを指定できます。

アニメーションの途中で重要な情報を表示しない

次のような状況ではアニメーションが無効になります。

システムのタイルレンダリングにより、すべてのタイルのアニメーションが無効になることがあります。
タイルは一度に 4 つの要素のみアニメーション化できます。4 つを超える要素を同時にアニメーション化しようとすると、一部のアニメーションのみ表示されます。

アニメーションが無効になっている場合、要素は静的となりアニメーションの終了値を表示します。そのため、重要な情報を表示する場合は、アニメーションの長さなどの動作に依存しないようにします。

タイル アニメーション コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。