انیمیشن های کاشی

شما می توانید کاشی های خود را به چند روش مختلف متحرک کنید، از جمله موارد زیر:

• جارو کردن انتقال با استفاده از انیمیشن های 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

یک محو شدن یا اسلاید صاف را نشان دهید

برای اینکه واضح‌تر نشان دهید که یک عنصر در کاشی ظاهر می‌شود یا ناپدید می‌شود، یا برای نشان دادن ظریف‌تر تغییر مرحله‌ای در مقدار کاشی، از جلوه‌های محو و اسلاید در انیمیشن‌های کاشی خود استفاده کنید.

اگر طرح کاشی حاوی عنصری باشد که مقدار آن تغییر می کند، کاشی انیمیشن خروج عنصر را نشان می دهد، سپس طرح بندی را به روز می کند و انیمیشن ورود عنصر را نشان می دهد.

محو کردن انتقال

قطعه کد زیر نحوه انجام انتقال‌های محو و محو شدن را با استفاده از روش‌های کمکی 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 ، انتقال های اسلاید به داخل و خارج را انجام داد. همچنین می توانید با فراخوانی setSlideIn() و setSlideOut() ، اشیاء سفارشی SlideInTransition و SlideOutTransition در متدهای تنظیم گذار تعریف کنید.

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 عنصر را متحرک کنید، همه آنها یک انیمیشن را نشان نمی دهند.

در مواردی که یک انیمیشن غیرفعال است، عناصر ثابت هستند و مقدار پایانی انیمیشن را نشان می دهند. به همین دلیل برای نشان دادن اطلاعات مهم به رفتار انیمیشن مانند مدت زمان آن تکیه نکنید.