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

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

แสดงการเปลี่ยนหน้าแบบเลื่อน

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

Kotlin

private val defaultValue = 0f
private var startValue = 15f
private var endValue = 105f
private val animationDurationInMillis = 2000f // 2 seconds

override fun onTileRequest(requestParams: TileRequest) =
    Futures.immediateFuture(
        // Add timeline and layout containers. CircularProgressIndicator is an
        // inner element of those containers.
        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()
        // Finish building all elements that contain CircularProgressIndicator.
    )

Java

private float defaultValue = 0f;
private float startValue = 15f;
private float endValue = 105f;
private float animationDurationInMillis = 2000f; // 2 seconds

@Override
protected ListenableFuture<Tile> onTileRequest(
       @NonNull TileRequest requestParams
) {
    return Futures.immediateFuture(
        // Add timeline and layout containers. CircularProgressIndicator is an
        // inner element of those containers.
        new CircularProgressIndicator.Builder()
            .setProgress(
                new 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,
                            new AnimationSpec.Builder()
                                .setAnimationParameters(
                                    new AnimationParameters.Builder()
                                        .setDurationMillis(animationDurationInMillis)
                                        .build()
                                ).build()
                        )
                    ).build()
            ).build()
        // Finish building all elements that contain CircularProgressIndicator.
    );
}

ตั้งค่าทิศทางโค้ง

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

Kotlin

@OptIn(ProtoLayoutExperimental::class)
public override fun onTileRequest(
        requestParams: RequestBuilders.TileRequest
): ListenableFuture<Tile> {
    return Futures.immediateFuture(Tile.Builder()
        .setResourcesVersion(RESOURCES_VERSION)
        .setTileTimeline(Timeline.fromLayoutElement(
            EdgeContentLayout.Builder(deviceParameters)
                .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()
    )
}

Java

@OptIn(markerClass = ProtoLayoutExperimental.class)
@NonNull
@Override
protected ListenableFuture<Tile> onTileRequest(
        @NonNull RequestBuilders.TileRequest requestParams
) {
    return Futures.immediateFuture(new Tile.Builder()
        .setResourcesVersion(RESOURCES_VERSION)
        .setTileTimeline(Timeline.fromLayoutElement(
            new EdgeContentLayout.Builder(deviceParameters)
                .setEdgeContent(
                    new Arc.Builder()
                        // Arc should always grow clockwise.
                        .setArcDirection(LayoutElementBuilders.ARC_DIRECTION_CLOCKWISE)
                        .addContent(
                            new 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() ตามลำดับในการเปลี่ยนแปลง Setter Method

Kotlin

@OptIn(ProtoLayoutExperimental::class)
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(
                    ModifiersBuilders.Modifiers.Builder()
                        .setContentUpdateAnimation(AnimatedVisibility.Builder()
                            .setEnterTransition(
                                    DefaultContentTransitions.fadeIn())
                            .setExitTransition(
                                    DefaultContentTransitions.fadeOut()
                            ).build())
                ).build())
        ).build()
    )
}

Java

@OptIn(markerClass = ProtoLayoutExperimental.class)
@NonNull
@Override
protected ListenableFuture<Tile> onTileRequest(
        @NonNull RequestBuilders.TileRequest requestParams
) {
    // Assumes that you've defined a custom helper method called
    // getTileTextToShow().
    String tileText = getTileTextToShow();

    return Futures.immediateFuture(new Tile.Builder()
        .setResourcesVersion(RESOURCES_VERSION)
        .setTileTimeline(Timeline.fromLayoutElement(
            new Text.Builder(this, tileText)
                .setModifiers(
                    new ModifiersBuilders.Modifiers.Builder()
                        .setContentUpdateAnimation(new AnimatedVisibility.Builder()
                            .setEnterTransition(
                                    DefaultContentTransitions.fadeIn())
                            .setExitTransition(
                                    DefaultContentTransitions.fadeOut())
                            .build())
                .build()))
        .build()
    );
}

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

ข้อมูลโค้ดอื่นๆ นี้แสดงวิธีดำเนินการเลื่อนเข้าและออก เปลี่ยนโดยใช้เมธอดตัวช่วยจาก DefaultContentTransitions คุณ และยังสามารถกำหนดออบเจ็กต์ SlideInTransition และ SlideOutTransition ที่กำหนดเองโดย การเรียก setSlideIn() และ setSlideOut() ตามลำดับใน เมธอดตัวตั้งค่าการเปลี่ยน

Kotlin

@OptIn(ProtoLayoutExperimental::class)
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(
                                    SLIDE_DIRECTION_LEFT_TO_RIGHT)
                            ).setExitTransition(
                                DefaultContentTransitions.slideOut(
                                    SLIDE_DIRECTION_LEFT_TO_RIGHT)
                            ).build()
                        ).build()
                ).build()
        )).build()
    )
}

Java

@OptIn(markerClass = ProtoLayoutExperimental.class)
@NonNull
@Override
protected ListenableFuture<Tile> onTileRequest(
        @NonNull RequestBuilders.TileRequest requestParams
) {
    // Assumes that you've defined a custom helper method called
    // getTileTextToShow().
    String tileText = getTileTextToShow();
    return Futures.immediateFuture(Tile.Builder()
        .setResourcesVersion(RESOURCES_VERSION)
        .setTileTimeline(Timeline.fromLayoutElement(
            new Text.Builder(this, tileText)
                .setModifiers(
                    new Modifiers.Builder()
                        .setContentUpdateAnimation(
                            new AnimatedVisibility.Builder()
                                .setEnterTransition(
                                    DefaultContentTransitions.slideIn(
                                        SLIDE_DIRECTION_LEFT_TO_RIGHT))
                                .setExitTransition(
                                    DefaultContentTransitions.slideOut(
                                        SLIDE_DIRECTION_LEFT_TO_RIGHT))
                                .build())
                        .build())
                .build()))
        .build()
    );
}

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

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

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

การหมุน

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

Kotlin

// Last line in your onTileRequest() method implementation.
return Futures.immediateFuture(Tile.Builder()
    .setResourcesVersion(RESOURCES_VERSION)
    .setTileTimeline(Timeline.fromLayoutElement(
        Text.Builder(this, someTileText)
            .setModifiers(
                    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(50))
                        .setPivotY(dp(100))
                        // Rotate the element 45 degrees clockwise.
                        .setRotation(
                            degrees(45f)
                        ).build()
            ).build())
    ).build()
)

Java

// Last line in your onTileRequest() method implementation.
return Futres.immediateFuture(new Tile.Builder()
    .setResourcesVersion(RESOURCES_VERSION)
    .setTileTimeline(Timeline.fromLayoutElement(
        new Text.Builder(this, someTileText)
            .setModifiers(
                    new 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(50))
                        .setPivotY(dp(100))
                        // Rotate the element 45 degrees clockwise.
                        .setRotation(
                            degrees(45f))
                        .build())
            .build()))
    .build()
);

การปรับขนาด

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

Kotlin

// Last line in your onTileRequest() method implementation.
return Futures.immediateFuture(Tile.Builder()
    .setResourcesVersion(RESOURCES_VERSION)
    .setTileTimeline(Timeline.fromLayoutElement(
        Text.Builder(this, someTileText)
            .setModifiers(
                    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(50))
                        .setPivotY(dp(100))
                        // Shrink the element by a scale factor
                        // of 0.5 horizontally and 0.75 vertically.
                        .setScaleX(TypeBuilders.FloatProp.Builder(0.5f)
                                .build())
                        .setScaleY(TypeBuilders.FloatProp.Builder(0.75f)
                                .build()
                        ).build()
            ).build())
    ).build()
)

Java

// Last line in your onTileRequest() method implementation.
return Futres.immediateFuture(new Tile.Builder()
    .setResourcesVersion(RESOURCES_VERSION)
    .setTileTimeline(Timeline.fromLayoutElement(
        new Text.Builder(this, someTileText)
            .setModifiers(
                    new 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(50))
                        .setPivotY(dp(100))
                        // Shrink the element by a scale factor
                        // of 0.5 horizontally and 0.75 vertically.
                        .setScaleX(new TypeBuilders.FloatProp.Builder(0.5f)
                                .build())
                        .setScaleY(new TypeBuilders.FloatProp.Builder(0.75f)
                                .build())
                        .build())
            .build()))
    .build()
);

การแปลค่าเรขาคณิต

วิธีย้ายองค์ประกอบตามจำนวนพิกเซลความหนาแน่น (dp) ที่เฉพาะเจาะจงผ่านหน้าจอ ในแนวนอนหรือแนวตั้ง ให้ใช้โค้ดที่คล้ายคลึงกับโค้ดต่อไปนี้

Kotlin

// Last line in your onTileRequest() method implementation.
return Futures.immediateFuture(Tile.Builder()
    .setResourcesVersion(RESOURCES_VERSION)
    .setTileTimeline(Timeline.fromLayoutElement(
        Text.Builder(this, someTileText)
            .setModifiers(
                    ModifiersBuilders.Transformation.Builder()
                        // Translate (move) the element 60 dp to the right
                        // and 80 dp down.
                        .setTranslationX(dp(60))
                        .setTranslationY(dp(80))
                        .build()
            ).build())
    ).build()
)

Java

// Last line in your onTileRequest() method implementation.
return Futres.immediateFuture(new Tile.Builder()
    .setResourcesVersion(RESOURCES_VERSION)
    .setTileTimeline(Timeline.fromLayoutElement(
        new Text.Builder(this, someTileText)
            .setModifiers(
                    new ModifiersBuilders.Transformation.Builder()
                        // Translate (move) the element 60 dp to the right
                        // and 80 dp down.
                        .setTranslationX(dp(60))
                        .setTranslationY(dp(80))
                        .build())
            .build()))
    .build()
);

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

มีหลายกรณีที่ภาพเคลื่อนไหวถูกปิดใช้ ดังนี้

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

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