تخصيص نقل العنصر المشترَك

لتخصيص طريقة تشغيل الرسوم المتحركة لعملية انتقال العنصر المشترَك، هناك بعض المَعلمات التي يمكن استخدامها لتغيير طريقة انتقال العناصر المشترَكة.

مواصفات الصور المتحركة

لتغيير مواصفات الصور المتحركة المستخدمة في حركة الحجم والموضع، يمكنك تحديد معلَمة boundsTransform مختلفة على Modifier.sharedElement(). يقدّم ذلك موضع Rect الأوّلي وموضع Rect المستهدَف.

على سبيل المثال، لجعل النص في المثال السابق يتحرك بحركة قوس ، حدِّد المَعلمة boundsTransform لاستخدام مواصفات keyframes:

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

يمكنك استخدام أي AnimationSpec. يستخدم هذا المثال مواصفات keyframes.

وضع تغيير الحجم

عند إنشاء تأثيرات متحركة بين حدود مشترَكة، يمكنك ضبط المَعلمة resizeMode على RemeasureToBounds أو ScaleToBounds. تحدِّد هذه المَعلمة كيفية انتقال العنصر المشترَك بين الحالتَين. أولاً، يقيس ScaleToBounds تنسيق العنصر الثانوي باستخدام قيود النظرة إلى المستقبل (أو الاستهداف). بعد ذلك، يتم تكبير تخطيط العنصر الفرعي الثابت ليلائم الحدود المشتركة. يمكن اعتبار ScaleToBounds "مقياسًا بيانيًا" بين الحالات.

في حين أنّ RemeasureToBounds يعيد قياس تنسيق العنصر الفرعي لمحاولة sharedBounds وإعادة تصميمه باستخدام قيود ثابتة متحركة استنادًا إلى الحجم المستهدَف. تبدأ إعادة القياس من خلال تغيير حجم الحدود، والذي يمكن أن يكون كل إطار.

بالنسبة إلى العناصر القابلة للتجميع في Text، يُنصح باستخدام ScaleToBounds لأنّه سيتجنّب إعادة تنسيق وإعادة تدفق النص على أسطر مختلفة. بالنسبة إلى الحدود التي تختلف فيها تناسبات الجانب، وإذا أردت استمرارية سلسة بين العنصرَين المشترَكين، ننصح باستخدام RemeasureToBounds.

يمكن ملاحظة الفرق بين وضعَي تغيير الحجم في الأمثلة التالية:

التخطي إلى التنسيق النهائي

عند الانتقال بين تنسيقَين، يتم عرض حجم التنسيق بشكل متحرك بين حالته الأولى والنهائية تلقائيًا. قد يكون هذا السلوك غير مرغوب فيه عند إضافة تأثيرات متحركة إلى المحتوى، مثل النص.

يوضّح المثال التالي نص الوصف "Lorem Ipsum" وهو يدخل الشاشة بطريقتَين مختلفتَين. في المثال الأول، تتم إعادة تدفق النص عند دخوله مع زيادة حجم الحاوية، وفي المثال الثاني، لا تتم إعادة تدفق النص عند نموه. تمنع إضافة Modifier.skipToLookaheadSize() إعادة التدفق مع نمو المحتوى.

المقاطع والعناصر التي تظهر فوق المحتوى

من المفاهيم المهمة عند إنشاء عناصر مشترَكة في أداة "الإنشاء" أنّه لكي تتم مشاركتها بين عناصر تركيبية مختلفة، يتم ترقية عرض العنصر التركيبي إلى طبقة مركبة عند بدء الانتقال إلى مطابقته في الوجهة. ويتمثل تأثير ذلك في أنه سينخفض حدود العنصر الرئيسي وتحولات طبقته (على سبيل المثال ألفا والمقياس).

وسيتم عرضه فوق عناصر واجهة المستخدم الأخرى غير المشتركة. بعد انتهاء عملية الانتقال، سيتم تجاهل العنصر من التراكب إلى DrawScope الخاص به.

لقص عنصر مشترَك إلى شكل، استخدِم الدالة العادية Modifier.clip(). ضَع الرمز بعد sharedElement():

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

إذا أردت التأكد من عدم عرض عنصر مشترك خارج الحاوية الرئيسية أبدًا، يمكنك ضبط clipInOverlayDuringTransition على sharedElement(). بشكلٍ default، بالنسبة إلى الحدود المشترَكة المُدمَجة، يستخدم clipInOverlayDuringTransition مسار القطع من العنصر الرئيسي sharedBounds().

للسماح بعرض عناصر محددة في واجهة المستخدم، مثل شريط سفلي أو زر تحرك ، في أعلى الشاشة دائمًا أثناء انتقال عنصر مشترَك، استخدِم Modifier.renderInSharedTransitionScopeOverlay(). يحافظ هذا المُعدِّل تلقائيًا على المحتوى في التراكب خلال الوقت الذي يكون فيه التأثير المشترَك نشطًا.

على سبيل المثال، في Jetsnack، يجب وضع الرمز BottomAppBar فوق العنصر المشترَك إلى أن تصبح الشاشة غير مرئية. تحافظ إضافة المُعدِّل إلى العنصر القابل للتجميع على تميّزه.

قد تحتاج أحيانًا إلى تحريك العنصر القابل للإنشاء غير المشترَك والحفاظ على العناصر الأخرى القابلة للإنشاء قبل عملية النقل. في هذه الحالات، يمكنك استخدام renderInSharedTransitionScopeOverlay().animateEnterExit() لتحريك العنصر القابل للإنشاء أثناء تشغيل عملية انتقال العنصر المشترَك:

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

وفي الحالات النادرة التي تريد فيها عدم عرض العنصر الذي تمت مشاركته على سطح الصفحة، يمكنك ضبط السمة renderInOverlayDuringTransition في السمة sharedElement() على القيمة "خطأ".

إعلام التنسيقات التابعة للتغييرات التي تطرأ على حجم العنصر المشترَك

لا تُرسِل sharedBounds() وsharedElement() تلقائيًا إشعارًا إلى الحاوية الأساسية بأي تغييرات في الحجم أثناء انتقالات التنسيق.

لنشر تغييرات الحجم في الحاوية الرئيسية أثناء عملية النقل، غيِّر المَعلمة placeHolderSize إلى PlaceHolderSize.animatedSize. يؤدي ذلك إلى تكبير العنصر أو تصغيره. تستجيب جميع العناصر الأخرى في التخطيط للتغيير.