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 örnekte verilen metni bir yay ile hareket edecek şekilde ayarlamak için motion, keyframes spesifikasyonu kullanmak için 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 bir keyframes spesifikasyonu kullanılmaktadır.

Yeniden boyutlandırma modu

İki paylaşılan sınır arasında animasyon oluştururken resizeMode parametresini ayarlayabilirsiniz RemeasureToBounds veya ScaleToBounds değerine ayarlayın. Bu parametre, paylaşılan öğe, iki durum arasında geçiş yapar. Önce ScaleToBounds ileri tarihli (veya hedef) kısıtlamalarla alt düzeni ölçer. Ardından alt öğenin kararlı düzeni, paylaşılan sınırlara sığacak şekilde ölçeklendirilir. ScaleToBounds, "grafiksel ölçek" olarak düşünülebilir. kontrol etmiş oluyorsunuz.

RemeasureToBounds ise alt öğe düzenini yeniden ölçüp yeniden düzenler. Hedef boyuta göre sabit, animasyonlu kısıtlamalarla sharedBounds. İlgili içeriği oluşturmak için kullanılan sınır boyutu değişikliği nedeniyle yeniden ölçüm tetiklenir. Bu da olması gerekir.

Text bileşenleri için metnin farklı satırlara yeniden düzenlenmesini ve yeniden akışını önlediğinden ScaleToBounds önerilir. Farklı yönü olan sınırlar için ve iki ortak öğe arasında akışkan bir süreklilik istiyorsanız RemeasureToBounds önerilir.

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

Son düzene atla

Varsayılan olarak, iki düzen arasında geçiş yaparken düzen boyutu canlandırılır arasında geçiş yapabilirsiniz. Bu durum, istenmeyen bir durum animasyon oluşturmak için kullanabilirsiniz.

Aşağıdaki örnekte "Lorem Ipsum" açıklama metni gösterilmektedir giriş iki şekilde kontrol edebilirsiniz. İlk örnekte metnin akışı ve büyük bir yer girdikçe, metin kapsayıcı boyutu büyüdükçe yeniden düzenlemenizi sağlar. Modifier.skipToLookaheadSize() eklenmesi yeniden düzenlemeyi engeller bir alan adı olacaktır.

Klip ve yer paylaşımlı

Compose'da paylaşılan öğeler oluştururken kullanılan önemli bir kavram, paylaşmalarını sağlamak için bir e-posta alırsınız. Bu sayede composable, 2022'de 2025'e kadar aynısı olacaktır. Bunun etkisi, üst öğenin sınırlarını ve katman dönüşümlerini (ör. alfa ve ölçek) atlamasıdır.

Geçiş tamamlandıktan sonra bu dosya, paylaşılmayan diğer kullanıcı arayüzü öğelerinin üzerinde oluşturulur. sona erdiğinde, öğe yer paylaşımından kendi DrawScope öğesine atlanır.

Paylaşılan bir öğeyi şekle kırpmak için standart Modifier.clip() kullanın işlevini kullanın. Etiketi sharedElement() öğesinin sonrasına 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 öğe dışında oluşturulmadığından emin olmanız gerekiyorsa kapsayıcısı için sharedElement() üzerinde clipInOverlayDuringTransition değerini ayarlayabilirsiniz. Ölçüt varsayılan olarak, iç içe yerleştirilmiş paylaşılan sınırlar için clipInOverlayDuringTransition klibi kullanır üst sharedBounds() içindeki yol.

Alt çubuk veya kayan işlem gibi belirli kullanıcı arayüzü öğelerinin tutulmasını desteklemek için düğmesi, paylaşılan öğe geçişi sırasında her zaman üsttedir, Modifier.renderInSharedTransitionScopeOverlay(). Varsayılan olarak değiştiricisi; paylaşılan düğmenin açıldığı sırada içeriği yer paylaşımında etkin olduğundan emin olun.

Örneğin, Jetsnack'te BottomAppBar öğesinin, grafiğin paylaşılan öğe eklemeye devam edebilirsiniz. Değiştirici ekleme yüksekte kalmasını sağlar.

Bazen paylaşılmayan composable'ınızın hem animasyon önce diğer composable'ların üzerinde duracağını düşünüyor. Böyle durumlarda Animasyon eklemek için renderInSharedTransitionScopeOverlay().animateEnterExit() composable'dan derlenebilir:

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

Nadiren de olsa, paylaşılan öğenizin yer paylaşımı, sharedElement() üzerinde renderInOverlayDuringTransition ayarlayabilirsiniz değerini false (yanlış) olarak değiştirin.

Paylaşılan öğe boyutunda yapılan değişiklikleri kardeş düzenleri bildir

Varsayılan olarak sharedBounds() ve sharedElement(), ebeveyne bildirim göndermez her boyuttaki kapsayıcıyı kullanmaya devam edebilirsiniz.

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