本頁面由 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 物件，請分別呼叫轉場 setter 方法中的 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 提供的輔助方法執行滑入和滑出轉場效果。您也可以分別呼叫轉場 setter 方法中的 setSlideIn() 和 setSlideOut()，定義自訂 SlideInTransition 和 SlideOutTransition 物件。

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/。在「相容性報告」部分中，檔案必須通過「規格錯誤」、「規格警告」(忽略通用屬性) 和「低功耗設定檔錯誤」測試。
- Rust 驗證程式庫：https://github.com/google/lottie-tools。
圖塊算繪器必須是主要版本至少為 1，次要版本至少為 500，才能支援 Lottie 播放。如果系統不支援特定動畫，該動畫就不會顯示，但圖塊的其餘部分會照常顯示。如有需要，您可以提供備用選項，例如靜態圖片。

不要在動畫播放期間顯示重要資訊

發生以下情況時，系統會停用動畫：

系統的資訊方塊轉譯功能可能會停用所有資訊方塊的動畫。
資訊方塊一次只能顯示 4 個元素的動畫。如果嘗試顯示超過 4 個元素的動畫，其中有些元素會無法顯示動畫。

如果動畫已停用，元素就會處於靜態，並呈現動畫最後的值。因此，請不要依賴動畫的行為 (例如動畫播放期間) 來顯示重要資訊。

資訊方塊動畫 透過集合功能整理內容 你可以依據偏好儲存及分類內容。