ภาพเคลื่อนไหวของชิ้นส่วนแผนที่

คุณทำให้การ์ดเคลื่อนไหวได้หลายวิธี ดังนี้

• การเปลี่ยนภาพแบบกวาดโดยใช้ภาพเคลื่อนไหวแบบ Tween
• ภาพเคลื่อนไหวการเฟดและเลื่อนอย่างราบรื่นเข้าและออกจากการ์ด

แสดงทรานซิชันการกวาด

หากต้องการแสดงการกวาดที่ราบรื่นจากค่าหนึ่งไปยังอีกค่าหนึ่ง คุณสามารถเปิดใช้ภาพเคลื่อนไหวแบบ Tween สำหรับองค์ประกอบได้ ดังที่แสดงในตัวอย่างโค้ดต่อไปนี้

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() ตามลําดับในเมธอด setter ของการเปลี่ยนฉาก

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

อย่าแสดงข้อมูลสำคัญในช่วงกลางของภาพเคลื่อนไหว

มีบางกรณีที่ภาพเคลื่อนไหวจะปิดอยู่

• การแสดงผลการ์ดของระบบอาจปิดใช้ภาพเคลื่อนไหวสำหรับการ์ดทั้งหมด
• แต่ละการ์ดจะมีองค์ประกอบที่เคลื่อนไหวได้เพียง 4 รายการเท่านั้น หากพยายามสร้างภาพเคลื่อนไหวให้กับองค์ประกอบมากกว่า 4 รายการพร้อมกัน องค์ประกอบบางรายการอาจไม่แสดงภาพเคลื่อนไหว

ในกรณีที่ปิดใช้ภาพเคลื่อนไหว องค์ประกอบจะคงที่และแสดงค่าสุดท้ายของภาพเคลื่อนไหว ด้วยเหตุนี้ อย่าใช้ลักษณะการทำงานของภาพเคลื่อนไหว เช่น ระยะเวลา เพื่อแสดงข้อมูลสำคัญ