Bu sayfa, Cloud Translation API ile çevrilmiştir.

Animasyonları karo

Kartlarınızı aşağıdakiler de dahil olmak üzere birkaç farklı şekilde canlandırabilirsiniz:

Ara animasyonlar kullanarak süpürme geçişleri.
Karoların içine ve dışına yumuşak bir şekilde kaydırarak animasyonlar ekleyin.

Kaydırma geçişi gösterme

Bir değerden diğerine yumuşak bir geçiş göstermek için aşağıdaki kod snippet'inde gösterildiği gibi bir öğe için ara animasyonlar 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

Kartınızda yay varsa yay çizgisinin veya metninin her zaman kullanıcının seçtiği dilin varsayılan metin yönünde 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 karartma veya kaydırma efekti gösterme

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

Bir kart düzeninde değeri değişen bir öğe varsa kart, öğ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'daki yardımcı yöntemler kullanılarak nasıl kaydırma geçişi yapılacağı gösterilmektedir. Özel FadeInTransition ve FadeOutTransition nesneleri tanımlamak için geçiş ayarlayıcı yöntemlerinde sırasıyla setFadeIn() ve setFadeOut() çağrılarını kullanı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'inde, DefaultContentTransitions'daki yardımcı yöntemler kullanılarak kaydırarak girme ve kaydırarak çıkma geçişlerinin nasıl yapılacağı gösterilmektedir. Geçiş ayarlayıcı yöntemlerinde sırasıyla setSlideIn() ve setSlideOut()'i çağırarak ö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üşümleri gösterme

Bir karodaki belirli bir öğeye veya alana dikkat çekmek için karoya döndürme, ölçeklendirme ve kaydırma gibi çeşitli dönüşüm türleri uygulayabilirsiniz.

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

Döndürme

Özelleştirilebilir bir pivot noktası etrafında saat yönünde dönme işlemi gerçekleştirmek 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örlerine göre 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 bir yoğunluk pikseli (dp) sayısı 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

Önemli bilgileri animasyonun ortasında göstermeyin

Animasyonların devre dışı bırakıldığı birkaç durum vardır:

Sistemin karo oluşturma işlemi, tüm karolar için animasyonlar devre dışı bırakabilir.
Bir kartta aynı anda yalnızca 4 öğe animasyonlu olabilir. Aynı anda 4'ten fazla öğeyi animasyonlu hale getirmeye çalışırsanız bunların hepsi animasyon göstermez.

Bir animasyon devre dışı bırakıldığında öğeler statik olur ve animasyon bitiş değerini gösterir. Bu nedenle, önemli bilgileri göstermek için animasyonun davranışına (ör. süresi) güvenmeyin.