پویانمایی‌های کاشی

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

نمایش انتقال جارو

برای نمایش یک حرکت روان از یک مقدار به مقدار دیگر، می‌توانید پویانمایی‌های میان‌گذاری را برای یک عنصر فعال کنید، همان‌طور که در گزیده کد زیر نشان داده شده است:

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، گذارهای کشویی به داخل و کشویی به خارج انجام دهید. همچنین می‌توانید با فراخوانی 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()
    )
}

نمایش تبدیل

برای جلب توجه به یک عنصر یا ناحیه خاص در کاشی، می‌توانید چندین نوع تبدیل روی آن اعمال کنید، ازجمله: چرخش، مقیاس‌بندی، و انتقال.

بسیاری از مقادیر ممیز شناور مرتبط با تبدیل‌ها عبارت‌های پویا را می‌پذیرند که به شما امکان می‌دهد این تبدیل‌ها را پویانمایی کنید.

چرخش

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

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 پشتیبانی می‌شود. اگر پویانمایی معینی پشتیبانی نشود، پویانمایی نشان داده نمی‌شود، اما بقیه کاشی طبق انتظار پرداز می‌شود. درصورت نیاز، می‌توانید گزینه بازگشتی ارائه دهید، مثل تصویر ثابت.

اطلاعات مهم را در وسط پویانمایی نشان ندهید

چندین وضعیت وجود دارد که در آن‌ها پویانمایی‌ها غیرفعال می‌شوند:

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

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