אנימציות של קטעי המפה

יש כמה דרכים להוסיף אנימציה לאריחים, כולל:

• מעברים תוך כדי תנועה באמצעות אנימציות טרווין (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

הגדרת כיוון הקשת

אם המשבצת מכילה קשת, יכול להיות שלא תרצו שתמיד הטקסט או קו הקשת יתרחבו בכיוון ברירת המחדל של הטקסט בשפה שבחר המשתמש. כדי לציין את כיוון הצמיחה של הקשת, משתמשים בממשקי ה-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

הצגת שקף או מעבר חלק

כדי לציין בצורה ברורה יותר שרכיב מופיע או נעלם בכרזה, או כדי להציג בצורה עדינה יותר שינוי חד בערך של כרזה, אפשר להשתמש באפקטים של דהייה ושל החלקה באנימציות של הכרזות.

אם פריסה של משבצת מכילה רכיב שהערך שלו משתנה, בתחילה מוצגת ב-tile אנימציית היציאה של הרכיב, לאחר מכן מתבצע עדכון הפריסה ומוצגת אנימציית הכניסה של הרכיב.

מעברים עם עמעום

קטע הקוד הבא מראה איך לבצע מעברים של 'הופעה בהדרגה' ו'היעלמוּת בהדרגה' באמצעות שיטות העזר מ-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()
    )
}
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

התאמה לעומס (scaling)

כדי להגדיל או לכווץ רכיב לפי גורמים של שינוי קנה מידה אופקי ואנכי, משתמשים בקוד דומה לזה:

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 רכיבים בו-זמנית, לא כל הרכיבים יוצגו באנימציה.

אם אנימציה מסוימת מושבתת, הרכיבים יהיו סטטיים ויציגו את הערך הסופי של האנימציה. לכן, אל תסתמכו על התנהגות האנימציה, כמו משך הזמן שלה, כדי להציג מידע חשוב.