Trang này được dịch bởi Cloud Translation API.

Ảnh động trong thẻ thông tin

Bạn có thể tạo ảnh động cho thẻ thông tin của mình theo một vài cách, bao gồm các cách sau đây:

Hiệu ứng quét khi chuyển tiếp sử dụng các ảnh động dạng tween.
Hiệu ứng làm mờ từ từ và trượt các ảnh động vào và ra khỏi thẻ thông tin.

Hiện hiệu ứng quét khi chuyển tiếp

Để hiện hiệu ứng quét một cách mượt mà từ giá trị này sang giá trị khác, bạn có thể bật chế độ ảnh động dạng tween cho một phần tử, như trong đoạn mã sau đây:

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

Đặt hướng vòng cung

Nếu thẻ thông tin của bạn chứa một vòng cung, bạn có thể không muốn dòng hoặc văn bản vòng cung luôn phát triển theo hướng văn bản mặc định cho ngôn ngữ mà người dùng đã chọn. Để chỉ định hướng phát triển của vòng cung, hãy sử dụng các 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

Hiện hiệu ứng trượt hoặc làm mờ từ từ

Để cho thấy rõ hơn một phần tử đang xuất hiện hoặc biến mất trong một thẻ thông tin hoặc để chỉ ra theo một cách tinh tế hơn sự thay đổi lớn trong giá trị của thẻ thông tin, hãy sử dụng các hiệu ứng làm mờ và trượt trong ảnh động của thẻ.

Nếu bố cục của thẻ thông tin chứa một phần tử có giá trị thay đổi, thì thẻ thông tin sẽ hiện ảnh động thoát của phần tử, sau đó cập nhật bố cục và hiện ảnh động xuất hiện của phần tử.

Hiệu ứng chuyển đổi mờ dần

Đoạn mã sau đây minh hoạ cách thực hiện các hiệu ứng chuyển đổi mờ dần và rõ dần bằng các phương thức trợ giúp từ DefaultContentTransitions. Để xác định đối tượng FadeInTransition và FadeOutTransition tuỳ chỉnh, hãy gọi setFadeIn() và setFadeOut() tương ứng trong các phương thức setter cho hiệu ứng chuyển đổi.

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

Hiệu ứng trượt khi chuyển tiếp

Đoạn mã khác sau đây minh hoạ cách thực hiện các hiệu ứng trượt ra và trượt vào khi chuyển tiếp bằng phương thức trợ giúp từ DefaultContentTransitions. Bạn cũng có thể xác định đối tượng SlideInTransition và SlideOutTransition tuỳ chỉnh bằng cách gọi setSlideIn() và setSlideOut() tương ứng trong các phương thức setter cho hiệu ứng chuyển tiếp.

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

Hiển thị phép biến đổi

Để thu hút sự chú ý đến một phần tử hoặc khu vực cụ thể trong thẻ thông tin, bạn có thể áp dụng một số loại phép biến đổi cho phần tử hoặc khu vực đó, bao gồm: xoay, điều chỉnh theo tỷ lệ và dịch.

Nhiều giá trị dấu phẩy động liên kết với các phép biến đổi chấp nhận biểu thức động, cho phép bạn tạo ảnh động cho các phép biến đổi này.

Góc xoay

Để xoay theo chiều kim đồng hồ xung quanh một điểm xoay có thể tuỳ chỉnh, hãy sử dụng mã tương tự như sau:

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

Điều chỉnh theo tỷ lệ

Để tăng hoặc giảm kích thước một phần tử theo hệ số tỷ lệ ngang và dọc, hãy sử dụng mã tương tự như sau:

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

Bản dịch hình học

Để di chuyển một phần tử theo một số pixel mật độ (dp) cụ thể trên màn hình theo chiều ngang hoặc chiều dọc, hãy sử dụng mã tương tự như sau:

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

Đừng hiển thị thông tin quan trọng ở giữa ảnh động

Có một số trường hợp trong đó ảnh động bị tắt:

Quá trình kết xuất thẻ thông tin của hệ thống có thể tắt ảnh động cho tất cả các thẻ thông tin.
Một thẻ thông tin chỉ có thể tạo ảnh động cho 4 phần tử cùng một lúc. Nếu bạn cố tạo ảnh động cho nhiều hơn 4 phần tử cùng lúc, thì không phải tất cả các phần tử đó đều hiện ảnh động.

Trong trường hợp ảnh động bị tắt, các phần tử sẽ ở dạng tĩnh và hiển thị giá trị kết thúc của ảnh động. Vì lý do này, đừng dựa vào hành vi của ảnh động, chẳng hạn như thời lượng, để hiển thị thông tin quan trọng.