Animasyonları karo

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

• Ara çizgi animasyonlarını kullanarak geçişleri süpürme.
• Animasyonları karonun içine ve dışına yumuşatarak şeffaflaştırma ve kaydırma.

Süpürme geçişi göster

Bir değerden diğerine yumuşak bir tarama göstermek amacıyla aşağıdaki kod snippet'inde gösterildiği gibi bir öğe için animasyonları ikiye katlama özelliğini etkinleştirebilirsiniz:

private val defaultValue = 0f
private var startValue = 15f
private var endValue = 105f
private val animationDurationInMillis = 2000f // 2 seconds

override fun onTileRequest(requestParams: TileRequest) =
    Futures.immediateFuture(
        // Add timeline and layout containers. CircularProgressIndicator is an
        // inner element of those containers.
        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()
        // Finish building all elements that contain CircularProgressIndicator.
    )

private float defaultValue = 0f;
private float startValue = 15f;
private float endValue = 105f;
private float animationDurationInMillis = 2000f; // 2 seconds

@Override
protected ListenableFuture<Tile> onTileRequest(
       @NonNull TileRequest requestParams
) {
    return Futures.immediateFuture(
        // Add timeline and layout containers. CircularProgressIndicator is an
        // inner element of those containers.
        new CircularProgressIndicator.Builder()
            .setProgress(
                new 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,
                            new AnimationSpec.Builder()
                                .setAnimationParameters(
                                    new AnimationParameters.Builder()
                                        .setDurationMillis(animationDurationInMillis)
                                        .build()
                                ).build()
                        )
                    ).build()
            ).build()
        // Finish building all elements that contain CircularProgressIndicator.
    );
}

Yumuşak geçiş veya kaydırma gösterin

Bir öğenin karo içinde göründüğünü veya kaybolduğunu daha net bir şekilde belirtmek ya da bir karonun değerinde bir adım değişikliğini daha belirgin bir şekilde göstermek için karo animasyonlarınızda şeffaflaştırma ve kaydırma efektleri kullanın.

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

Şeffaflaştırma geçişleri

Aşağıdaki kod snippet'inde, DefaultContentTransitions'teki yardımcı yöntemleri kullanarak belirme ve kararma geçişlerinin nasıl gerçekleştirileceği gösterilmektedir. Özel FadeInTransition ve FadeOutTransition nesnelerini tanımlamak için geçiş belirleyici yöntemlerinde sırasıyla setFadeIn() ve setFadeOut() yöntemini çağırın.

@OptIn(ProtoLayoutExperimental::class)
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(
                    ModifiersBuilders.Modifiers.Builder()
                        .setContentUpdateAnimation(AnimatedVisibility.Builder()
                            .setEnterTransition(
                                    DefaultContentTransitions.fadeIn())
                            .setExitTransition(
                                    DefaultContentTransitions.fadeOut()
                            ).build())
                ).build())
        ).build()
    )
}

@OptIn(markerClass = ProtoLayoutExperimental.class)
@NonNull
@Override
protected ListenableFuture<Tile> onTileRequest(
        @NonNull RequestBuilders.TileRequest requestParams
) {
    // Assumes that you've defined a custom helper method called
    // getTileTextToShow().
    String tileText = getTileTextToShow();

    return Futures.immediateFuture(new Tile.Builder()
        .setResourcesVersion(RESOURCES_VERSION)
        .setTileTimeline(Timeline.fromLayoutElement(
            new Text.Builder(this, tileText)
                .setModifiers(
                    new ModifiersBuilders.Modifiers.Builder()
                        .setContentUpdateAnimation(new AnimatedVisibility.Builder()
                            .setEnterTransition(
                                    DefaultContentTransitions.fadeIn())
                            .setExitTransition(
                                    DefaultContentTransitions.fadeOut())
                            .build())
                .build()))
        .build()
    );
}

Slayt geçişleri

Bu diğer kod snippet'i, DefaultContentTransitions'teki yardımcı yöntemleri kullanarak içeri kayan ve dışarı kayan geçişlerin nasıl gerçekleştirileceğini gösterir. Ayrıca geçiş belirleyici yöntemlerinde sırasıyla setSlideIn() ve setSlideOut() çağırarak özel SlideInTransition ve SlideOutTransition nesneleri tanımlayabilirsiniz.

@OptIn(ProtoLayoutExperimental::class)
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(
                                    SLIDE_DIRECTION_LEFT_TO_RIGHT)
                            ).setExitTransition(
                                DefaultContentTransitions.slideOut(
                                    SLIDE_DIRECTION_LEFT_TO_RIGHT)
                            ).build()
                        ).build()
                ).build()
        )).build()
    )
}

@OptIn(markerClass = ProtoLayoutExperimental.class)
@NonNull
@Override
protected ListenableFuture<Tile> onTileRequest(
        @NonNull RequestBuilders.TileRequest requestParams
) {
    // Assumes that you've defined a custom helper method called
    // getTileTextToShow().
    String tileText = getTileTextToShow();
    return Futures.immediateFuture(Tile.Builder()
        .setResourcesVersion(RESOURCES_VERSION)
        .setTileTimeline(Timeline.fromLayoutElement(
            new Text.Builder(this, tileText)
                .setModifiers(
                    new Modifiers.Builder()
                        .setContentUpdateAnimation(
                            new AnimatedVisibility.Builder()
                                .setEnterTransition(
                                    DefaultContentTransitions.slideIn(
                                        SLIDE_DIRECTION_LEFT_TO_RIGHT))
                                .setExitTransition(
                                    DefaultContentTransitions.slideOut(
                                        SLIDE_DIRECTION_LEFT_TO_RIGHT))
                                .build())
                        .build())
                .build()))
        .build()
    );
}

Animasyonun ortasında önemli bilgiler göstermeme

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 karoda aynı anda yalnızca 4 öğe animasyonlu olabilir. Aynı anda 4'ten fazla öğeyi canlandırmaya çalışırsanız hepsi animasyon göstermez.

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