Paylaşılan öğe geçişini özelleştir

Paylaşılan öğe geçiş animasyonunun nasıl çalışacağını özelleştirmek için, paylaşılan öğelerin geçiş şeklini değiştirmek üzere kullanılabilecek birkaç parametre vardır.

Animasyon özellikleri

Boyut ve konum hareketi için kullanılan animasyon spesifikasyonunu değiştirmek üzere Modifier.sharedElement() üzerinde farklı bir boundsTransform parametresi belirtebilirsiniz. Bu, ilk Rect konumunu ve hedef Rect konumunu sağlar.

Örneğin, önceki örnekteki metnin yay hareketiyle hareket etmesini sağlamak için keyframes spesifikasyonu kullanmak üzere boundsTransform parametresini belirtin:

val textBoundsTransform = BoundsTransform { initialBounds, targetBounds ->
    keyframes {
        durationMillis = boundsAnimationDurationMillis
        initialBounds at 0 using ArcMode.ArcBelow using FastOutSlowInEasing
        targetBounds at boundsAnimationDurationMillis
    }
}
Text(
    "Cupcake", fontSize = 28.sp,
    modifier = Modifier.sharedBounds(
        rememberSharedContentState(key = "title"),
        animatedVisibilityScope = animatedVisibilityScope,
        boundsTransform = textBoundsTransform
    )
)
CustomizeSharedElementsSnippets.kt

Herhangi bir AnimationSpec kullanabilirsiniz. Bu örnekte keyframes spesifikasyonu kullanılmaktadır.

Yeniden boyutlandırma modu

İki ortak sınır arasında animasyon oluştururken resizeMode parametresini RemeasureToBounds veya ScaleToBounds olarak ayarlayabilirsiniz. Bu parametre, paylaşılan öğenin iki durum arasında nasıl geçiş yapacağını belirler. ScaleToBounds önce alt düzeni ileriye dönük (veya hedef) kısıtlamalarla ölçer. Ardından, alt öğenin kararlı düzeni, paylaşılan sınırlara sığacak şekilde ölçeklenir. ScaleToBounds, eyaletler arasındaki "grafik ölçek" olarak düşünülebilir.

Buna karşılık RemeasureToBounds, sharedBounds'un alt düzenini hedef boyuta göre animasyonlu sabit kısıtlamalarla yeniden ölçer ve yeniden düzenler. Yeniden ölçüm, sınırların boyutu değiştiğinde tetiklenir. Bu durum her karede gerçekleşebilir.

Text kompozisyonları için metnin farklı satırlara yeniden düzenlenmesini ve yeniden akışını önlediğinden ScaleToBounds önerilir. RemeasureToBounds, farklı en boy oranına sahip sınırlar için ve iki ortak öğe arasında sorunsuz bir devamlılık istiyorsanız önerilir.

İki yeniden boyutlandırma modu arasındaki fark aşağıdaki örneklerde görülebilir:

Son düzene atlama

Varsayılan olarak, iki düzen arasında geçiş yapılırken düzen boyutu, başlangıç ve son durumu arasında animasyonlu olarak değişir. Bu, metin gibi içerikleri animasyonlu hale getirirken istenmeyen bir davranış olabilir.

Aşağıdaki örnekte, "Lorem Ipsum" açıklama metninin ekrana iki farklı şekilde nasıl girdiği gösterilmektedir. İlk örnekte, kapsayıcı büyüdükçe metin girerken yeniden akışı sağlanır. İkinci örnekte, metin büyüdükçe yeniden akmaz. Modifier.skipToLookaheadSize() eklemek, boyutu büyüdükçe yeniden akışı önler.

Klip ve yer paylaşımları

Paylaşılan öğelerin farklı kompozisyonlar arasında paylaşılabilmesi için, hedefteki eşlemesine geçiş başladığında kompozisyonun oluşturulması bir katman yer paylaşımına yükseltilir. Bunun sonucunda, üst öğenin sınırları ve katman dönüşümleri (ör. alfa ve ölçek) dışında kalır.

Paylaşılmayan diğer kullanıcı arayüzü öğelerinin üzerine oluşturulur. Geçiş tamamlandığında öğe, yer paylaşımından kendi DrawScope alanına bırakılır.

Paylaşılan bir öğeyi bir şekle kırpmak için standart Modifier.clip() işlevini kullanın. sharedElement() işaretinden sonra yerleştirin:

Image(
    painter = painterResource(id = R.drawable.cupcake),
    contentDescription = "Cupcake",
    modifier = Modifier
        .size(100.dp)
        .sharedElement(
            rememberSharedContentState(key = "image"),
            animatedVisibilityScope = this@AnimatedContent
        )
        .clip(RoundedCornerShape(16.dp)),
    contentScale = ContentScale.Crop
)
CustomizeSharedElementsSnippets.kt

Paylaşılan bir öğenin hiçbir zaman üst kapsayıcı dışında oluşturulmadığından emin olmanız gerekiyorsa clipInOverlayDuringTransition öğesini sharedElement() olarak ayarlayabilirsiniz. Varsayılan olarak, iç içe yerleştirilmiş paylaşılan sınırlar için clipInOverlayDuringTransition, sharedBounds() üst öğesindeki klip yolunu kullanır.

Alt çubuk veya yüzen işlem düğmesi gibi belirli kullanıcı arayüzü öğelerinin paylaşılan öğe geçişi sırasında her zaman en üstte kalmasını desteklemek için Modifier.renderInSharedTransitionScopeOverlay() öğesini kullanın. Bu değiştirici, varsayılan olarak paylaşılan geçiş etkin olduğu sırada içeriği yer paylaşımında tutar.

Örneğin, Jetsnack'ta BottomAppBar, ekran görünene kadar paylaşılan öğenin üzerine yerleştirilmelidir. Değiştiriciyi bileşime eklemek, bileşimin yüksekte kalmasını sağlar.

Paylaşılmayan kompozisyonunuzun, geçişten önce diğer kompozisyonların üzerinde kalmasının yanı sıra animasyonla kaybolmasını da isteyebilirsiniz. Bu gibi durumlarda, paylaşılan öğe geçişi çalışırken bileşimi dışarı doğru animasyonlu olarak göstermek için renderInSharedTransitionScopeOverlay().animateEnterExit() öğesini kullanın:

JetsnackBottomBar(
    modifier = Modifier
        .renderInSharedTransitionScopeOverlay(
            zIndexInOverlay = 1f,
        )
        .animateEnterExit(
            enter = fadeIn() + slideInVertically {
                it
            },
            exit = fadeOut() + slideOutVertically {
                it
            }
        )
)
CustomizeSharedElementsSnippets.kt

Paylaşılan öğenizin yer paylaşımında oluşturulmamasını istediğiniz nadir durumlarda, sharedElement() üzerindeki renderInOverlayDuringTransition özelliğini false olarak ayarlayabilirsiniz.

Paylaşılan öğe boyutunda yapılan değişikliklerle ilgili olarak kardeş düzenleri bilgilendirme

Varsayılan olarak sharedBounds() ve sharedElement(), düzen geçişleri sırasında üst kapsayıcıyı boyut değişiklikleri hakkında bilgilendirmez.

Boyut değişikliklerinin geçiş sırasında üst kapsayıcıya yayılması için placeHolderSize parametresini PlaceHolderSize.animatedSize olarak değiştirin. Bu işlem, öğenin büyümesine veya küçülmesine neden olur. Düzendeki diğer tüm öğeler bu değişikliğe yanıt verir.