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

ไทล์รองรับวิธีการเคลื่อนไหวที่แตกต่างกัน 2-3 วิธี ซึ่งรวมถึงวิธีต่อไปนี้

แสดงการเปลี่ยนฉากแบบกวาด

หากต้องการแสดงการเปลี่ยนจากค่าหนึ่งไปยังอีกค่าหนึ่งอย่างราบรื่น คุณสามารถเปิดใช้ภาพเคลื่อนไหว 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()
    )
}

ตั้งค่าทิศทางส่วนโค้ง

หากไทล์มีส่วนโค้ง คุณอาจไม่ต้องการให้เส้นหรือข้อความของส่วนโค้งขยายตามทิศทางข้อความเริ่มต้นสำหรับภาษาที่ผู้ใช้เลือกเสมอ หากต้องการระบุทิศทางการเติบโตของส่วนโค้ง ให้ใช้ 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()
    )
}

แสดงการจางหรือสไลด์อย่างราบรื่น

หากต้องการระบุให้ชัดเจนยิ่งขึ้นว่าองค์ประกอบปรากฏหรือหายไปในไทล์ หรือเพื่อแสดงการเปลี่ยนแปลงทีละขั้นในค่าของไทล์อย่างแนบเนียนยิ่งขึ้น ให้ใช้เอฟเฟกต์จางและสไลด์ ในการเคลื่อนไหวของไทล์

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

การเปลี่ยนภาพแบบจางลง

ข้อมูลโค้ดต่อไปนี้แสดงวิธีดำเนินการเปลี่ยนฉากแบบค่อยๆ ปรากฏและค่อยๆ จางหาย โดยใช้วิธีการช่วยจาก 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()
    )
}

การเปลี่ยนสไลด์

ข้อมูลโค้ดอื่นๆ นี้แสดงวิธีทำการเปลี่ยนภาพแบบสไลด์เข้าและสไลด์ออก โดยใช้วิธีการช่วยจาก 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()
    )
}

แสดงการเปลี่ยนรูปแบบ

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

ค่าทศนิยมหลายค่าที่เชื่อมโยงกับการเปลี่ยนรูปแบบยอมรับนิพจน์ แบบไดนามิก ซึ่งช่วยให้คุณเคลื่อนไหวการเปลี่ยนรูปแบบเหล่านี้ได้

การหมุน

หากต้องการหมุนตามเข็มนาฬิกาเกี่ยวกับจุดหมุนที่ปรับแต่งได้ ให้ใช้โค้ด ที่คล้ายกับโค้ดต่อไปนี้

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()
)

การปรับขนาด

หากต้องการขยายหรือย่อองค์ประกอบตามปัจจัยการปรับขนาดแนวนอนและแนวตั้ง ให้ใช้โค้ดที่คล้ายกับโค้ดต่อไปนี้

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()
)

การแปลรูปทรง

หากต้องการย้ายองค์ประกอบตามจำนวนพิกเซลความหนาแน่น (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()
)

ภาพเคลื่อนไหว 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()
        )
    }
}

ข้อควรทราบ

  • ระบบรองรับเฉพาะชุดย่อยของไฟล์ Lottie ตรวจสอบความเข้ากันได้โดยใช้เครื่องมือตรวจสอบต่อไปนี้
    • เครื่องมือตรวจสอบออนไลน์: https://skottie.skia.org/ ในส่วน "รายงานความเข้ากันได้" ไฟล์ต้องผ่านการทดสอบ "ข้อผิดพลาดในข้อกำหนด" "คำเตือนในข้อกำหนด" (โดยไม่สนใจพร็อพเพอร์ตี้ทั่วไป) และ "ข้อผิดพลาดในโปรไฟล์พลังงานต่ำ"
    • ไลบรารีการตรวจสอบ Rust: https://github.com/google/lottie-tools
  • โปรแกรมแสดงผลไทล์รองรับการเล่น Lottie โดยมีเวอร์ชันหลักอย่างน้อย 1 และเวอร์ชันย่อยอย่างน้อย 500 หากภาพเคลื่อนไหวที่ระบุไม่ รองรับ ภาพเคลื่อนไหวจะไม่ปรากฏ แต่ส่วนที่เหลือของไทล์จะแสดงผลตามที่ คาดไว้ หากจำเป็น คุณสามารถระบุตัวเลือกสำรอง เช่น รูปภาพแบบคงที่ ได้

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

ระบบจะปิดใช้ภาพเคลื่อนไหวในสถานการณ์ต่อไปนี้

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

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