Animasyonları karo

Döşemeler, aşağıdakiler de dahil olmak üzere birkaç farklı animasyon yaklaşımını destekler:

Silme geçişi gösterme

Bir değerden diğerine sorunsuz geçiş göstermek için aşağıdaki kod snippet'inde gösterildiği gibi bir öğe için tween animasyonlarını etkinleştirebilirsiniz:

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

Yay yönünü ayarlama

Döşemeniz bir yay içeriyorsa yay çizgisinin veya metnin, kullanıcının seçtiği dilin varsayılan metin yönünde her zaman büyümesini istemeyebilirsiniz. Yay büyüme yönünü belirtmek için ArcDirection API'lerini kullanın:

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

Yumuşak bir solma veya kaydırma gösterme

Bir öğenin kutuda göründüğünü veya kaybolduğunu daha net belirtmek ya da bir kutunun değerindeki adım değişikliğini daha belirgin bir şekilde göstermek için kutu animasyonlarınızda solma ve kaydırma efektlerini kullanın.

Bir döşeme düzeni, değeri değişen bir öğe içeriyorsa döşeme, öğenin çıkış animasyonunu gösterir, ardından düzeni günceller ve öğenin giriş animasyonunu gösterir.

Şeffaflaşma geçişleri

Aşağıdaki kod snippet'inde, DefaultContentTransitions yardımcı yöntemleri kullanılarak nasıl yavaş yavaş görünme ve yavaş yavaş kaybolma geçişleri yapılacağı gösterilmektedir. Özel FadeInTransition ve FadeOutTransition nesnelerini tanımlamak için sırasıyla geçiş ayarlayıcı yöntemlerinde setFadeIn() ve setFadeOut() yöntemlerini çağırın.

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

Slayt geçişleri

Bu diğer kod snippet'i, DefaultContentTransitions yardımcı yöntemlerini kullanarak kaydırma ve kaydırarak çıkarma geçişlerinin nasıl yapılacağını gösterir. Geçiş ayarlayıcı yöntemlerinde sırasıyla setSlideIn() ve setSlideOut() çağrılarını yaparak özel SlideInTransition ve SlideOutTransition nesneleri de tanımlayabilirsiniz.

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

Dönüşüm gösterme

Bir kutudaki belirli bir öğeye veya alana dikkat çekmek için döndürme, ölçeklendirme ve çevirme gibi çeşitli dönüştürme türleri uygulayabilirsiniz.

Dönüşümlerle ilişkili birçok kayan nokta değeri, bu dönüşümleri canlandırmanıza olanak tanıyan dinamik ifadeleri kabul eder.

Döndürme

Özelleştirilebilir bir pivot noktası etrafında saat yönünde döndürme işlemi yapmak için aşağıdakine benzer bir kod kullanın:

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

Ölçeklendirme

Bir öğeyi yatay ve dikey ölçeklendirme faktörleriyle büyütmek veya küçültmek için aşağıdakine benzer bir kod kullanın:

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

Geometrik çeviri

Bir öğeyi ekranda yatay veya dikey olarak belirli sayıda yoğunluk pikseli (dp) kadar taşımak için aşağıdakine benzer bir kod kullanın:

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

Lottie animasyonları

Döşemeler, resimlere benzer bir söz dizimi kullanarak Lottie animasyonlarının oynatılmasını destekler:

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

Animations.kt

Unutulmaması gereken birkaç nokta:

  • Yalnızca Lottie dosyalarının bir alt kümesi desteklenir. Aşağıdaki doğrulayıcılardan birini kullanarak uyumluluğu kontrol edin:
    • Online doğrulayıcı: https://skottie.skia.org/. "Uyumluluk raporu" bölümünde dosyanın "Spesifikasyon Hataları", "Spesifikasyon Uyarıları" (Ortak Özellikler yoksayılır) ve "Düşük Güç Profili Hataları" testlerini geçmesi gerekir.
    • Bir Rust doğrulama kitaplığı: https://github.com/google/lottie-tools.
  • Lottie oynatma, ana sürümü en az 1 ve alt sürümü en az 500 olan karo oluşturucular tarafından desteklenir. Belirli bir animasyon desteklenmiyorsa animasyon görünmez ancak kutunun geri kalanı beklendiği gibi oluşturulur. Gerekirse yedek seçenek (ör. statik resim) sağlayabilirsiniz.

Önemli bilgileri animasyonun ortasında göstermeyin.

Animasyonların devre dışı bırakıldığı çeşitli durumlar vardır:

  • Sistemin karo oluşturma özelliği, tüm karolardaki animasyonları devre dışı bırakabilir.
  • Bir kutu aynı anda yalnızca 4 öğeyi canlandırabilir. Aynı anda 4'ten fazla öğeyi canlandırmaya çalışırsanız hepsinde animasyon gösterilmez.

Animasyonun devre dışı bırakıldığı durumlarda öğeler statiktir ve animasyonun bitiş değerini gösterir. Bu nedenle, önemli bilgileri göstermek için animasyonun süresi gibi davranışlarına güvenmeyin.